A website can offer AVIF or WebP while retaining a compatible fallback, but the strategy needs real encoded files and correct delivery behavior. First confirm the formats improve your own images at acceptable quality, then verify the browser selects an appropriate candidate. A format label alone does not prove lower bytes or a faster page.
Separate export choice from delivery choice
An encoder creates image files; HTML or a server selects which file to deliver. Native browser export capabilities vary and may not match display support. Generate the necessary variants with an encoder that supports them, then confirm each actual file type before wiring them into the page.
Use picture for explicit format alternatives
A picture element can list source candidates with their MIME types and retain a normal img fallback. The browser selects according to support and applicable conditions, not by downloading all files and comparing their sizes. Keep alternative text and intrinsic dimensions on the image and use responsive size information when you also provide width variants.
Verify server-negotiated delivery separately
An image service may negotiate formats instead of using explicit file alternatives. Check the returned content type and its cache behavior so one client is not incorrectly served another client unsupported format. Inspect the delivered response, not only the filename or CDN setting.
Illustrative review: compare a narrow and a wide viewport, then inspect a browser path that uses the fallback. Confirm the selected image is sharp enough and that switching formats has not changed dimensions, crop or layout space.
Evaluate the complete page result
A smaller hero still loads late if the browser discovers it late. Do not lazy-load the LCP image, and measure the request timeline alongside byte reduction. Keep JPEG or PNG where a downstream workflow needs them. The practical goal is reliable, appropriate delivery, not replacing every image extension regardless of its content or use.