Photon: Image sizes added based on containing element, not $content_width

An issue has been reported with the Espied theme on self-hosted sites, where Photon is enabled.

On the Portfolio Project pages, the theme uses a larger image size, and uses JavaScript to add a CSS class for images over 1272px in width, which is used to style the images larger than the content. You can see an example of that here:

https://espieddemo.wordpress.com/portfolio/chrome-for-ios7-2/

The special class is being applied to self-hosted sites running Photon, but the image is not displaying at the correct size.

#### Steps to reproduce the issue

1. On a self-hosted, non-local site, apply the Espied theme.

2. Make sure Jetpack is installed. Under Jetpack > Settings, turn off "Speed up images and photos".

2. Create a Portfolio Project, and insert an image larger than 1272px wide. Make sure to set the image is set to display at the 'Custom' or 'Full Size'.

3. Publish the project, and view on the front end. You'll see a larger image:


The output for the image will look something like:

`
`

4. Go back to Jetpack > Settings, and turn on "Speed up images and photos".

5. View the portfolio post again.

#### What I expected

That the image would look the same.

#### What happened instead

The image displays at a smaller size. However, the JavaScript in the theme still applies the class to the image, as though it's a larger image, so it's outdented to the left:


The output for this image is:

`
`

The problematic bit is the `width="552" height="414"` at the end.

I've experimented with this a bit. Adjusting the `$content_width` for the theme does not affect this. However, changing the width of the containing element via CSS _does_.

For example, if I remove this from the style.css, the image will display at full width:

```
@media screen and (min-width: 37.5em) {
.page-content,
.entry-content,
.entry-summary {
width: 552px;
}
}
```

It will still include an inline width attribute, but it will use the width set by the theme's `$content_width`.

If I change the width to 800, the `width` attribute will match that. If I change it to something higher than the image, it'll stick to the width set by the `$content_width`.

In Espied, the issue seems to be that Photon gets the image's width on load, and uses that; then the theme's JavaScript checks to see the actual image size (which is still large, even though a `width` attribute is being used to make it look smaller) and adds the class used by the theme for large images. Then the styles are applied, but the image stays small.

I was wondering why the size is being inserted? It doesn't actually change the image's physical size (which uses the `$content_width`), just the size it displays at. If it's to make sure it doesn't display too large, themes should be doing that via a `max-width` in the CSS.

It may be possible to strip out the `height` and `width` attributes in the theme via JavaScript, but that seemed a bit hacky. I wanted to double-check why Photon's inserting the sizes first.

Start by tracing Photon’s image-size handling alongside the Espied theme’s JavaScript and style.css, focusing on the $content_width and the generated width and height attributes. Reproduce the portfolio image case with Photon enabled and compare the HTML and rendered size; done means the image sizing and large-image class no longer conflict.

Written by the indexing model from the issue text.