• What Are Responsive Images And Why You Should Use Them
  • By Nainy Sewaney
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Z Zhaojin
  • Proofreader: Carlos Schenn, Samyu2000, Xionglong58

How to use responsive images in web pages

You may have seen the term responsive design in the web design world.

Responsive design is about making your web pages look best on different screen sizes. It’s about making your web pages adapt to different screen sizes.

So, what is a responsive image?

What is the relationship between responsive graphics and responsive design? Why do we use them?

In this article, we discuss these issues.

What is a responsive image

Nowadays, graphics have become an essential element of web design.

Most websites use images.

But did you know that while your site layout can be adapted to device size, the images displayed are not adaptive?

No matter what device you use (mobile, tablet, or desktop), the default download is the same image.

For example, if the image size is 2 MB, you will download 2 MB of image data no matter what device you are on.

Developers can write code to display a portion of the image on a mobile device, but still need to download the entire 2 MB image data.

This is out of place.

How do I download multiple images for the same web page?

Images on phones and tablets are supposed to be smaller, and loading a lot of larger images can definitely affect performance.

We need to provide different sizes of images for different sizes of devices, mobile devices display small size image, flat panel display medium size image, desktop display large size image, how to achieve?

By using responsive images, we can avoid downloading unnecessary image data on smaller devices and improve site performance on these devices.

Let’s see how we can achieve this.

Responsive images in HTML

Take the image above.

This image is designed for desktop applications and is compressed on small screen devices, so we can crop it instead of downloading the full image.

We can write the following in HTML to download different images in different screen sizes.

<img src="racoon.jpg" alt="Cute racoon"
     srcset="small-racoon.jpg 500w, medium-racoon.jpg 1000w, large-racoon.jpg 1500w" sizes="60vw"/>
Copy the code

Let’s take a look at what this code does.

The tag is responsible for rendering the image in HTML, while the SRC attribute tells the browser which image to display by default. In this case, if the browser does not support the srcset attribute, the default is the SRC attribute.

The SRcset attribute is one of the most important attributes in this code.

The srcset property notifies the browser of the appropriate width of the image; the browser does not need to download all images. With the SRCset property, the browser decides which image to download and ADAPTS to that viewport width.

You may also notice the W descriptor for each image size in the SRCset.

srcset="small-racoon.jpg 500w,
        medium-racoon.jpg 1000w,
        large-racoon.jsp 1500w"
Copy the code

The W in the code snippet above specifies the width, in pixels, of the image in the SRCset.

There is also a sizes attribute, which tells the browser the size of the element that has the srcset attribute.

sizes="60vw"
Copy the code

Here, the sizes property has a value of 60 vw, which tells the browser that the width of the image is 60% of the viewport. The size attribute helps the browser select the best image from the SRCset for this viewport width.

For example, if the browser viewport width is 992 px, then

60% of the 992 px

= 592 px

Based on the calculations above, the browser will choose the image that is 500 W or 500 px wide and closest to 592 px to display on the screen.

The browser ultimately decides which image to select.

Note that the decision logic for selecting images for different viewport widths may vary from browser to browser, and you may see different results.

Downloading less image data for smaller devices allows the browser to display these images quickly, improving the performance of your site.

This paper summarizes

The biggest reason for slow site loading is images loaded with megabytes of data.

Using responsive images can reduce site load times and provide a better user experience by avoiding downloading unnecessary image data.

The only downside is that we give up full control of the browser and let the browser choose the image to display at a particular viewport width.

Each browser has a different strategy for selecting the appropriate responsive image. That’s why you might see different images loading at the same resolution in different browsers.

Give up control of the browser and display images according to the viewport width to gain performance advantages, and you need to make trade-offs in practical applications.

That’s the end of this article, and I hope it gives you a better understanding of responsive images and why you should consider using them on your website.

If you have any questions, suggestions or comments, please feel free to share them in the comments section below.

Thanks for reading!

Reference for this article:

Image Optimization — Addy Osmani

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.