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

Steven     30.12.2020

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

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

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

breakpointmax-width image fullmax-width image medium
xs (<576px)576px576px
sm (≥576px)540px540px
md (≥768px)720px240px
lg (≥992px)960px320px
xl (≥1200px)1140px380px
xxl (≥1400px)1320px440px

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

image formatimage size [px]
thumbnail380px
medium576px
medium_large960px
large1320px

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

Comment

Related

Fontawesome performance 2 tips: better host locally and include only icons you actually use

Choose the right way to load and use Fontawesome icons. In this article we explain how to host the icons locally to minimize the number of external requests. Also, we optimize performance by only including used icons.

Enforce strong passwords in WordPress, optimize password strength estimator

A very easy way to enforce strong passwords in Wordpress, is to disable the 'confirm weak password' checkbox. On top of this, we optimize the loading of the password strength estimator, zxcvbn.

How to host font files locally and preload them

Custom fonts are a great way to improve your online visual appearance. In order to make sure that custom fonts don't slow down your website, make sure you (i) host the font files locally and (ii) preload them. This article describes the process of obtaining and serving font files from your own server, as well as preloading the right font file for faster website loading.