Serving Next-Gen Images

Picture-tag delivery, NGINX rules, .htaccess caveats, and Cloudflare notes.

6 articles

How does WebP and AVIF delivery work?How your pages end up serving WebP or AVIF to modern browsers while older ones still get a working image.Which delivery method should I use?Picture tag, server rewrite, or none - how to pick the right WebP and AVIF delivery mode for your host and CDN.How do I configure NGINX to serve WebP and AVIF?Add a small NGINX location block that serves AVIF or WebP to browsers that support it and falls back to the JPEG or PNG.Why doesn't server rewrite work behind Cloudflare?Cloudflare ignores Vary: Accept by default, so it caches one format per URL and serves it to every visitor. Switch to picture-tag delivery — that's the whole fix.How do I use SlashImage with a CDN?Picture tag delivery is CDN-safe because each format has its own URL. Server rewrite breaks behind most CDNs by default.What happens on browsers that can't open WebP or AVIF?Every visitor always gets a working image. WebP and AVIF are supported by every current major browser, so the fallback rarely even triggers.