One of the key features in WordPress 4.4 is responsive images. Joe McGill, who is helping to merge the feature to core, joined me for a thirty minute interview to explain how it works.
When users upload images in WordPress, it automatically crops new images to smaller sizes. For example, if you upload an image that’s 1500 x 706, the image sizes might look like this:
- Full Size – 1500 x 706
- Large – 500 x 235
- Medium – 300 x 141
- Thumbnail – 150 x 150
Additional sizes are created depending on the theme. If the full size image is attached to a post, users on desktop and mobile devices will see the full size image. However, it doesn’t make sense to use the full size image on mobile devices because of its display and file size.
Responsive images in WordPress 4.4 adds srcset
and sizes
support to WordPress. This allows the software to automatically use and display the right image based on a device’s screen size. If I attach a full size 1500 x 706 image to a post in WordPress 4.4, mobile devices will see the large or medium-sized image instead.
Responsive images don’t have any settings to configure as the magic happens behind the scenes. I encourage you to listen to the interview as it may be easier to understand listening to us talk through the feature.
Great feature… sorry for my ignorance, but is this what some refer to as adaptive design, or adaptive design is something different?
And if this is the same as adaptive design, why don’t we call it that, so there is no confusion?
My understand is that in responsive design, the same image is used to serve to desktop, tablet and phone screens, only the screen dimension changes, but not the actual image.
With adaptive design, a different image is served, along with the dimensions of the image, depending on the device (screen size).
Shouldn’t the title of this article be “adaptive images” instead? Where am I going wrong here?
Again, great feature,and once again, great reporting Jeff.