Skip to content

Instantly share code, notes, and snippets.

@charisTheo

charisTheo/next-gen-responsive-image-support.html

Last active February 3, 2020 17:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save charisTheo/86fc4464f2ee81527f5a07947253b14c to your computer and use it in GitHub Desktop.
Save charisTheo/86fc4464f2ee81527f5a07947253b14c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
next-gen-responsive-image-support.html
<picture>
<source srcset="img-1024.webp, img-1024-2x.webp 2x" type="image/webp" media="(min-width: 1024px)" />
<source srcset="img-1024.jpg, img-1024-2.jpg 2x" type="image/jpg" media="(min-width: 1024px)" />
<source srcset="img-768.webp, img-768-2x.webp 2x" type="image/webp" media="(min-width: 768px)" />
<source srcset="img-768.jpg, img-768-2x.jpg 2x" type="image/jpg" media="(min-width: 768px)" />
<source srcset="img-480.webp, img-480-2x.webp 2x" type="image/webp" media="(min-width: 480px)" />
<source srcset="img-480.jpg, img-480-2x.jpg 2x" type="image/jpg" media="(min-width: 480px)" />
<source srcset="img-320.webp, img-320-2x.webp 2x" type="image/webp" />
<img srcset="img-320.jpg, img-320-2x.jpg 2x" type="image/jpg" alt="A beautiful responsive image" />
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment