{"id":33544,"date":"2024-04-11T07:00:00","date_gmt":"2024-04-11T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=33544"},"modified":"2025-12-04T15:39:28","modified_gmt":"2025-12-04T23:39:28","slug":"deep-dive-responsive-images-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/deep-dive-responsive-images-next-js","title":{"rendered":"Deep Dive Into Responsive Images in Next.js"},"content":{"rendered":"

Delivering an optimal image experience tailored to each user\u2019s device and screen size is crucial. Responsive images are a key technique ensuring images load quickly, maintain crisp quality, and adapt seamlessly across various viewports. This blog post explores what responsive images are, how to implement them in a framework such as Next.js, and how Cloudinary\u2019s CldImage<\/code> component built for Next.js simplifies the process.<\/p>\n

What Are Responsive Images?<\/h2>\n

Responsive images<\/a> enable the delivery of high-quality images that adapt to the user\u2019s device characteristics, such as screen size, resolution, and network conditions. Instead of serving a single, large image to all devices, responsive images provide different versions of the same image tailored to each device\u2019s capabilities. This approach ensures that users on mobile devices or slower networks receive optimized, smaller images, thus improving performance and reducing data usage. Even pixel density is considered; devices with retina displays, like modern MacBooks, can receive images of higher pixel density if supported by the website.<\/p>\n

Using HTML Image Attributes For Responsive Images<\/h2>\n

HTML provides basic tools to facilitate responsive images through the srcset<\/code> and sizes<\/code> attributes on the img<\/code> element. They can be used on the img<\/code> element as on the following example:<\/p>\n

<img<\/span>\n  srcset<\/span>=\"\n    image-320w.jpg 320w,\n    image-480w.jpg 480w,\n    image-800w.jpg 800w\n  \"<\/span>\n  sizes<\/span>=\"(max-width: 320px) 280px, (max-width: 480px) 440px, 800px\"<\/span>\n  src<\/span>=\"image-800w.jpg\"<\/span>\n  alt<\/span>=\"Responsive Image\"<\/span>\n\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The sizes<\/code> property, on the other hand, is a comma-separated list of media conditions and slot sizes<\/em> that are used when the media condition is evaluated to be true. The last value in the list is sometimes without any media conditions, meaning it is the fallback slot size when no media condition is matched. But how does the browser use this list?<\/p>\n
With srcset<\/code> and sizes<\/code> in place, the browser will look at characteristics of the user\u2019s device such as screen size and pixel density, find the first matching media query that matches the user\u2019s device, look at the slot size given to that media query, and load the image referenced in the srcset<\/code> list that has the same size as the slot<\/em> or, if there isn\u2019t one, the first image that is bigger<\/em> than the chosen slot size.<\/p>\n
Now, with the above example in mind, this means that:<\/p>\n
The srcset<\/code> attribute contains the image\u2019s different variations, where each variation is separated by a comma and provides the image\u2019s filename and the image\u2019s intrinsic size<\/a>. In the above example, image-320w.jpg<\/code> has a size of 320w, meaning it has an intrinsic width of 320 pixels. Alternatively, we could also use the image\u2019s pixel density descriptor instead of the size (e.g., 2x) if we wanted to provide images of different pixel densities (e.g., standard and retina, which has more pixels).<\/p>\n