--- title: Failure of the week: encoding images to AVIF without... description: A personal anecdote warns against converting website images to AVIF and deleting the original files, since this removes the ability to serve fallbacks. The... canonical: https://daily.dev/posts/failure-of-the-week-encoding-images-to-avif-without-keeping-the-originals-dyeddgd2n twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Failure of the week: encoding images to AVIF without keeping the originals | daily.dev og:description: A personal anecdote warns against converting website images to AVIF and deleting the original files, since this removes the ability to serve fallbacks. The... og:url: https://daily.dev/posts/failure-of-the-week-encoding-images-to-avif-without-keeping-the-originals-dyeddgd2n og:image: https://api.daily.dev/og/posts/DyedDGd2N.png og:image:alt: Failure of the week: encoding images to AVIF without keeping the originals og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Failure of the week: encoding images to AVIF without keeping the originals **[Sylvain Kerkour](https://daily.dev/sources/kerkour)** · 1 min read · 6 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why should I keep the original PNG or JPEG files when converting images to AVIF for my website? Not all browsers support AVIF, so deleting the originals breaks image display for unsupported browsers. The fix is to use the HTML5 picture element with a source tag pointing to the AVIF file and type image/avif, followed by an img tag with the original PNG or JPEG as a fallback, letting each browser pick the format it supports. _Developers optimizing image delivery can find practical AVIF fallback patterns like this on daily.dev._ ### How much smaller are AVIF images compared to PNG at similar visual quality? PNG file size can be reduced by up to 5 times when converted to AVIF without a noticeable loss of visual quality. A quality setting between 65 and 75 is used for encoding, adjusted depending on the specific image and its intended purpose. _Anyone weighing image format tradeoffs for performance can track results like this on daily.dev._ ## Similar posts on daily.dev - [Switching my website images from WebP to AVIF](https://daily.dev/posts/switching-my-website-images-from-webp-to-avif-cxnwiilat) · Blogging and all that Malarkey · 18 upvotes · 5 comments - [Serving AVIF, Working in JPG: A Developer's Guide to Living Between Image Formats](https://daily.dev/posts/serving-avif-working-in-jpg-a-developer-s-guide-to-living-between-image-formats-c4rct7c3y) · SitePoint · 8 upvotes · 0 comments - [I thought AVIF would make every image smaller. It didn’t.](https://daily.dev/posts/i-thought-avif-would-make-every-image-smaller-it-didn-t--dbb3vg3by) · Blogging and all that Malarkey · 9 upvotes · 4 comments - [Image formats: Codecs and compression tools](https://daily.dev/posts/image-formats-codecs-and-compression-tools-cfsurcohv) · MDN Blog · 2 upvotes · 0 comments - [Issue \#624 – CSS Weekly](https://daily.dev/posts/issue-624-css-weekly-zs3kdhkbd) · CSS Weekly · 3 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#html](https://daily.dev/tags/html) [View this post on daily.dev](https://daily.dev/posts/failure-of-the-week-encoding-images-to-avif-without-keeping-the-originals-dyeddgd2n) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Failure of the week: encoding images to AVIF without keeping the originals","url":"https://daily.dev/posts/failure-of-the-week-encoding-images-to-avif-without-keeping-the-originals-dyeddgd2n","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/failure-of-the-week-encoding-images-to-avif-without-keeping-the-originals-dyeddgd2n"},"datePublished":"2026-08-14T08:20:34.319Z","dateModified":"2026-09-14T06:17:11.610Z","description":"A personal anecdote warns against converting website images to AVIF and deleting the original files, since this removes the ability to serve fallbacks. The...","image":"https://media.daily.dev/image/upload/s--2-1xRawN--/f_auto/v1722860399/public/Placeholder%2011","thumbnailUrl":"https://media.daily.dev/image/upload/s--2-1xRawN--/f_auto/v1722860399/public/Placeholder%2011","isAccessibleForFree":true,"articleSection":"Sylvain Kerkour","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Sylvain Kerkour","logo":"https://media.daily.dev/image/upload/s--3ngWt4Yp--/f_auto,q_auto/v1786438308/logos/kerkour?_a=BAMAMicg0","url":"https://daily.dev/sources/kerkour"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/failure-of-the-week-encoding-images-to-avif-without-keeping-the-originals-dyeddgd2n","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,html","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sylvain Kerkour","item":"https://daily.dev/sources/kerkour"},{"@type":"ListItem","position":3,"name":"Failure of the week: encoding images to AVIF without keeping the originals"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/failure-of-the-week-encoding-images-to-avif-without-keeping-the-originals-dyeddgd2n#faq","mainEntity":[{"@type":"Question","name":"Why should I keep the original PNG or JPEG files when converting images to AVIF for my website?","acceptedAnswer":{"@type":"Answer","text":"Not all browsers support AVIF, so deleting the originals breaks image display for unsupported browsers. The fix is to use the HTML5 picture element with a source tag pointing to the AVIF file and type image/avif, followed by an img tag with the original PNG or JPEG as a fallback, letting each browser pick the format it supports. Developers optimizing image delivery can find practical AVIF fallback patterns like this on daily.dev."}},{"@type":"Question","name":"How much smaller are AVIF images compared to PNG at similar visual quality?","acceptedAnswer":{"@type":"Answer","text":"PNG file size can be reduced by up to 5 times when converted to AVIF without a noticeable loss of visual quality. A quality setting between 65 and 75 is used for encoding, adjusted depending on the specific image and its intended purpose. Anyone weighing image format tradeoffs for performance can track results like this on daily.dev."}}]} ```