Joe McGill Explains How Responsive Images Work in WordPress 4.4

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.

There are 52 comments

Comments are closed.