The < picture > tag proposed by HTML5 is very practical. In the general direction of user experience in the new era, it can combine css and other HTML elements to achieve unexpected results.

picture is often used with < source > elements (multiple possible) and < img > elements (one at most).

• source
  1. srcset: accept fixed image file paths (such as srcset="xxx.png") or comma separated image paths described by pixel density (such as srcset="xxx.png 1X, xxx@2x.png 2x")
  2. sizes: accept fixed width descriptions (such as sizes="100vw") or media query width descriptions (such as sizes = (max width: 30em) 100vw "). If there are commas, the last one is regarded as the default value
  3. media: accept any verified media query. Like the @ media selector of css
• img

When rendering, the browser gives priority to < source > elements and < img > elements.

Combined with the annual report of W3C in recent two years, the front end (especially css) began to break through in the direction of user experience. On the one hand, it is difficult to innovate in the general direction. On the other hand, Google, the "pioneer", is unstoppable.

As you may already know, the img tag provides srcset to provide different size versions of the same image:

<img src="" srcset="" sizes="" alt="">

You can use this:

<!-- According to equipment DPR Provide pictures of different sizes -->
<img
  	src="srcset-x1.png"
  	srcset="
  	 	srcset-x1.png 1x,
  	  	srcset-x2.png 2x,
  	  	srcset-x3.png 3x" 
  	alt="srcset for img"
/>
<!-- Provide pictures of different sizes according to the window size -->
<img
	alt="A baby smiling with a yellow headband."
	src="/baby-640w.jpg"
	srcset="
		/baby-320w.jpg 320w,
		/baby-640w.jpg 640w,
		/baby-960w.jpg 960w,
		/baby-1280w.jpg 1280w,
		/baby-1920w.jpg 1920w,
		/baby-2560w.jpg 2560w"
	sizes="
		(max-width: 500px) calc(100vw - 2rem),
		(max-width: 700px) calc(100vw - 6rem),
		calc(100vw - 9rem - 200px) "
/>

Among them, sizes means size. The image attribute first determines the current width to find srcset, and then the image will display the size according to the corresponding value of sizes!
Whether you choose pictures of different sizes according to the device DPR or the window size, the picture is the same, but the size is different. The final effect presented to the user is only the scaling of the picture.

The picture tag is different. If you not only want to change the picture size, but also want to display different pictures in different scenes, you can use it.

What are the different scenes mentioned above? To name a few 🌰:
For example, different resolutions

<picture>
	<source media="(max-width: 799px)" srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/elva-480w-close-portrait.jpeg">
	<source media="(min-width: 800px)" srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/elva-800w.jpeg">
	<img src="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/elva-800w.jpeg" alt="Chris standing up holding his daughter Elva">
</picture>

The picture presented to the user will have two stages:

• On the big screen, a big picture is displayed
• On the small screen, display a small picture (a new picture cropped based on the large picture)

The browser will switch pictures according to the breakpoints set by CSS media query. The biggest difference between it and < img > is that it can define different picture resources in different window sizes or pixel ratios! The obvious advantage is that the image resources of appropriate size are provided, which can eventually save a lot of bandwidth, and the image rendering effect is better than the direct scaling effect.

You can also use x units like img above:

<source
	srcset="
		square-large.jpg 2x,
		square-small.jpg 1x"
/>

Indicates that the imported picture source will be selected according to the DPR of the user equipment. When dpr=2, square large will be selected Jpg, square small will be selected when dpr=1 jpg.

Like Diablo mode
Cutting and zooming pictures like this is by far the most common form of art guidance, but it can help you do more than that.

Diablo mode is very popular on the web. In order to give users a better experience, I hope to make the pictures on the web slightly different in Light and Dark modes. Most developers prefer to use CSS filters and media queries to process images:

@media (prefers-color-scheme: dark) {
	img:not([src*=".svg"]) {
		filter: brightness(.8) contrast(1.2);
	}
}

Or:

body{
	filter: invert(1) hue-rotate(180deg);
}

invert(xxx); —— "Inverting" in CSS: when the action element has this value, the hue will "flip", such as white black; When the action element is an img picture, the tone of the picture will also be reversed. Hue rotate (DEG) applies hue rotation to images. The "angle" value sets the color ring angle value that the image will be adjusted. If the value is 0deg, the image does not change. If the value is not set, the default value is 0deg. Although there is no maximum value, a value exceeding 360deg is equivalent to another circle.

However, it is better to use < picture >:

<picture>
	<source srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/dark.png" media="(prefers-color-scheme: dark)">
	<source srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/light.png" media="(prefers-color-scheme: light)">
	<img src="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/light.png" alt="" />
</picture>

In the media attribute, when the condition value of preferences color scheme is dark, introduce dark Png picture, introduce light when preferences color scheme is light Png pictures, and use light on devices that do not support preferences color scheme Png picture.

For example, some less critical animation effects
Although, not everyone will like "animation":

• Some users face flickering animation, which may induce seizures
• Some users will react like carsickness due to motion effects

The system introduces preferences reduced motion: reduce to weaken or disable the dynamic effect. You can change the value manually.

In terms of user experience, we really need to consider different situations. In our recent project, the author has introduced this feature—— Sharing: minimize unnecessary animation and non key pop ups' interruptions to users

Although most of the dynamic effects on the Web can be completed by CSS or JavaScript, they are still used sometimes apng or gif format dynamic graph. If you want to use a static graph instead of a dynamic graph when the user turns on the setting to disable dynamic effects:

<picture>
	<source
		srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/animation.jpg"
		media="(prefers-reduced-motion: reduce)"
	> </source>
	<img srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/animation.gif" alt="" />
</picture>

Or:

<picture>
	<source
		srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/animation.gif"
		media="(prefers-reduced-motion: no-preference)"
	> </source>
	<img srcset="https://www.w3cplus.com/sites/default/files/blogs/2021/2112/animation.jpg" alt="" />
</picture>

Let's talk about the source of picture

The biggest feature of < picture > is that it contains both < source > and < img >. The < source > element allows developers to specify multiple alternative source sets for the < img > element. It doesn't mean anything in itself. For example:

<picture>
	<source srcset="small-200.jpg 200w"  sizes="(max-width: 639px) 100vw">
	<source srcset="medium-650.jpg 650w" sizes="(min-width: 640px) and (max-width: 1023px) 50vw">
	<source srcset="large-850.jpg 850w"  sizes="(min-width: 1024px) 25vw">
	<img src="my-image.jpg" alt="My image">
</picture>

Multiple < source > elements can appear in < picture > at the same time to specify the picture source, and the index will start from the first. If the second one meets the conditions, the first introduced image source will be adopted; If the first one does not meet the conditions, it will be based on the second < source >, and so on until a qualified picture source is found. If all the picture sources of < source > do not match, then < img > will be used for backup, and finally the picture source introduced by < img > src will be presented to the user.

However, when we use < picture >, the user actually sees the < img > element. If there is no img in the picture, the user will not see the image, because the picture and all its source sub elements are just to provide a source for img. Its source (< source >) only lets the browser know where to extract the source of the picture, which is used to replace the picture source introduced by src in < img >. This also means that any style you want to apply to rendered images (for example, max width: 100%) needs to be applied to img elements:

/* Will not be applied to the picture */
picture {
    max-width: 100%;
    height: auto;
}

/* Will be applied to the picture */
img {
    max-width: 100%;
    height: auto;
}