{"id":27747,"date":"2021-10-22T16:59:43","date_gmt":"2021-10-22T16:59:43","guid":{"rendered":"http:\/\/Responsive-Images-with-Resolution-Switching"},"modified":"2025-03-02T14:58:29","modified_gmt":"2025-03-02T22:58:29","slug":"responsive-images-with-resolution-switching","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/responsive-images-with-resolution-switching\/","title":{"rendered":"Responsive Images with Resolution Switching"},"content":{"rendered":"

Today we have different devices with different sizes and orientations, and sending images that have been designed to look good on larger screens to users with considerably smaller low-resolution screens isn\u2019t suitable for performance. It can also create a poor user experience.<\/p>\n

In this jam, we\u2019ll learn how to use one of HTML\u2019s responsive image features – resolution switching to make images responsive on devices with different screen sizes, thereby improving performance.<\/p>\n

Resolution Switching<\/h2>\n

With resolution switching, We can provide the browser with additional information (viewport width, resolution<\/a>, etc.), which it can use to display a different-sized copy of the same image based on the device.<\/p>\n

We\u2019ll use both the srcset<\/code> and size<\/code> attributes on the `img element to provide the browser with additional image assets to make the right choice.<\/p>\n

    <img<\/span> srcset<\/span>=\"ifeoma-imoh-500w.jpg 500w,\n                 ifeoma-imoh-800w.jpg 800w\"<\/span>\n         sizes<\/span>=\"(max-width: 600px) 500px,\n                800px\"<\/span>\n         src<\/span>=\"ifeoma-imoh-800w.jpg\"<\/span>\n         alt<\/span>=\"MYy profile picture\"<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
srcset<\/strong>\nUsing the srcset<\/code> attribute, we allow the browser to choose by providing a list of images and widths in pixels separated by commas. Images are labeled with a width descriptor<\/strong> – w<\/code> and not px<\/code>.<\/p>\n
sizes<\/strong>\nThe sizes<\/code> attribute gives the browser some information about the page layout based on some media conditions(e.g., (max-width:400px)). The browser then determines which image to choose from the list provided in the srcset attribute when certain conditions are true. All we need to do is give it multiple comma-separated values. For example, in our code snippet above, we say that when the viewport width is 500px or less, the browser should load the image that is 500px wide.<\/p>\n
Manually creating multiple alternate versions of each image can be time-consuming if your website has many images, so let\u2019s explore how to automate this process using Cloudinary.<\/p>\n
Cloudinary<\/h2>\n
Cloudinary provides us with dynamic URL transformations<\/a> that we can use to adjust our media assets easily. We will upload a high-resolution image to Cloudinary and deliver it in various sizes and qualities based on the device viewport width.<\/p>\n
First, you need to create a Cloudinary account<\/a> if you do not have one already. After that, you should see your account details on your dashboard. Now upload<\/a> an image to your Media Library with a file name that can be easily remembered. This file name or image name is also referred to as the public ID for that image.<\/p>\n
<a href="https:\/\/res.cloudinary.com\/ifeomaimoh\/image\/upload\/ifeoma.jpg" target="_blank">https:\/\/res.cloudinary.com\/ifeomaimoh\/image\/upload\/ifeoma.jpg<\/a>\n<\/code><\/pre>\n
This is the URL for the image I uploaded, and all our transformation instructions will be added between the \/upload<\/code> and the public ID – ifeoma.jpg<\/code>. For more on transformation URL structure, see here<\/a>.<\/p>\n
\"\"<\/p>\n
I uploaded the full resolution version of this image to my Cloudinary media library, and its file size is 89kb.<\/p>\n
To optimize our image and deliver it with minimal file size alongside high visual quality, we are going to focus on these three things:<\/p>\n