/*! lazysizes - v5.3.0 */

Responsive Images - an easy tutorial how to make your images look great and load fast on all computers, mobile devices and screen resolutions.

responsive images

Small pictures are too small for large screen resolutions

If you have for instance an image with 500 pixels in width and 300 pixels in height, this image looks great on a mobile phone with a screen width of about 400 pixels:

responsive images mobile phone

But the same image looks too small on an Ipad or tablet computer with a display width of about 1000 pixels:

responsive images ipad

The same 300 pixels image looks even tiny on a laptop with a full hd resolution of 1920 pixels:

responsive images laptop

So you might think that you simply use a large image with a resolution that fits into the slot for the laptop, because your web browser will make it smaller. Good idea, but this will make your website very slow especially on smartphones. The reason for this is that the same image with 300 pixels has got a size of about 100KB, if it is 1000 pixels its size grows to about 250 KB and with 1500 pixels it will be as big as about 400 KB.  So who cares about the size of an image? For ONE image you might be right, but if you think about that most internet pages have got several pages or even an image gallery, you can imagine that using images with the size of 100 KB or 400 KB will quickly add up to a difference of a few thousand KBs. And this will make a difference in waiting to load a web page on a mobile phone between 2 or 3 seconds and waiting for 10-30 seconds depending on your internet access. None of your visitors wants to wait longer than 3 seconds for a web page.

So best practice is to use responsive images, which means that you provide three versions of your image and tell your browser, when to use which one. The following code shows you how you can create responsive images with HTML and CSS.

How to create responsive images

1. Create a picture with 1500 pixels

1. Create an image with the width of 1500 pixels and a height of 900 pixels and save it as a jpg-file, which means that you save it as image.jpg into your folder /responsive-images. For this you can use the free and excellent image tool paint.net.

paint.net resize image

2. Create pictures with 1000 and 500 pixels

Resize your 1500 pixels wide image to 1000 pixels width and 600 pixels height and save it as image.jpg into the folder /responsive-images/medium. Then resize your 1500 pixels image image to 500 x 300 pixels and save it as image.jpg in the folder /responsive-images/small.

3. Convert your pictures with TinyPNG

Convert your responsive images with tinypng.com. This free online tool keeps the size of the responsive images but uses smart compression to make them look great but make them smaller in size.

tinypng.com smart compression

4. Create the code for your responsive images

The code for a simple image could look like this:

<img data-src="/images/image.jpg" alt="image description">

To make the browser use responsive images, you use the following code:

<img data-src="/images/image.jpg" alt="image description" data-srcset="/images/image.jpg 1500w, /images/medium/image.jpg 1000w, /images/small/image.jpg 500w" sizes="(min-width:992px) 60vw, 100vw">

The code:

srcset="/images/image.jpg 1500w, /images/medium/image.jpg 1000w, /images/small/image.jpg 500w"

tells the browser that there are three images which can be used here:
a) /images/image.jpg with a width of 1500 pixels
b) /images/medium/image.jpg with a width of 1000 pixels
c) /images/small/image.jpg with a width of 500 pixels.

The code:

sizes="(min-width:992px) 60vw, 100vw"

tells your web browser that if the screen width is at least 992 pixels the image needs 60 percent of the screen size in pixels. E.g. if your screen is 1000 pixels the image needs 600 pixels. If the screen is smaller than 992 pixels the image has to be 100 percent of the screen. E.g. if the screen is 750 pixels the image will be also 750 pixels. Since there are the options of images with 500, 1000 and 1500 pixels, for a screen of 750 pixels the browser will take the next biggest image, which is here the image with 1000 pixels to make it look great and load fast.

The reason why you need two different indications for the widths of your screen is the following:

5. Why you need two indications for the picture width with sizes

If you have a layout with only ONE column, which is mostly true if the screen has got LESS than 992 pixels in width on mobiles, the width of the image is in most cases between 90 and 100 percent of the screen width:

screen with one column

But if the width of the screen is 992 pixels or MORE like on laptops, you have in most cases a layout of TWO or even three columns. But then each image cannot take more than 50 percent of the screen width of your device:

screen with two columns

6. If your browser does not understand srcset

The code:

src="/images/image.jpg"

is the fall back. If your web browser does not understand "srcset" and "sizes", it will show this image: /images/image.jpg.

7. Test your responsive images

You should now test your web page with responsive images:

8. Learn more

To learn more about responsive images go to:

Conclusion

With the help of responsive images, you can make your images look awesome on all kind of devices like mobiles, tablet computers or laptops. It is some work to create three versions of your image, but it pays off because you will receive happy visitors who see sharp images and have your web pages shown in only a few seconds.

Create a Free Website with Jimdo
Create a Free Website with Jimdo
Disclosure: This article may contain affiliate links, meaning I get a commission if you decide to make a purchase through my links, at no cost to you. Please read my Privacy Policy.