Remember that time you showed an online image to your friend and it looked horrible? You kept insisting it looked great on your computer. Well, responsive images are changing that. Responsive images adjust to the bandwidth, screen, and device to deliver the best image quality for that combination.

Responsive design means creating content that displays and loads well on any device, with any bandwidth. Images provide an immediate focus point for your content, pages with images report improved Google search results and more social media traffic. So, how can you ensure your images are responsive?

Creating Responsive Images

1. Supply images in multiple, alternate resolutions. How many? Consider the following issues:

1. For web developers, more resources = more to manage.
2. For users, more resources mean less waste. But remember, more HTML to download = fewer cache hits, resulting in slower loads; oops.

2. How should you navigate these conflicting priorities? Initially, most developers simply picked a more-or-less arbitrary step size, in pixels. Jason Grigsby pioneered the idea that we can be smarter about this by using file-size-based steps, instead. Rather than having versions that were, for example, 600, 800, and 1000 pixels-wide; we would generate files of 60 kB, 80 kB, and 100 kB.

3. Why? Because different images can have surprisingly different compression characteristics, and you care much more about the wasted bytes when you load an over-sized image than you do wasted pixels.

4. Now that you’ve marked up a set of multiple, alternate resources – how should browsers pick and load the most appropriate resource out of the set? In order to choose, browsers need to know how many pixels are in the image box. Once they know that, they can pick the version that best fills the box. The trick is that box-size is determined by a number of things:

1. The viewport size
2. The screen density
3. The page layout

The browser always knows the viewport size and screen density. Page layout, however, is where things get sticky.

Displaying Responsive Images

1. When loading a webpage and parsing its HTML, browsers begin loading external resources (like CSS and images) as soon as they see their URLs in the markup. This is good for performance – image bytes account for 68% of the web, and you want to start moving those bytes across the network as soon as possible. However, it is bad for layout-aware image loading; browsers don’t, won’t, and can’t wait for layout before kicking off image loads. The load-it-as-soon-as-you-see-it strategy means that you must choose between:

1. Intentionally delaying image loads and waiting for page layout to complete so that you know how many pixels of resolution you actually need, before loading a given image,
2. Kicking off image loads as soon as you possibly can (without knowing how many pixels you may actually need).

2. Do you want your images to load without delay or to be resolution-responsive? Because – without adding something else to your code – you cannot have both.

3. If you want your resolution-responsive images fast, you need to short-circuit the normal flow of information. You need to tell the browser the layout size of the image directly in markup.

4. By supplying multiple versions of each image, and using either JavaScript or srcset and sizes on the <img> tag to pick amongst them, you can ensure all users – whether they’re on a phone, a 5K display, or anything in between – get a version of your image with just enough resolution to look great on their display.

Fast, resolution-responsive images may be more complex to implement, but the payoff is enormous. Users focus on your content, not the poor quality of the image. Today users spend just seconds waiting for a page to load, do not give them a reason to stop loading your page. Now there are multiple ways to achieve responsive images, it all depends on your resources and comfort level. Using parameters on the HTML5 <img> tag, using JavaScript or using an image management product such as Cloudinary to simplify the process of creating responsive images, for example. No need for one size fits all images again.