Cloudinary Blog

Responsive Images and Their Creation for WordPress

How to Create WordPress Responsive Images

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 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 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

Recent Blog Posts

Converting Videos to GIFs in Kotlin-Based Android Apps

Among the image formats available today, Graphics Interchange Format (GIF) works for both static and animated images. A popular use of GIF images—commonly called GIFs—is to repeatedly loop motions, which you cannot in real life. Many people have turned themselves into online celebrities through effective application of GIFs.

Read more
Simple Steps to Make Your Site Accessible With Cloudinary

Web accessibility (a11y) is about gaining an insight into—

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can't use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.

Read more
Learn three ways in which to tell appealing stories on video.

Video storytelling is one of the most effective means of conveying messages to your audience. It’s also a popular marketing tool because most people are automatically drawn to video. In eCommerce, if accompanied by attractive images and a compelling narrative, video storytelling uniquely connect with potential customers without fail.

Read more