Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<picture>
<source srcset="image-name@240.webp 240w,
image-name@360.webp 360w,
image-name@480.webp 480w,
image-name@690.webp 690w,
image-name@960.webp 960w"
media="(max-width: 480px)"
type="image/webp"
>
<source srcset="image-name@498.webp 498w,
image-name@747.webp 747w,
image-name@996.webp 996w,
image-name@1494.webp 1494w,
image-name@1992.webp 1992w"
media="(max-width: 996px)"
type="image/webp"
>
<source srcset="image-name@640.webp 640w,
image-name@960.webp 960w,
image-name@1280.webp 1280w,
image-name@1920.webp 1920w,
image-name@2560.webp 2560w"
media="(min-width: 997px)"
type="image/webp"
>
<source srcset="image-name@240.jpg 240w,
image-name@360.jpg 360w,
image-name@480.jpg 480w,
image-name@690.jpg 600w,
image-name@690.jpg 690w,
image-name@690.jpg 840w,
image-name@960.jpg 960w"
media="(max-width: 480px)"
>
<source srcset="image-name@498.jpg 498w,
image-name@747.jpg 747w,
image-name@996.jpg 996w,
image-name@1245.jpg 1245w,
image-name@1494.jpg 1494w,
image-name@1743.jpg 1743w,
image-name@1992.jpg 1992w"
media="(max-width: 996px)"
>
<source srcset="image-name@640.jpg 640w,
image-name@960.jpg 960w,
image-name@1280.jpg 1280w,
image-name@1600.jpg 1600w,
image-name@1920.jpg 1920w,
image-name@2240.jpg 2240w,
image-name@2560.jpg 2560w"
media="(min-width: 997px)"
>
<img
src="image-name@480.jpg"
alt="Eltz castle on an autumn day."
class="w-100-percent max-width-1280"
>
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment