The right way to serve responsive images (srcset and sizes attribute) with WordPress and Bootstrap 5

The most confusing thing when you inspect responsive images is the fact that the browser takes into account the DPR (Device Pixel Ratio) in order to download the most appropriate image size.

Steven

An excellent article detailing the use of the srcset and sizes attributes is available here

Responsive images – Learn web development | MDN

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

What is the Device Pixel Ratio (DPR)?

Find out the Device To Pixel (DPR) of your device by opening up the page inspector (e.g. Chrome Devtools), typing in the console

window.devicePixelRatio

What exactly is device pixel ratio?

The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the iPhone 4 and iPhone 4S report a device pixel ratio of 2, because the physical linear resolution is double the logical linear resolution.

Physical resolution: 960 x 640
Logical resolution: 480 x 320

https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio#:~:text=The%20device%20pixel%20ratio%20is,double%20the%20logical%20linear%20resolution.&text=Other%20devices%20report%20different%20device,%2C%20including%20non%2Dinteger%20ones.

Make a breakpoint table for responsive image widths

Below example for standard Bootstrap 5 grid layout and two image sizes ‘full‘ and ‘medium‘. The medium image is displayed in a col-md-4 column

You can fine-tune the above table by also taking into account $grid-gutter-width and any other customizations to the grid layout on your end.

Choose sensible breakpoints for responsive images

Media settings are available in Settings > Media. A good choice for WordPress default image sizes would be

Serve responsive images

You can take control over what image size information is given to the browser.

The sizes attribute tells the browser how much screen width the image will take

Take into account the image size and the responsive breakpoints when you fill in the sizes attribute. The below goes in your functions.php file.

function assistancy_responsive_images( $attr, $attachment, $size ) {
  if ( $size == 'full' ) {
    $attr['sizes'] = '100vw';
  } 
  else {
 // make any customizations based on other image sizes here
    $attr['sizes'] = '(min-width: 768px) 440px, 100vw';
 // expand to include as many breakpoints as you like. List the larger ones first!
  }
  return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'assistancy_responsive_images', 10, 3 );

Verify responsive image styles are working in WordPress

Take into account the Device To Pixel ratio of your device when verifying if responsive images are working! Example verification:

• image formatted medium
• testing screen width is 1440px
• Available width for the image is 428px
• Device To Pixel (DPR) ratio is 2.0

1. Sizes attribute tells me I have 440px available. Note: we can improve by substracting gutter width here 🙂
2. Browser will correct this taking into account DPR → 440 x 2 = 880px → browser will look for an image at least 880px wide
3. Browser can choose from 380 / 576 / 960 / 1320 → it should pick the 960px version

Regenerate image thumbnails in WordPress

Each time you make changes to responsive image formats, a regeneration of thumbnails is needed for all existing media on your website.

The most easy and straightforward way is to get console access to your hosting server. Navigate to the website root (e.g. www/ or public_html/ and let WordPress do the work

# Regenerate all thumbnails, without confirmation.
$ wp media regenerate --yes

Remove image styles in functions.php

In case you have additional image style definitions in your theme or plugin, you can clean them up like this:

// remove any custom image styles
function remove_extra_image_sizes() {
  foreach ( get_intermediate_image_sizes() as $size ) {
    if ( !in_array( $size, array( 'thumbnail', 'medium', 'medium_large', 'large' ) ) ) {
      remove_image_size( $size );
    }
  }
} 
add_action('init', 'remove_extra_image_sizes');

Further reading

Responsive Images: Improving performance by letting the browser do the work

We want to serve appropriate images to all of our users, like small images on slower connections and small screens, and large, high-quality images on fast connections and high-resolution screens. Luckily, all modern browsers support a few nifty HTML features to help us optimize our images for whate…

https://formidable.com/blog/2019/responsive-images/