Cloudinary Blog

Responsive Images and Their Creation for WordPress

How To Create WordPress Responsive Images

Update April 07, 2020
Cloudinary has recently launched an enhanced WordPress plugin for dynamic images and video.

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.

Copy to clipboard
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.

Webinar
How to Optimize for Page Load Speed

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:

Copy to clipboard
<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:

Copy to clipboard
<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 :

Copy to clipboard
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:
Copy to clipboard
$img_srcset = wp_get_attachment_image_srcset( $image_id, 'large’' );
Copy to clipboard
<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.

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter


Further Reading on Responsive Images

Recent Blog Posts

Automatic Video Creation for Social Media at Scale

With video becoming increasingly popular, especially across social media, it’s as important as ever to ensure that your videos aren’t one of the hundreds that people just scroll on past. There’ve been a few successful techniques over the last couple of years to help with that, such as—

Read more
Uploading, Managing and Delivering PDFs With Cloudinary

The Portable Document Format (PDF) is a popular format developed by Adobe for delivering formatted text and images. A PDF file includes a complete description of all layout elements, including text, fonts, images and layers, ensuring that the file will look identical when opened on any device. The PDF format also has the big advantage of compressing high-quality files to a relatively small file size.

Read more
Share Your DAM Assets! New Visual Collections + Media Portal

If you've been working at home with young kids around during these “corona days”, you might have intuitively expected the last word of the title above to be "Toys" or "Candy"   😜. However, if you're a member of a creative team for a web site or software application, then you know how essential it is to have simple ways to share and collaborate on pre-production media assets.

Read more