Responsive Images and Their Creation for WordPress

With the advent of technology and the attendant fast-growing demand for feature-rich computing devices (laptops, smartphones, iPads), their manufacturers are rising to the occasion by producing high-resolution machines with screens of various sizes and device-pixel ratios. Thus was born the impetus behind the need for and creation of WordPress responsive images, which automatically optimize their online display according to the size and resolution of the device screen, ensuring sharpness and crispness—a delightful user experience.

Definition of Responsive Images

You as a website developer must be familiar with the code below or something similar, which causes an image to display correctly on the user’s browser.

img {
  width: 100%;
  height: auto;
}

I’ve used the above code myself in production numerous times, figuring that posting WordPress responsive images simply means displaying sharp, high-resolution images according to the size of the display device’s screen.

Reality is, given that websites are accessed from all over the world, the above code is starkly inadequate because it takes into consideration none of the important factors on which responsiveness hinge, namely, the display device’s processing power, data bandwidth, and Internet speed. One of the most aggravating things websites can do is drain the user device’s data while loading and displaying media. Furthermore, websites must also cater to a sizable segment of the user market that is still accessing the web on low-end devices with deficient processing power. Those devices are bound to run into delays and performance problems when accessing websites with large, high-resolution images.

Truly responsive images must play to the device’s strength—and they do.

The Magic Behind Responsive Images

Displaying an image online is a two-step process:

1. The application server loads and sends the image to the client (the browser).
2. The browser determines the image size to download and the image dimensions to display on the browser according to, respectively, the values you set in the sizes and srcset attributes.

Here’s the typical code for displaying nonresponsive images:

<img src="image/ballon.jpeg" alt="A fantastic balloon" class="hero__showcase__image">

Making an image truly responsive and displaying it takes more work on your part. You list several image versions with their resolutions along with breakpoints under srcset and their minimum widths under sizes. For example:

<img src="image/balloon.jpeg"
    srcset="image/balloon-tiny.jpeg 150w,
            image/balloon-small.jpeg 300w,
            image/balloon-medium.jpeg 600w,
            image/balloon-large.jpeg 1000w,
            image/balloon-extra-large.jpeg 1200w,
            image/balloon-extra-extra-large.jpeg 1500w,
            image/balloon-super-large.jpeg 2000w"
    sizes="(min-width: 80rem) 50rem,
           (min-width: 50rem) 38rem,
           (min-width: 45rem) calc(100vw - 10rem),
           100vw"
    alt="A fantastic balloon">

Such a setup instructs the device’s browser to, based on its own width, download and display the image with the following properties:

• The most optimal width (the w- value) among the ones listed under srcset.
• The most optimal size (the min-width value) among the ones listed under sizes.

For an excellent guide on how to make online images responsive, see this June 2017 article by Christian Nwamba.

Generation of Responsive Images on WordPress

A built-in capability from the popular, open-source WorldPress platform for websites automates the process of making images responsive. Here’s what happens on an image upload to WordPress:

1. The WordPress media library generates several versions of the image, complete with their own resolutions based on the image’s default settings and sizes, to make it responsive.
2. WordPress adds the srcset and sizes attributes along with the appropriate values to all the <img> tags in the website’s source code.

However, a WordPress shortcoming is that it cannot compute the appropriate number of breakpoints and all the device screens the website aims to cater for. You must add code to the functions.php source file yourself to capture all the image sizes for your WordPress codebase. Here’s what to do:

Add to the filter wp_calculate_image_sizes() a function called make_responsive_image_sizes, with which you can tweak the sizes attribute for images. For example :

function make_responsive_image_sizes($sizes, $size) {

  $width = $size[0];

  if ( $width > 600 ) {
      return '(min-width: 768px) 322px, (min-width: 576px) 255px, calc( (100vw - 30px) / 2)';
  } else {
      return $sizes;
  }

}

add_filter('wp_calculate_image_sizes', 'make_responsive_image_sizes', 10 , 2);

Here, the $width variable ensures that, if an image is not large enough, the browser displays it according to the default WordPress size, absent which the default in your specifications.

Furthermore, in WordPress 4.4 and above:

• The helper function wp_get_attachment_image_srcset() generates the values for the srcset attribute.
• The wp_get_attachment_image_srcset() function accepts an image’s IDand size as parameters, like this:

$img_srcset = wp_get_attachment_image_srcset( $image_id, 'large’' );

<img srcset="<?php echo wp_get_attachment_image_srcset($attachment_id, 'large' ); ?>"
        sizes="(min-width: 60rem) 60rem, 100vw">

<img srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large-cropped' ); ?>"
        sizes="100vw">

The above code works like a champ. Rest assured that your images’ srcset values would generate appropriately sized visuals for display on large screens.

Generation of Responsive Images With Cloudinary’s WordPress Plugin

With Cloudinary, you can effectively perform management tasks, including uploads, storage, administration, manipulation, and delivery, for images and videos, end to end. Relative to the theme of this post, especially useful is Cloudinary’s WordPress plugin for easy upload, optimization, and transformation of images. To learn how to install, activate, and connect that plugin to Cloudinary, see this article.

Conclusion

Setting up responsive images for your site on WordPress is an absolute must-do. For a deep perspective on responsive images and the benefits of leveraging Cloudinary for building websites, read Eric Portis’s article on srcset and sizes. With the web becoming more and more visually oriented, it pays to master the techniques for creating responsive images as a critical component of your site.

Further Reading on Responsive Images

• Responsive images with Cloudinary
• Auto-Crop Images for Responsive Designs and Improved Image Quality
• Best Practices for Responsive Web Design