Thanks to my friend Eric for telling me about this! If you use Astro, the web framework this site is built on, there is a sweet drop-in replacement for the <Image> component that offers better compression:

<Image
<Picture 
    formats={["avif", "webp"]}
    src={penguinSrc}
    alt="A very cool penguin!"
/>

Better, you can create a light component wrapper around this technique called <ContentImage> to encapsulate the formats parameter.

The <Picture> component instructs the browser to use the modern AVIF format for efficient image compression. If your browser doesn’t support AVIF (which is unlikely), it falls back to the WEBP format, what <Image> already compiles to. However, this of course means Astro generates two versions of every image, so keep that in mind if you have many images on your site.

A side note: AVIF is amazing! Someone managed to compress the entirety of Shrek in 8MB. How it works is borderline magic, and its future looks bright. Once it becomes a little more mature in the web ecosystem, I have no doubt <Image> will eventually compile to AVIF and automate this process.

Until next time!

↑ Scroll to top ↑