I’m playing around with @eleven_ty transforms and think I’ve got a way to do automatic responsive images and WebP without any special markup or filters. Slowly bending Eleventy to my will.

  • 1
  • 16
  1. @eleven_ty So I’ve totally got this working. It’s pretty fast all things considered; generates and optimizes different sized images, plus outputs WebP for all sizes, and puts them all into a picture element.

    Figuring out how I want to package it and then I’ll release it!

    • 1
    • 12
    1. @eleven_ty Ok all, I’ve finally got my 11ty @respimg transform code up!

      github.com/chromeos/static-site-scaffold/blob/module/lib/11ty/respimg.js

      It’s only working for absolute images r/n, not relative images, but the core function should work for any HTML and outputPath passed in! Hoping to finish my cleanup next week to release it.

      • 1
      • 12