Cloudinary Blog

How to Create Images for Responsive Web Design

How to Create Images for Responsive Web Design

Images are crucial to website performance, but most still don't implement responsive images. It’s not just about fitting an image on the screen, but also making the the image size relatively rational to the device. The srcset and sizes options, which are your best hit are hard to implement. Cloudinary provides an easier way, which we will discuss in this article.

In this blog, I’ll share a valuable shortcut that can help you turn all images responsive. But first, let’s talk a bit about what responsive images are: An image is considered responsive if it retains its quality on varying device sizes without having an unpleasant impact on performance.

To better understand this concept, let's take a look at some device dimensions:


How to Optimize for Page Load Speed


Possible Full-Width Image Dimensions by Screen Sizes

  • Large/X-Large commercial screens: 2000+ pixels
  • Websites: 760 - 1200 pixels
  • Mobile Phones: < 760 pixels

Let’s assume you have a mobile-first strategy for building responsive apps. You may decide to use 760px images throughout, without considering larger screens. If these images are meant to take the full width of the devices on which they are rendered, then your content will look distorted and unprofessional on websites or commercial screens.

Your next attempt would be to use the largest possible image (2000px) and scale it down based on the screen sizes on which it is displayed.

Down-Scaling Images

Using CSS or JavaScript to down-scale images only makes them dimensionally responsive. The following image illustrates this better:

Down-scaling illustration
On mobile

Down-scaling illustration
On desktop

Both on web and mobile devices, the size is still 8.9MB. Bearing in mind that your mobile phones have less resources than your PC, we still have more work to do.

Using only a down-scaling approach is not ideal because it does not account for the size of the image; just its dimensions.

We have already seen that up-scaling wouldn't work either, hence we need something that handles both dimensions and size.

Size-Fitting

Our best option is to generate images based on the screen size and render them. This process can be extremely complex, but there’s a shortcut that can help you automate much of the process. You can make all images responsive in three easy steps with Cloudinary:

1. Include Cloudinary in Your Project

Add the Cloudinary SDK to your project simply by including it in your index.html using script tags:

Copy to clipboard
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.min.js"></script>

2. Add Images with data-src

You don't want the images rendered immediately, until JavaScript runs. Hence, include the image using the data-src attribute instead of src:

Copy to clipboard
<img data-src="https://res.cloudinary.com/christekh/image/upload/w_auto,c_scale/v1501761946/pexels-photo-457044_etqwsd.jpg" alt="" class="cld-responsive">

Using this approach, Cloudinary analyzes your browser screen first, resizes the image saved in Cloudinary storage as provided in data-src, and then renders the image in the appropriate size and dimension using JavaScript.

Two things to note from the tag:

  • w_auto,c_scale transformation parameters tell Cloudinary to dynamically generate an image URL scaled to the correct width value, based on the detected width actually available for the image in the containing element.
  • The class cld-responsive tells Cloudinary which images to apply this feature too.

3. JavaScript Call

Finally, initialize a Cloudinary instance in your JavaScript files and call the responsive method on this instance:

Copy to clipboard
// Initialize
var cl = cloudinary.Cloudinary.new({  cloud_name: '<Cloud Name>' });
// Call
cl.responsive();

Remember to create a free Cloudinary account so you can be handed a cloud name for configuring this instance.

This piece of code will walk through the DOM, find all image tags with the class cld-responsive to apply size and dimension fitting images on them.

Final Words

Always keep in mind that when you use CSS like the following code below to make images responsive, it does not guarantee a good user experience:

Copy to clipboard
img {
  width: 100%;
  height: auto;
}

The sizes of these images remain the same. Large images on mobile devices eat up resources (like allocated memory and running processes) causing slow downloads or unexpected behavior on the user's device. Responsive images ensure that users save lots of data bandwidth & have great experiences when using your image-rich website or app.

Lastly, it’s good to keep in mind that the suggested approach relies on JavaScript. Therefore, preloading provided by srcset and sizes are sacrificed and your browser must have JavaScript active for this feature to work.


Want to Learn More About Responsive Images?

Recent Blog Posts

Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more