Detailed explanation of the picture element in HTML5 and responsive image processing

The so-called responsive design means that the web page layout can be adjusted adaptively in terminal devices with different screen resolutions, different pixel density ratios, and different widths. The original intention of responsive design is to make the original PC website compatible with mobile terminals. Most responsive web pages are implemented through media queries and loading CSS files of different styles. This kind of flexible layout makes the layout of the website more reasonable on different device terminals.

Although responsive design has many benefits, it also has many drawbacks. Since the PC and mobile terminals access the same website, the PC does not need to care about the traffic limit, but the mobile terminal cannot ignore it.

In order to adapt to the screen width and pixel density of different terminal models, we generally use the following method to set the CSS style of the image:

 <style> img{ max-width:100%; height:auto; }</style>

Set the maximum width of the image to 100% to ensure that the image does not exceed the width of its parent element. If the width of the parent element changes, the width of the image will also change. height: auto can ensure that the width of the image changes. , the height of the image will be scaled according to its own width-to-height ratio.

In this way, when we access the images in the responsive webpage on a mobile device, we only scale the resolution of the image and download the large image on the PC. This not only wastes traffic and bandwidth, but also slows down the webpage. The opening speed seriously affects the user experience.

1. <picture> is a new element of HTML5;
2. If the <picture> element cooperates with the current <audio> and <video> elements, it will enhance the process of responsive image work. It allows multiple <source> tags to be set inside it to specify different image file names. Loading conditions;
3. <picture> can load different images according to different conditions. These conditions can be the current height of the window (viewport), width (width), direction (orientation), pixel density (dpr), etc.;

In the following chestnut, different images are loaded for different screen widths; minpic.png is loaded when the page width is between 320px and 640px; middle.png is loaded when the page width is greater than 640px.

 <picture> <source media=(min-width: 320px) and (max-width: 640px) srcset=img/minpic.png> <source media=(min-width: 640px) srcset=img/middle.png> < img src=img/picture.png <source media=(min-width: 320px) and (max-width: 640px) and (orientation: landscape) srcset=img/minpic_landscape.png> <source media=(min-width: 320px) and (max-width: 640px) and (orientation: portrait) srcset=img/ minpic_portrait.png> <source media=(min-width: 640px) and (orientation: landscape) srcset=img/middlepic_landscape.png> <source media=(min-width: 640px) and (orientation: portrait) srcset=img/middlepic_portrait.png> <img src=img/picture.png <source media =(min-width: 320px) and (max-width: 640px) srcset=img/minpic.png,img/minpic_retina.png 2x> <source media=(min-width: 640px) srcset=img/middle.png,img/middle_retina.png 2x> <img src=img/picture.png ,img/picture_retina.png 2x <source type=image/webp srcset=img/picture.webp> <img src=img/picture.png sizes=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>

6. Add the sizes attribute in the following example; load the corresponding version of the image when the window width is greater than or equal to 800px;

 <source media=(min-width: 800px) sizes=90vw srcset=picture-landscape-640.png 640w, picture-landscape-1280.png 1280w, picture-landscape-2560.png 2560w><img src=picture-160 .png sizes=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>

compatibility:

Currently, only Chrome, Firefox, and Opera have good compatibility with it. The specific compatibility is as shown in the figure:

1. Load appropriately sized image files so that available bandwidth is fully utilized;
2. Load images that are cropped differently and have different aspect ratios to accommodate layout changes at different widths;
3. Load higher pixel density and display higher resolution images;

1. Create <picture></picture> tag;
2. Within these tags create a <source></scource> tag that you want to use to perform any feature;
3. Add a media attribute to include the characteristics you want, such as width (max-width, min-width), orientation (orientation), etc.;
4. Add a srcset attribute, the attribute value is the corresponding image file name, and load it. If you want to provide different pixel densities, such as Retina displays, you can add additional file names to the srcset attribute;
5. Add a fallback <img> tag;

As can be seen from the above sample code, without introducing js and third-party libraries, and without including media queries in CSS, the <picture> element can declare responsive images using only HTML;

The <picture> tag itself has no attributes. The magic part is that <picture> is used as a container for <source>.

The <source> element, which is used to load multimedia such as video and audio, has been updated to load images and some new attributes have been added:

Accepts a single image file path (eg: srcset=img/minpic.png).

Or it is a comma-separated image path described by pixel density (such as: srcset=img/minpic.png, img/minpic_retina.png 2x). The 1x description is not used by default.

Accepts any validated media query, as you can see in the CSS @media selector (e.g. media=(min-width: 320px)).

It has been used in the previous <picture> syntax example.

Receive a single width description (eg: sizes=100vw) or a single media query width description (eg: sizes=(min-width: 320px) 100vw).

Or comma-separated media query width descriptions (eg: sizes=(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)) The last one is used as the default.

Accepts supported MIME types (eg: type=image/webp or type=image/vnd.ms-photo)

The browser will load the exact image resource based on these hints and attributes. According to the list order of tags. The browser will use the first appropriate <source> element and ignore subsequent <source> tags.

The <img> element is used inside <picture> to be displayed when the browser does not support it or when there is no matching source tag. It is necessary to use the <img> tag within <picture>. If you forget, no image will be displayed.

Use <img> to declare the default image display. Place the <img> tag at the end of <picture>, and the browser will ignore the <source> declaration before finding the <img> tag. This image tag also requires you to write its alt attribute.

This article draws on many other articles. All the introductions to picture are over here, so let’s try it now~

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.