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()
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
sizesattribute on Featured Images on my website - When Responsive Images Go Bad – edge case where responsive images caused a greater file size
Leave a Reply