--- title: AVIF, WebP, JPEG, or PNG: choosing the right image format description: Browser support for AVIF and WebP is now universal as of 2026, shifting the decision to content type, encoding cost, and pipeline constraints. AVIF excels for... canonical: https://daily.dev/posts/avif-webp-jpeg-or-png-choosing-the-right-image-format-vm74uszfr twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: AVIF, WebP, JPEG, or PNG: choosing the right image format | daily.dev og:description: Browser support for AVIF and WebP is now universal as of 2026, shifting the decision to content type, encoding cost, and pipeline constraints. AVIF excels for... og:url: https://daily.dev/posts/avif-webp-jpeg-or-png-choosing-the-right-image-format-vm74uszfr og:image: https://api.daily.dev/og/posts/VM74uszFr.png og:image:alt: AVIF, WebP, JPEG, or PNG: choosing the right image format 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. # AVIF, WebP, JPEG, or PNG: choosing the right image format **[Stian Larsen](https://daily.dev/sources/tkuthrn35xptvakxuly27)** · [@stianlarsen](https://daily.dev/stianlarsen) · 5 min read · 0 upvotes · 0 comments ## Summary Browser support for AVIF and WebP is now universal as of 2026, shifting the decision to content type, encoding cost, and pipeline constraints. AVIF excels for photographs at tight byte budgets (20–50% smaller than WebP), while WebP lossless is more reliable for screenshots and UI graphics. AVIF encoding is significantly slower, making WebP more pragmatic for on-the-fly or user-upload pipelines. JPEG remains relevant for email attachments, non-browser software compatibility, and progressive rendering. A practical decision framework: use AVIF for photos with a JPEG/WebP fallback, WebP lossless for graphics, and always measure real images rather than relying on general rules. ## Content For years the AVIF-versus-WebP question was really a browser-support question, and WebP won by default. That era is over: as of 2026, current versions of Chrome, Firefox, Safari, and Edge all decode both formats. WebP has been safe everywhere since roughly 2020; AVIF closed its last major gap when Edge added support in early 2024. With support settled, the choice comes down to what the image contains, how it is produced, and how much encode time you can afford. Neither format wins across the board. ## Where each format comes from WebP derives from the VP8 video codec and shipped in 2010; it offers lossy and lossless modes, alpha transparency, and animation. AVIF derives from the newer AV1 codec and reached browsers a decade later; it also covers lossy, lossless, alpha, and animation, and adds wide color gamut and HDR support that WebP lacks. Newer codec generally means better compression - and higher encoding cost. Both of those follow directly from AV1 being a more thorough, slower search for redundancy. ## Quality per byte, by content type - **Photographs at small-to-medium sizes: AVIF.** This is AVIF's strongest case. At tight byte budgets it holds detail and avoids the blocky artifacts older codecs show, and it commonly lands 20-50% smaller than a comparable WebP. If your images are photos and you can serve AVIF, serve AVIF. - **Screenshots, UI graphics, flat illustrations: WebP, often lossless.** WebP's lossless mode is mature and consistently beats PNG. AVIF's advantage on this content is smaller and less predictable, and hard-edged graphics can come out softer in lossy AVIF. - **Images with transparency: either.** Both handle alpha well; the photographic-versus-graphic rule above still decides it. - **Very high fidelity requirements: test both.** At near-transparent quality settings the gap between the formats narrows, and AVIF's low-bitrate strengths matter less. Compare real files rather than assuming. - **Animation: measure, don't assume.** Animated AVIF can be much smaller than animated WebP, but encode times are long and tooling is thinner. For short clips, a real video element often beats both. ## The cost nobody puts on the marketing page AVIF encoding is slow - typically several times slower than WebP, sometimes more at high effort settings. That cost lands differently depending on your pipeline: - **Build-time or one-off conversion:** the cost is irrelevant. You encode once and serve forever. Use AVIF freely. - **On-the-fly image services:** encode time is latency or server money. Many services cache aggressively precisely because of AVIF's cost. - **User uploads at scale:** slower encodes mean more compute per upload. WebP may be the pragmatic default. Decoding is a smaller concern - modern devices handle both formats without user-visible trouble - but AVIF decode is also somewhat heavier, which is worth remembering for image-dense pages on low-end hardware. ## When JPEG still wins It is 2026 and JPEG is still not obsolete, for unglamorous reasons: - **It opens everywhere.** Decades-old software, embedded systems, email clients, office suites, kiosk hardware. WebP support outside browsers is good; AVIF support outside browsers is still uneven. - **Progressive rendering.** A progressive JPEG shows a usable low-detail preview while loading. Neither WebP nor AVIF has an equivalent that browsers render as well. - **Encode speed and tooling.** Every tool ever written can produce a JPEG, instantly. If a photograph must be attached to an email, imported into arbitrary software, or archived for an unknown future consumer, JPEG remains the defensible choice. Compress it well - our [JPEG compressor](/compress/jpeg) targets the point where extra bytes stop buying visible quality - and move on. ## Summary table | Criterion | AVIF | WebP | | ------------------------- | ---------------------- | ---------------------- | | Browser support (2026) | Universal, since ~2024 | Universal, since ~2020 | | Photos at tight budgets | Best in class | Good | | Screenshots / UI graphics | Unpredictable gains | Strong, esp. lossless | | Transparency | Yes | Yes | | HDR / wide gamut | Yes | No | | Encode speed | Slow | Fast | | Support outside browsers | Uneven | Good | ## A practical default 1. Photographic content: encode AVIF; keep a JPEG or WebP fallback if you serve non-browser consumers. The `picture` element handles the negotiation - see the fallback pattern in our [format guide](/blog/what-is-compression). 2. Screenshots and graphics: WebP, lossless where text sharpness matters. 3. Unsure: convert a handful of your real images both ways - [PNG to AVIF](/convert/png-to-avif), [PNG to WebP](/convert/png-to-webp), [JPEG to AVIF](/convert/jpg-to-avif), [JPEG to WebP](/convert/jpg-to-webp) - and compare bytes and appearance at 100% zoom. Ten minutes of measurement beats any general-purpose advice, including this article's. Whichever you pick, compress the result properly: the gap between a well-encoded WebP and a poorly-encoded AVIF is smaller than the gap between compressed and uncompressed anything. Both formats are handled by our [compressor](/compress), free, with files deleted after two hours. ## 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 guess I'm using WebP now?](https://daily.dev/posts/i-guess-i-m-using-webp-now--rgsorjs7s) · Hacker News · 12 upvotes · 7 comments - [The present and potential future of progressive image rendering](https://daily.dev/posts/the-present-and-potential-future-of-progressive-image-rendering-x30vnz4xu) · Jake Archibald · 2 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev) [View this post on daily.dev](https://daily.dev/posts/avif-webp-jpeg-or-png-choosing-the-right-image-format-vm74uszfr) ```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":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/avif-webp-jpeg-or-png-choosing-the-right-image-format-vm74uszfr","headline":"AVIF, WebP, JPEG, or PNG: choosing the right image format","text":"Browser support for AVIF and WebP is now universal as of 2026, shifting the decision to content type, encoding cost, and pipeline constraints. AVIF excels for photographs at tight byte budgets (20–50% smaller than WebP), while WebP lossless is more reliable for screenshots and UI graphics. AVIF encoding is significantly slower, making WebP more pragmatic for on-the-fly or user-upload pipelines. JPEG remains relevant for email attachments, non-browser software compatibility, and progressive rendering. A practical decision framework: use AVIF for photos with a JPEG/WebP fallback, WebP lossless for graphics, and always measure real images rather than relying on general rules.","url":"https://daily.dev/posts/avif-webp-jpeg-or-png-choosing-the-right-image-format-vm74uszfr","datePublished":"2026-07-25T10:57:17.913Z","dateModified":"2026-07-25T10:58:31.464Z","author":{"@type":"Person","name":"Stian Larsen","url":"https://daily.dev/stianlarsen","image":"https://avatars.githubusercontent.com/u/71408982?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":160}},"image":"https://media.daily.dev/image/upload/s--0LQPZPkj--/f_auto/v1784977038/posts/VM74uszFr?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/tkuthrn35xptvakxuly27","name":"Stian Larsen"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Stian Larsen","item":"https://daily.dev/sources/tkuthrn35xptvakxuly27"},{"@type":"ListItem","position":3,"name":"AVIF, WebP, JPEG, or PNG: choosing the right image format"}]} ```