• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Programming / WordPress Responsive Images

WordPress Responsive Images

Last updated on November 20, 2016 by Sal Ferrarello

On November 20th, 2016 I gave a talk called How Responsive Images Work in WordPress at WordCamp Baltimore, this is the companion post to that talk. The slides for the talk are available at How Responsive Images Work in WordPress

How Do Responsive Images with srcset Work in General?

In my previous post Responsive Images with srcset, I look at how the srcset attribute works in general to provide responsive images.

Responsive Images in WordPress

The majority of the work on responsive images is done by the following three functions.

  • wp_calculate_image_sizes()
  • wp_calculate_image_srcset()
  • wp_make_content_images_responsive()

wp_calculate_image_sizes()

This wp_calculate_image_sizes() function generates the value for the sizes attribute in the image tag. This results in something like

sizes="(max-width: 1170px) 100vw, 1170px"

where both instances of 1170px are the maximum width the image is displayed. e.g. for a 1024 x 768 image it would be

sizes="(max-width: 1024px) 100vw, 1024px"

wp_calculate_image_srcset()

The wp_calculate_image_srcset() function generates the values pairs for the srcset attribute. e.g.

improve-git-log-output.jpg          1170w,
improve-git-log-output-300x162.jpg  300w,
improve-git-log-output-768x414.jpg  768w,
improve-git-log-output-1024x551.jpg 1024w

Background on How Images are Stored in WordPress

Whenver we upload an image into WordPress, in addition to the original image size, WordPress creates resized copies for each image size defined.

Each of these copies is saved with the dimensions appended to the filename. e.g.

Original: improve-git-log-output.jpg
One of Many Resized Versions: improve-git-log-output-300x162.jpg

In addition to saving these images, WordPress creates an attachment entry for the image in the posts table, which allows WordPress to keep track of the images that have been uploaded. Additionally, a post meta entry with a meta_key of _wp_attachment_metadata is created. In this attachment metadata, WordPress records all the sizes of the original image (as well as other information).

The function wp_calculate_image_srcset() uses the information from _wp_attachment_metadata to find all of the resized images, with the same aspect ratio as the image that should be displayed. Using this information, it generates the srcset values.

wp_make_content_images_responsive()

When displaying something like a featured image, WordPress has the post ID available to it and using this can gather the necessary attachment metadata (_wp_attachment_metadata) when calling wp_calculate_image_srcset().

However in the content of a post there may be many different images. In order to load the proper attachment metadata, WordPress uses the classes on the image to find the ID of the image.

e.g.

<img class="aligncenter size-full wp-image-2284" ...

indicates this image has an ID of 2284, which can be used to load the attachment metadata, which allows WordPress to use wp_calculate_image_srcset() and wp_calculate_image_sizes().

In other words, wp_make_content_images_responsive() parses the content, finding each img tag in the content. It looks for the ID of that image in the class (e.g. wp-image-2284) and then uses that ID to find the attachment metadata, which lists all of the other sizes of the image. Finally, this information is used with wp_calculate_image_srcset() and wp_calculate_image_sizes() to populate these attributes for the image.

Other Resources

  • Slides for How Responsive Images Work in WordPress
  • srcset Demo – Different size images are loaded based on your viewport width
  • What Pixel Density is My Display? – Is your display 1x, 2x, 3x, or 4x ?
  • CSS Tricks srcset post
  • WordPress Plugin Bootstrap Genesis Featured Image Sizes Attribute Modification – a plugin to modify the sizes attribute on Featured Images on my website
  • When Responsive Images Go Bad – edge case where responsive images caused a greater file size
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Computing, Presentation, Programming Tagged With: WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in