webP image file and <picture> tag

Versions

Author: max fancourt

image Webp picture tag

Dual Image Hybrid (WebP + Fallback)

Version 4.0: By Max Fancourt, 2025

So this is version 4 yes v2, v3 and everything before was work in progress… quite a bit has changed and so its a complexity new action so dump the old this is what it does basically to fill in the gaps that good old freeway didn’t handle:

This cunning little Freeway Action bridges the gap between the past and the future… gracefully combining old school reliability with modern image wizardry. It automatically swaps your standard image for a modern, lightweight WebP (or AVIF) version where supported, while politely providing a JPG/PNG fallback for those browsers still living in 2008.

For those feeling particularly clever, it even supports responsive breakpoints, allowing you to serve different images for different screen sizes. All neatly wrapped up inside a proper tag. Of course, if you’re feeling nostalgic, the Action can also fall back to the classic “onerror” method, ensuring everyone gets to see something, no matter how ancient their device might be.

It also politely if you want converts Freeway’s generated IDs into CSS classes for more flexible styling plus extra classes if you want and alt tag option. Finally it automatically injects retina safe scaling because nobody likes crap pixilated images.

In summary (or: what this Action does while you’re not looking)

1. Outputs modern elements with optional WebP/AVIF sources
2. Automatically falls back to standard image formats for older browsers
3. Supports up to two extra responsive sources for different breakpoints
4. Converts Freeway IDs to CSS classes like the CSS: ID to Class FW7 action
5. Auto-detects and adapts to Freeway’s HTML level (no in HTML3, sorry)
6. Adds retina-friendly scaling and display fixes automatically
7. Works seamlessly whether positioned inline or absolutely
8. Requires no JavaScript on your part… it handles everything silently
9. Adds polite notes reminding you to keep your CSS tidy
10. Still loves legacy browsers

1 Comment