Skip to content

Instantly share code, notes, and snippets.

@mijustin
Created August 15, 2019 23:55
Show Gist options
  • Save mijustin/ed2ec8f2be951a5e70919a350ebd86d4 to your computer and use it in GitHub Desktop.
Save mijustin/ed2ec8f2be951a5e70919a350ebd86d4 to your computer and use it in GitHub Desktop.
Generating WebP images (with fallbacks) with Glide, for multiple viewports.
<div class="h-64 bg-cover relative">
<picture>
<source srcset="{{ glide src="assets/mess-podcast-studio-in-chicago.jpg" width="1208" quality="60" format="webp" }} 1208w,
{{ glide src="assets/mess-podcast-studio-in-chicago.jpg" width="604" quality="60" format="webp" }} 604w,
{{ glide src="assets/mess-podcast-studio-in-chicago.jpg" width="302" quality="60" format="webp" }} 302w"
type="image/webp" sizes="50vw">
<source srcset="{{ glide src="assets/mess-podcast-studio-in-chicago.jpg" width="1208" quality="60" }} 1208w,
{{ glide src="assets/mess-podcast-studio-in-chicago.jpg" width="604" quality="60" }} 604w,
{{ glide src="assets/mess-podcast-studio-in-chicago.jpg" width="302" quality="60" }} 302w" type="image/jpeg"
sizes="50vw">
<img src="{{ glide src="assets/mess-podcast-studio-in-chicago.jpg" width="1208" quality="60" }}"
class="absolute pin h-full w-full" style="object-fit: cover;" loading="lazy">
</picture>
<div class="absolute bottom-0 bg-tran-med rounded-tl text-white text-sm px-3 py-2 right-0"><a
href="https://content.thisismess.com/podcasting">Mess Studios</a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment