Why this now that WP 4.4+ is responsive?

Hello there,

WordPress does not produce any images especially for responsive design! It uses the thumbnails of one’s own WordPress installation, which is quite clever indeed. However, one can never be certain that the thumbnail sizes of their theme will nicely fit in every place they are used and for every screen size.

Of course this is a decision that we leave to the theme developer to make!

Adaptive Images will appropriately resize all images, even the ones which are not in the post content, without messing with any design decisions. It will downsize all images, even the responsive ones, and only if and when they are requested.

So, I guess we are talking about two different things, but which are both used in a very-very close context and even work together for optimal results.

Hope this helps!

Let me know if I can help any further.

Cheers,
Takis

I’m confused. According to WP,

WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others—potentially saving bandwidth and speeding up page load times in the process.

Today I tested by uploading a 2300×500-pixel image to the media library but I did not place it on any page or post. In the Adaptive Images folder in wp-content/cache/adaptive-images, the image does not appear anywhere.

In the wp-content/uploads folder, it appears in its original form and in 8 other sizes. This is also true of my older images.

So it does appear that WP now create multiple images. How does that work, or not work, between Adaptive Images and WP?

As an aside, when I check my site in GT Metrix, it tells me some of my images are being resized in CSS, and it is recommended I deliver a smaller image. I thought this is what Adaptive Images is supposed to do?

Let me try to explain!

WordPress only creates the image sizes that the theme developer has instructed it to create. It does not create any images according to actual responsive needs whatsoever. Of course, as I said, before this approach is helpful, but not responsive web design oriented.

The fact that you did not see your 2300×500 pixel image appear in the Adaptive Images cache folder is either because the image has not yet been requested by a smaller device or there might be some other malfunction that we could debug. I would be very happy to test this image for you, if you can provide me with the url if the page it is included in.

The 8 other image size that you see this image appearing are image sizes set up by your theme. Most probably your theme developer made that design decision in advance for you.

Also, Gtmetrix is not a tool that simulates a real device and a real browser. It simply provides you with some good general practices.

Lastly, the Adaptive Images plugin has nothing to do with CSS and how the theme lays out the images in the browser. Actually that is the beauty of it: it is totally transparent! What it does is to literally serve a smaller version of the image, one with a lot less kilobytes, when the requesting device has a smaller screen. This way it saves tons of bandwidth. But the layout and styling of the images is still the job of the theme!

Cheers,
Takis