Technical Notes · Image Optimisation · AVIF & WebP
AVIF/WebP Fallback Notes
Working notes on serving next-gen image formats (AVIF, WebP) with correct fallback to JPEG/PNG for older browsers — markup patterns and server considerations on Hoststack hosting.
See Hosting PlansWhy Fallback Matters, Not Just Format Choice
AVIF and WebP offer meaningfully smaller file sizes than JPEG/PNG at similar quality — but not every browser or tool in your pipeline supports them yet.
Smaller File Sizes
AVIF and WebP typically produce 25-50% smaller files than equivalent-quality JPEG, directly improving page load time and Core Web Vitals scores.
The Element
The standard, robust way to offer modern formats with fallback — list AVIF, then WebP, then JPEG/PNG as the final fallback, browser picks the first it supports.
CMS Plugin Support
WordPress and most modern CMS platforms have plugins that auto-generate AVIF/WebP versions and serve them with proper fallback markup automatically.
Server-Side Content Negotiation
An alternative to
Root Access for Server Config
Content-negotiation approaches (rather than plugin-based markup) require editing Nginx/Apache config — needs root access on a VPS.
Storage for Multiple Formats
Keeping AVIF, WebP, and a JPEG/PNG fallback for every image roughly triples image storage needs — NVMe SSD keeps this cheap and fast regardless.
Two Implementation Approaches
The most portable, widely-compatible approach is the HTML tag as the universal fallback. Browsers evaluate sources top to bottom and use the first one whose format they support, falling back to the
src if none match. This works regardless of server configuration and is what most WordPress image-optimisation plugins generate automatically.
The alternative is server-side content negotiation: the browser sends an Accept header indicating which image formats it supports, and the web server (via Nginx map directives or Apache rewrite rules) serves the matching file for the same URL. This keeps your markup simpler (just a normal 
) but requires web server configuration — meaning root access on a VPS — and is more fragile to configure correctly, particularly around caching (a CDN or browser cache keyed only on URL, not Accept header, can serve the wrong format to the wrong browser).
Recommendation for most sites
For typical WordPress or CMS-driven sites on shared hosting, use a reputable image optimisation plugin that generates
Practical Setup on Hoststack Hosting
On shared or cloud hosting (from ₹99/mo) running WordPress, install an image optimisation plugin that supports AVIF/WebP generation with automatic
On a Linux VPS (from ₹399/mo) running a custom application, you have the option to implement server-side content negotiation directly in Nginx if you want cleaner markup, using root access to configure the necessary Accept header handling and cache key adjustments (Vary: Accept) to avoid serving mismatched formats from cache.
Either way, keep an eye on total image storage — NVMe SSD storage on all Hoststack plans keeps the extra format variants cheap to store and fast to serve regardless of which approach you choose.
FAQ
AVIF/WebP fallback questions
Get NVMe storage for fast, format-flexible image hosting
Shared hosting from ₹99/mo, or Linux VPS from ₹399/mo for custom content-negotiation setups.
See Hosting Plans