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

Laravel File Upload to a Local Server Or to the Cloud

Currently, Laravel is the most renowned PHP framework, boasting of a large developer community; several open-source packages, such as Cashier, Sanctum, Scout, and Telescope; and a host of paid platforms, e.g., Laravel Forge, Envoyer, and Vapor. Laravel Forge & Envoyer ably supports deployment and use of Laravel production-based apps.

Read more
TedsVintageArt.com Automates Generation of Captivating Product Images on Cloudinary

At TedsVintageArt.com, we digitally restore historic maps and sell their art prints on multiple platforms, such as Amazon, Etsy, eBay, and Houzz. As our operations ramped up years ago, it took an inordinately long time to generate custom images for our products. Plus, since we sell art, it behooves us to produce multiple high-quality images for each print, which was another time-consuming task.

Read more
lastminute.com Takes a Vacation From Media-Management Headaches With Cloudinary

As a 20-year online leader in travel and leisure retail, Europe-based public company lastminute.com along with its 1,200 employees are committed to enriching the lives of vacationers through comprehensive and enticing products and services. Beyond flight deals and tours, it's the images and videos, whether of that luxury villa in Greece, romantic Parisian street, or exotic stroll through the Marrakech markets, that attract audiences and boost bookings.

Read more