The
With the < picture> tag, you can change the appearance of an image based on the browser window size. The following example shows how URL parameters are used to crop the image based on media queries:
<picture>
<source
srcset="/images/unsplash-kiss.jpg?w=1280"
media="(min-width: 1280px)"
>
<source
srcset="/images/unsplash-kiss.jpg?w=768&h=1024&fit=crop"
media="(min-width: 768px)"
>
<source
srcset="/images/unsplash-kiss.jpg?w=568&h=320&fit=crop"
media="(min-width: 480px)"
>
<img src="/images/unsplash-kiss.jpg?w=320&h=568&fit=crop">
</picture>
The
Here is an example of how to add DPR variations to each srcset in your HTML code:
<picture>
<source
srcset="/images/unsplash-kiss.jpg?w=1280 1x,
/images/unsplash-kiss.jpg?w=1280&dpr=2 2x"
media="(min-width: 1280px)"
>
<source
srcset="/images/unsplash-kiss.jpg?w=768&h=1024&fit=crop 1x,
/images/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x"
media="(min-width: 768px)"
>
<source
srcset="/images/unsplash-kiss.jpg?w=568&h=320&fit=crop 1x,
/images/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x"
media="(min-width: 480px)"
>
<img src="/images/unsplash-kiss.jpg?w=320&h=568&fit=crop 1x,
/images/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x">
</picture>