Basic Guide — Responsive Images (How to)

A website without any images is boring and even with a nice design, most of us would probably prefer one with a lot of images but using images comes with challenges.

How do you make sure your website images render well on the multiple devices we have in existence as well as the ones to come?

How do you ensure the images you use do you slow down your site any more than it should?

Images have a width and height in pixels which is represented as: {width}x{height}, for instance:

864 x 576 (credit: Cloudinary)

The width style property
If we wanted to use this image in a web page, and make sure it retained its pixel ratio (width to height) ratio, we’d set the width property of the <img>element’s style to a fixed percentage, like:

<img src="./sample.jpg" style="width:100%;height:auto" />

This would make our image fill the width of its parent element, and ensure the height is directly proportional to the width, when the size of the parent element changes.

The max-width style property
By setting the width property to 100%, when the parent’s element size changes, the image will be scaled up or down accordingly. This means that if the parent’s width exceeds the width of the image, e.g. 2050px, our image will become pixelated, meaning it’ll beginning to lose pixel quality during rendering.

To fix this, we could use the max-width style property instead, to ensure that the width of our image element never exceeds the width of the image, like:

<img src="./sample.jpg" style="max-width:100%;height:auto" />

The image size dilemma
Now, that we’ve learned how to make sure our images are responsive, no matter the display size, what happens when our web page loads on a screen with a much smaller width than 1920px?
Say, a Google Pixel with size 1080x1920?

The browser still gets our image which is 1920x1200, remember? It then scales it down and renders.

However, look how much data we could have saved if we had a version of our image already adjusted to size 1080x1920.

About 604,800 pixels, that’s what.

But, we can’t have a version of our image for every screen size out there, can we?
No, we can’t … you’re right. It’s just not feasible.

However, we can have versions of our images for an arbitrary number of screen sizes, and select the closest fit for our device display.

The picture element
HTML5 introduced the <picture> element which lets you define several sources for an <img> element, which each <source> having the ability to match a media query.

This means that we can have versions of our image such as:

./sample-small.jpg  => 640x400 (for small screens)
./sample-medium.jpg => 1280x800 (for medium screens)
./sample.jpg        => 1920x1200 (normal)

Then we can have our <picture> element choose the right version for our display screen, like:

<picture>
  <source srcset="./sample-small.jpg" media="(max-width: 640px)">
  <source srcset="./sample-medium.jpg" media="(max-width: 1280px)">
  <source srcset="./sample.jpg">
  <img src="./sample.jpg" alt="flowers">
</picture>

Here, media="(max-width: 640px)" means:

Load from this source, if the display screen has a pixel width of less than or equal to 640px

Automate the process
No one likes doing stuff over and over again. So, making multiple versions of every image you intend to use might not be feasible, if you work in alone, in a small team, or just have better things to do with your time.

Services like Cloudinary, which offers a responsive images feature, lets you host your images with them, and can render transformed versions of your images when you specify parameters in the url, to get an image that best suits your display size. For example, requesting the same image with a width of 640px would look like this:

http://res.cloudinary.com/chilas/image/upload/w_640/sample.jpg

Image scaled width of 640px

So, our <picture> element could become:

<picture>
  <source srcset="./w_640/sample.jpg" media="(max-width: 640px)">
  <source srcset="./w_1280/sample.jpg" media="(max-width: 1280px)">
  <source srcset="./sample.jpg">
  <img src="./sample.jpg" alt="flowers">
</picture>

So, we’ve started with one version of our flowers photo, and ensured that its width and height when rendered best suits the display screen.

What we know
Responsive images may look complicated, but there are really just two problems we want to solve:

• To make images fit into different layouts while respecting their size.
• To avoid downloading image files that are larger than they need to be.