Picture element response processing image method in HTML5

The so-called responsive design, refers to the different screen resolution, different pixel density ratio, different width of the terminal equipment, the page layout can be adjusted adaptively. Responsive design is intended to make the original PC site compatible mobile terminal, most of the response page is through the media query, loading different styles of CSS file implementation. This flexible layout makes the site more reasonable in different device terminal layouts. This article mainly introduced in detail HTML5 in the picture element response processing pictures, small series think very good, now share to everyone, also give you a reference. Follow the small series together to see it, hope to help everyone.

Although the benefits of responsive design are numerous, there are many drawbacks. Because the PC and mobile terminal access is the same site, the PC can not care about the traffic limit, but the mobile side is not possible.

To fit the screen width and pixel density of different terminal types, 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 picture to 100% to ensure that the image does not exceed the width of its parent element, and if the width of the parent element changes and the width of the picture changes, Height:auto can ensure that the width of the picture changes, and the height of the picture is scaled according to its own aspect ratio.

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

The new Solution:<picture>

1. <picture> is a new element of HTML5;

2. If the <picture> element works in conjunction with the current <audio>,<video> element, it will enhance the process of responsive image work, allowing multiple <source> tags to be set within it to specify different image filenames. Loading according to different conditions;

3. <picture> can load different images according to different conditions, these conditions can be the current height of the window (viewport), width, direction (orientation), pixel density (DPR), etc.

Give me some chestnuts.

The following pest load different images for different screen widths, load minpic.png when the page width is between 320px and 640px, and load when the page width is greater than 640px middle.png

<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. The following chestnut added the direction of the screen as a condition, when the screen orientation is horizontal screen direction when loading _landscape.png end of the picture, when the screen orientation is vertical, loading _portrait.png end of the picture;

<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. The following chestnut added screen pixel density as the condition, when the pixel density is 2x, load _retina.png 2x picture, when Pixel density is 1x, load no retina suffix picture;

<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. The following chestnuts add image File format as a condition, when support WEBP format picture when loading WEBP format picture, when not supported when loading PNG format picture;

<picture>    <source type= "IMAGE/WEBP" srcset= "IMG/PICTURE.WEBP" >    </picture>

5. Add the width description in the example below, and the page will load the largest picture not larger than the current width according to the current size.

6. Add the sizes attribute to the example below and 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 ">

Compatibility:

Currently only Chrome, Firefox, Opera compatibility is good, specific compatibility

Advantages:

1. Load an image file of the appropriate size so that the available bandwidth can be fully utilized;

2. Loading different cropping images with different aspect ratios to accommodate different widths of layout changes;

3. Load higher pixel density and display higher resolution images;

Steps:

1. Create <picture></picture> label;

2. Create a <source></scource> tag within these tags that you want to use to perform any of the features;

3. Add a media attribute to include the attributes you want, such as width (max-width,min-width), orientation (orientation), etc.

4. Add a Srcset property, and the property value is the corresponding image file name to load. If you want to provide different pixel densities, such as the retina display, you can add additional filenames to the Srcset attribute;

5. Add a fallback tag;

How <picture> Works

<picture> Grammar

The above example code shows that without the introduction of JS and third-party libraries, the CSS does not contain media queries in the case of the,<picture> element can be implemented only in HTML to declare a responsive picture;

<source> elements

<picture> tag it itself has no attributes. The magical place 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 the image and some new attributes have been added:

Srcset (required)

Accept a single picture file path (for example: srcset= "Img/minpic.png").

or a comma-delimited picture path with pixel density descriptions (e.g. srcset= "img/minpic.png,img/minpic_retina.png 2x"), 1x description is not used by default.

Media (optional)

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

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

Sizes (optional)

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

or a comma-delimited description of the width of media query (for example: sizes= "(min-width:320px) 100VW, (min-width:640px) 50VW, Calc (33vw-100px)") The last one is treated as the default.

Type (optional)

Accept supported MIME types (such as: Type= "IMAGE/WEBP" or type= "Image/vnd.ms-photo")

The browser will load the exact picture resource based on these hints and properties. According to the list order of the labels. The browser uses the first appropriate <source> element and ignores the following <source> tags.

Add the final element

The element is used within <picture> to display when the browser is not supported or when no source tags match. Using tags in <picture> is a must, and if you forget, there will be no pictures displayed.

Use to declare the default picture display. Putting the tag in <picture> Finally, the browser ignores the <source> declaration before it finds the tag. This picture tag also requires you to write its ALT attribute.

The article draws on a lot of other articles, to here for the picture of all the introduction is over, then try it now!

Related recommendations;

An example of a responsive framework bootstrap grid system

Several responsive frameworks for web programmers

HTML5 Responsive Banner-making tutorial