Skip to content

Instantly share code, notes, and snippets.

@zachleat

zachleat/gist:8cd9f1844c7144099c54533fff1b0a76

Created April 18, 2020 04:17
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zachleat/8cd9f1844c7144099c54533fff1b0a76 to your computer and use it in GitHub Desktop.
Save zachleat/8cd9f1844c7144099c54533fff1b0a76 to your computer and use it in GitHub Desktop.
Download ZIP
Eleventy Vue Responsive Images Plugin Sample Input/Output
Raw
gistfile1.txt
<responsive-image
path="./src/images/home-store.jpg"
alt="The front entrance to a store"
:widths="[350, null]" />
<!-- BECOMES -->
<picture>
<source srcset="/v3/img/respimg/ef7c5bc4-350.webp 350w, /v3/img/respimg/ef7c5bc4.webp 589w" type="image/webp">
<source srcset="/v3/img/respimg/ef7c5bc4-350.jpeg 350w, /v3/img/respimg/ef7c5bc4.jpeg 589w" type="image/jpeg">
<img src="/v3/img/respimg/ef7c5bc4-350.jpeg" alt="The front entrance to a store" width="350" height="240">
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment