This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

What are responsive images

I think you all know about responsive web design, which uses flexible layout, 100% layout, REM, media query, etc., to make a web page display the appropriate layout on multiple terminals. One of the most important components of design is the ———— responsive image, which is often overlooked.

So what are responsive images?

Responsive images are a way to provide a browser with multiple image sources based on display density, the size of image elements on the page, or various other factors.

A method for providing the browser with multiple image sources depending on display density, size of the image element in the page, or any number of other factors.

Is it a little hard to understand? Just a few examples.

Common scenarios:

zooming

These are three different sizes of the same image, and for devices of different sizes and resolutions, you want your browser to be able to display different images.

Image cropping

This image of Obama’s speech clearly works well on a larger screen, but what about a smaller screen?

You will definitely want to scale the image and so on:

This is our most common and simplest approach, and it’s good enough for most scenarios, but just because one approach works for most scenarios doesn’t mean you shouldn’t think about whether it’s appropriate for the current scenario.

When the image is scaled in equal scale, the focus is not strong enough to see the speaker, and the background is a little confusing. In this case consider cropping:

This process allows you to see the speaker more clearly and is obviously more appropriate than the previous method.

Image adjustment

Look at the picture below: it has three images, a text, a stamp, some logos, etc.

This is fine on a PC, but what about on mobile? If zooming is used roughly, the user is likely to see an image like this:

This is not a good time for scaling or clipping. The purpose of cropping is to highlight the key points, and this picture as a whole clearly doesn’t cut out any of them. At this time, we need to consider whether to replace this picture. “Replacement” does not mean to replace it with a completely different picture, but to reconsider the design, layout and content of this picture, and make adjustments and screening.

What the front end does

The above content seems to be designers need to consider, so what should we do front-end? Media query + adaptive layout?

If the designer provides one image, use adaptive layout, if multiple images, set up the media query to show different images.

While this would do the trick, there is a simpler way to use srcset and Sizes for the IMG tag

In this section we have looked at several scenarios for responsive images, and in the next section we will expand on the Settings of sizes and SRcset properties.