A personal anecdote warns against converting website images to AVIF and deleting the original files, since this removes the ability to serve fallbacks. The recommended fix is to keep original images alongside AVIF versions and use the HTML5 picture element with source and img tags so browsers can pick the format they support, falling back to the original when AVIF isn't supported.
Questions this post answers
How do I serve AVIF images with a fallback for browsers that don't support AVIF?
Use the HTML5 picture element with a source tag pointing to the AVIF file (type="image/avif") and an img tag with the original format (like PNG) as the fallback src. Browsers that support AVIF will load it first; others fall back automatically to the img source, so keep the original files rather than deleting them after conversion. Anyone rolling out modern image formats can compare real-world fallback patterns shared by developers on daily.dev.
Should I delete original PNG or JPEG files after converting images to AVIF?
No, keep the original files. Deleting them removes the ability to provide a fallback image source for browsers that don't support AVIF, breaking the picture element pattern that depends on having both an AVIF version and an original format available. Developers weighing image format tradeoffs can find similar lessons-learned writeups on daily.dev.