Generating WebP images (with fallbacks) with Glide, for multiple viewports.

gistfile1.html

<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>