Solution for responsive images to adapt to different interfaces with the same image source

[[164364]]

Ever since Ethan Marcotte started talking about responsive web design in 2010, developers and designers have been scrambling to figure out how to handle responsive images. It’s a tricky question indeed, because we use the same image source for the same website across a wide range of device widths. Do you want a blurry, pixelated image to appear on a large monitor? Do you want a giant (albeit prettier) image to load on your phone? It’s a tough call.

A group of smart guys from the Responsive Issues Community Group (RICG) are working on solving this problem, and they have included the picture element and the srcset and sizes attributes in the HTML 5.1 draft specification. Because we cannot predict where and how users will access our website, we need the browser to select the best image based on the situation. The new specification will solve the following problems:

• Select based on device pixel ratio (device-pixel-radio)
• Select based on viewport
• Select based on Art direction
• Select based on image format

In this specification, two new attributes are added to the img element: srcset and sizes. srcset is used to declare a set of image sources, and the browser selects the image based on the conditions we specify using descriptors. The descriptor x represents the pixel density of the image, and the descriptor w represents the width of the image; the browser uses this information to select the appropriate image from the list. The sizes attribute provides the browser with information about the size of the image to be displayed, and this attribute must be included when srcset uses the w descriptor. This approach is particularly useful for images of variable width, which I will discuss in more detail later.

We can now serve images of different quality or art direction depending on the user's viewport without resorting to complex server-side setup. Responsive images will become an important part of the HTML specification, and all browsers will eventually support this solution.

Fixed-width images: Select based on device pixel ratio

The widespread use of retina displays has made it necessary to consider not only screen resolution, but also pixel density. Retina displays, 4K monitors, UltraHD - they all cram more pixels into a standard resolution display than the same size. More pixels = sharper images.

Some images are always displayed at a fixed width regardless of the screen size - such as site logos or character profile images, which means they need to be selected based on the device pixel ratio. The browser will choose which image to load based on the device pixel ratio.

The srcset attribute lists a pool of source images that the browser can choose to load, which is a comma-delimited list. The x descriptor indicates the device pixel ratio of the image. The browser uses this information to select the appropriate image based on the running environment. Browsers that do not understand srcset will directly load the image declared in the src attribute.

<img srcset= "crest-383.jpg 1.5x, crest-510.jpg 2x" src= "crest-255.jpg" alt= "[ISUX translation] Responsive image" alt= "USWNT crest" />

[[164365]]

A website logo is an example of a fixed-width image, which always remains the same width regardless of the viewport width. However, images related to the content usually need to be responsive, and their size often changes with the viewport. For these types of images, there are better ways to deal with them.

Variable width images: select based on viewport

For variable width images, we use srcset with the w descriptor and the sizes attribute. The w descriptor tells the browser the width of each image in the list. The sizes attribute is a comma-separated list of two values. According to the latest specification, if any image in srcset uses the w descriptor, then the sizes attribute must be set.

The sizes attribute has two values: the first is the media condition; the second is the source image size value, which determines the width of the image under specific media conditions. It should be noted that percentages cannot be used for source image size values, and vw is the only available CSS unit.

 <img srcset="uswnt- 480 .jpg 480w,
             uswnt- 640 .jpg 640w,
             uswnt- 960 .jpg 960w,
             uswnt- 1280 .jpg 1280w"
     sizes="(max-width: 400px) 100vw,
            (max-width: 960px) 75vw,
 640px"
 src= "uswnt-640.jpg" alt= "[ISUX翻译]Response-based image" alt= "USWNT World Cup victory" >

• [[164366]]

In the example above, we tell the browser to make the image as wide as the viewport when the viewport is less than 400 pixels wide. When the viewport is less than 960 pixels wide, make the image 75% of the viewport width. When the viewport is greater than 960 pixels, make the image 640 pixels wide. If you’re not familiar with vw , you can check out Tim Severien’s great article on viewport units.

The browser uses the srcset and sizes information to select an image that best meets the specified conditions. If the browser's viewport is 600 pixels, the image is most likely to be displayed at a width of 75vw. The browser will try to load the first image that is larger than 450 pixels (600*0.75), which is uswnt-480.jpg. If I have a Retina display with a dpr of 2, the browser will try to load the first image that is larger than 900 pixels (600*0.75*2), which is uswnt-960.jpg. We cannot be sure which image will be displayed because each browser has a different algorithm for selecting the appropriate image based on the information we provide. (Translator's note: The srcset and size lists are a suggestion to the browser, not an instruction. For example, a device with a device pixel ratio (dpr) of 1.5 can use either 1x or 2x images, which is determined by the browser based on its capabilities, network, and other factors.)

The first two examples both show the same image at different qualities, and the srcset attribute alone is enough. Don't worry about old browsers, which will treat it as a normal image and load it from src. If you want to display a slightly different image at different widths, such as showing only the key part of the image on narrower screens, then use the picture element.

picture: Select based on Art direction

The picture element is like a container for an image and its source. The browser still needs the img element to indicate that the image needs to be loaded. Without the img, nothing will be rendered. The source provides the browser with an alternative version of the image to display. Art-based selection is useful when a specific image needs to be displayed at a specific breakpoint. Using the picture element to select an image is unambiguous.

<picture>
  <source media= "(min-width: 960px)" srcset= "ticker-tape-large.jpg" >
  <source media= "(min-width: 575px)" srcset= "ticker-tape-medium.jpg" >
 <img src= "ticker-tape-small.jpg" alt= "[ISUX翻译]Response-style image" alt= "USWNT ticker-tape parade" >
 </picture>

[[164367]]

In this example, when the viewport is larger than 960 pixels, the landscape mode version of the image (ticker-tape-large.jpg) is loaded. When the viewport width is larger than 575 pixels, the browser loads a cropped portrait mode version of the image (ticker-tape-medium.jpg). When the width is smaller than 575 pixels, the loaded image (ticker-tape-small.jpg) has been cropped to focus on only one player.

The picture element is backwards compatible; browsers that do not support the picture element will display img. All standard attributes for images (such as alt) should be applied to img instead of picture.

source: Select based on the image format

In recent years, a number of new image formats have emerged that promise better image quality at smaller file sizes. This all sounds good, but the reality is that none of these new formats are supported by all browsers. Google's WebP is a good candidate, but only Chrome and Opera support it natively. JPEG-XR, originally called HD Photo, is a proprietary image format released by Microsoft that's only supported by Internet Explorer. If you want to learn more, check out Zoltan Hawryluk's in-depth look at these new formats.

<picture>
  <source type= "image/vnd.ms-photo" src= "wwc2015.jxr" >
  <source type= "image/jp2" src= "wwc2015.jp2" >
  <source type= "image/webp" src= "wwc2015.webp" >
 <img src= "wwc2015.png" alt= "[ISUX translation] Responsive image" alt= "WWC 2015" >
 </picture>

The type attribute of the source is used to specify the MIME type of each image, and the browser will choose the first source that contains the MIME type it supports. The order of the sources is important. If the browser cannot recognize all the image types, it will fall back to the original img element.

Can I use these now?

At the time of writing, the most stable versions of Firefox, Chrome, and Opera all support picture. Safari and IE do not natively support picture. The situation with srcset is slightly better, with full support in the most stable versions of Firefox, Chrome, and Opera, and partial support in Safari 8 and Internet Explorer Edge, which can use the x descriptor for resolution-dependent switching, but do not support the w descriptor. Safari 9 has full support for srcset.

There are a number of polyfills that solve support issues, the most well-known being Scott Jehl's picturefill. I currently use Alexander Farkas' respimage on my own sites. The current state of affairs is that we have reached consensus on solutions for responsive images, and these solutions are gradually being implemented by all major browsers. Although the specification is still being refined, native responsive solutions are getting closer and closer.

Using Responsive Images (Now)

Thank you for reading. This article is copyrighted by Tencent ISUX. Please indicate the source when reprinting. Violators will be held accountable. Thank you for your cooperation.
Source format: Tencent ISUX (https://isux.tencent.com/responsive-image.html)