Explain how to use the picture element in HTML5 to process images in a responsive manner,

Explain how to use the picture element in HTML5 to process images in a responsive manner,

Responsive Design

The so-called responsive design refers to the adaptive adjustment of webpage layout in terminal devices with different screen resolutions, pixel density ratios, and widths. The intent of the responsive design is to make websites on the original PC compatible with mobile terminals. most responsive webpages are achieved through media queries and loading CSS files of different styles. This flexible layout makes the website layout more reasonable on different devices and terminals.

Although responsive design has many benefits, it also has many defects. Because the PC end and the mobile terminal access the same website, the PC end can ignore the traffic limit, but the Mobile End cannot ignore it.

To adapt to the screen width and pixel density of different terminal models, we usually 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 also changes, and the height: auto scaling allows you to scale the image height based on its aspect ratio when the image width changes.

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

New Solution: <picture>

1. <Picture> is a new element of HTML5;
2. If the <picture> element works with the current <audio> element, the <video> element collaboration will enhance the process of responsive image operations. It allows you to set multiple <source> labels inside it, specify different image file names and load them according to different conditions;
3. <Picture> different images can be loaded according to different conditions. These conditions can be the current window height (viewport), width (width), orientation, and pixel density (dpr) and so on;

A few examples

In the following example, different images are loaded for different screen widths. When the page width is from 320pxto 640px, choose minpic.png?middle.png 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">    </picture>

2. For example, when the screen direction is set to "condition", the screen direction is "Landscape", and the image ending with "_ landscape.png" is displayed; when the screen direction is "portrait", the image ending with "_portrait.png" is loaded;

<picture>    <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">    </picture>

3.for example, when the screen density is set to the condition when the pixel density is 2 X, the image with no retina suffix is loaded when the pixel density is 1x;

<picture>    <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">    </picture>

4. Add the image file format as the condition in the following example. When webp format is supported, webp format images are loaded. If not, png format images are loaded;

<picture>    <source type="image/webp" srcset="img/picture.webp">    </picture>

5. Add the width description in the following example. The page will select an image not greater than the current width based on the current size;

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

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

Compatibility:

Currently, only Chrome, Firefox, and Opera are compatible with each other.

Advantages:

1. Load image files of the appropriate size to make full use of available bandwidth;
2. Attach different cropped images with different vertical and horizontal ratios to adapt to the layout changes of different widths;
3. Loads a higher pixel density to display images with a higher resolution;

Steps:

1. Create a <picture> </picture> label;
2. Create a <source> </scource> tag in these tags that you want to use to execute any feature;
3. Add a media attribute to include the desired features, such as max-width, min-width, and orientation;
4. Add a srcset attribute. The property value is the name of the corresponding image file for loading. If you want to provide different pixel density, such as the Retina display, you can add additional file names to the srcset attribute;
5. Add a rollback label;

Working principle of <picture>

<Picture> syntax

The sample code above shows that, without the introduction of js and third-party libraries and CSS without media queries, the <picture> element can declare responsive images only in HTML;

<Source> element

<Picture> A tag has no attributes. The magic is that <picture> is used as the <source> container.
<Source> elements are used to load multimedia, such as videos and audios. They have been updated and used to load images. Some new attributes have been added:

Srcset (required)

Accept a single image file path (such as srcset = "img/minpic.png ").

Or the path of the image described by pixel density separated by commas (,) (for example, srcset = "img/minpic.png, img/minpic_retina.png 2x"). The description of 1x is not used by default.

Media (optional)

If you accept any verified media query, you can see it in CSS @ media selector (for example, media = "(min-width: 320px )").

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

Sizes (optional)

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

Or the width of the media query separated by commas (,) (for example, sizes = "(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc (33vw-100px) ") the last one is used as the default one.

Type (optional)

Accept supported MIME types (for example, type = "image/webp" or type = "image/vnd. ms-photo ")

The browser loads the exact image resources based on the prompts and attributes. According to the tag list order. The browser uses the first appropriate <source> element and ignores the <source> label.

Add the last element

elements are displayed in <picture> when the browser does not support them or the source tag does not match. You must use the label in <picture>. If you forget the label, no image is displayed.

Use to declare the default image display. Put the label at the end of <picture>. The browser ignores the <source> declaration before finding the label. You also need to write the alt attribute of this image label.

I have used many other articles for reference in this article. All the introductions for picture are now over, so try it now ~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.