Skip to content

Instantly share code, notes, and snippets.

@Polkovn1k

Polkovn1k/adaptive_img.html

Last active March 17, 2023 18:56
Show Gist options
  • Save Polkovn1k/cabf1f310ea896f5fd339d49bafded86 to your computer and use it in GitHub Desktop.
Save Polkovn1k/cabf1f310ea896f5fd339d49bafded86 to your computer and use it in GitHub Desktop.
Download ZIP
Adaptive img (HTML)
Raw
adaptive_img.html
<picture>
<source type="image/webp" media="(min-width: 1250px)" srcset="img/desktop@x1.webp 1x, img/desktop@x2.webp 2x">
<source type="image/webp" media="(min-width: 768px)" srcset="img/tablet@x1.webp 1x, img/tablet@x2.webp 2x">
<source type="image/webp" srcset="img/mobile@x1.webp 1x, img/mobile@x2.webp 2x">
<source media="(min-width: 1250px)" srcset="img/desktop@x1.jpg 1x, img/desktop@x2.jpg 2x">
<source media="(min-width: 768px)" srcset="img/tablet@x1.jpg 1x, img/tablet@x2.jpg 2x">
<img src="img/mobile@x1.jpg" srcset="img/mobile@x1.jpg 1x, img/mobile@x2.jpg 2x" alt="" title="">
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment