The Jetpack Plugin ships with a module called “Photon” that can dynamically resize images.

To test this, I’m inserting uploading a large image (3000px by 2000px, and inserting it at full size):

The maximum $content_width for this theme is 840px, and it looks like Photon is serving it at those dimensions (840px by 560px). (Yay, much better than 3000px wide!)

However, even with a large viewport, the maximum image width of an image in this layout (2-column) is 605px. Why Photon isn’t lazy loading this image, detecting the maximum width, and then loading in the appropriate image size? (605px by 403px). Wouldn’t that make more sense?

If I shrink the viewport to 400px, the maximum image size is now 352px. On a fresh page load, shouldn’t Photon be able to generate a new image at that exact size: 352px by 235px?

From the Photon docs:

How does Photon determine which dimensions to serve?

Photon looks at the img element’s width and height attributes and then serves an image resized to those dimensions or to the width of the containing element (whichever is smaller).

I can understand some reasons why WordPress.com would not want to do this (it would cause a lot more images to be generated), but it would be really nice to have correctly sized images for mobile devices at least.

My guess is that it wouldn’t be too difficult to write a bespoke plugin to do this- maybe someone has already?

Picture Element

Another option would be to use a plugin that filters content and converts images to use the picture element- then offload the image source processing to Jetpack. Picture element looks like it is being worked on in Jetpack. See track ticket: https://github.com/Automattic/jetpack/issues/1169.