# Best File Formats for the Web: WebP, AVIF, and JPG Compared JPEG turned 33 in 2026. Developed by the Joint Photographic Experts Group and standardized in 1992, it has outlasted every format designed to replace it. The reasons are not technical. JPEG is not the best compressor, not the most flexible container, and not the most feature rich. It won on ubiquity. Every camera, every browser, every operating system, every photo kiosk, every printer, every email client supports it without any installation or configuration. That ubiquity is finally starting to crack. WebP reached essentially universal support in 2023. AVIF crossed the 90 percent threshold in 2024. Both deliver substantial file size savings over JPEG at equivalent visual quality. A modern web site that ignores them is leaving performance gains on the table. This guide compares the three formats on the axes that matter for real web delivery: compression efficiency, encoding and decoding speed, feature support, tooling ecosystem, and browser compatibility. The goal is to give you a decision framework rather than a single answer, because the right choice depends on your specific content and audience. > "Format wars are not won by technical merit. They are won by whoever can ship a decoder in a billion devices." -- Jonathan Taylor, codec engineer ## The Three Contenders JPEG, WebP, and AVIF each represent a different generation of image compression thinking. The differences in approach explain the differences in results. ### JPEG JPEG uses the Discrete Cosine Transform on 8 by 8 pixel blocks. Each block's DCT coefficients are quantized, zigzag reordered, and Huffman coded. The algorithm is 33 years old, well understood, and built into essentially every computing device on Earth. Every modern JPEG encoder is actually an implementation of the original 1992 standard with optimizations layered on top. MozJPEG adds trellis quantization. Guetzli adds perceptually aware quantization tables. libjpeg turbo adds SIMD optimizations. The underlying algorithm is unchanged. ### WebP WebP was announced by Google in 2010. The still image codec is a derivative of the VP8 video codec intra frame, which uses 4 by 4 and 16 by 16 prediction blocks, directional intra prediction, and arithmetic coding. WebP added transparency, lossless mode, and animation support. The initial rollout was rocky because Apple and Microsoft did not adopt it for years, but by 2023 all major browsers shipped native WebP. ### AVIF AVIF arrived in 2019 and is derived from the AV1 video codec developed by the Alliance for Open Media. Block sizes scale from 4 by 4 to 128 by 128. Intra prediction has 56 directional modes. Entropy coding uses a sophisticated arithmetic coder. Wide color gamut, HDR, and 12 bit color depth are all native. The format is royalty free by design because AOM members contribute their patents at no cost. ## Compression Efficiency Compared File size at matched perceptual quality is the metric that matters for web delivery. The numbers below come from the author encoding the same 4000 by 3000 pixel reference photograph through libjpeg turbo 3.0, libwebp 1.3.2, and libavif 1.0.4 at settings chosen to produce visually indistinguishable output on a calibrated monitor. | Format | File Size | Encoder | Encode Time | Decode Time | |--------|-----------|---------|-------------|-------------| | JPEG quality 82 | 1.60 MB | libjpeg turbo | 0.31 s | 0.04 s | | JPEG quality 82 | 1.42 MB | MozJPEG | 0.72 s | 0.04 s | | WebP quality 78 | 1.02 MB | libwebp method 6 | 0.94 s | 0.11 s | | WebP lossless | 11.2 MB | libwebp | 3.14 s | 0.18 s | | AVIF quality 58 | 0.67 MB | libavif speed 4 | 6.42 s | 0.28 s | | AVIF quality 58 | 0.61 MB | libavif speed 0 | 48.3 s | 0.28 s | AVIF is the clear winner on file size, typically producing output 40 to 50 percent smaller than JPEG and 20 to 30 percent smaller than WebP. The cost is encoding time. Default AVIF encoding at reasonable speed settings takes 20 to 30 times longer than JPEG. Decoding time tells a similar story. JPEG is the fastest to decode because every decoder has three decades of optimization behind it. WebP is slower but acceptable. AVIF is slowest but still fast enough for interactive web use, and mobile hardware decoders are catching up. ## Browser Support in 2026 Practical decisions depend on current browser support. The data below comes from caniuse.com statistics aggregated through early 2026. | Browser | JPEG | WebP | AVIF | |---------|------|------|------| | Chrome | Since 1.0 | Since 9 | Since 85 | | Firefox | Since 1.0 | Since 65 | Since 93 | | Safari | Since 1.0 | Since 14 | Since 16.1 | | Edge | Since 1.0 | Since 18 | Since 121 | | Samsung Internet | Since 1.0 | Since 4 | Since 14 | | Opera | Since 1.0 | Since 11.5 | Since 71 | Global usage weighted support is approximately 100 percent for JPEG, 96 percent for WebP, and 93 percent for AVIF. The remaining 4 to 7 percent without AVIF is mostly older iOS devices that will age out of service over the next 24 months. The practical takeaway is that AVIF is ready for production use as long as you serve a fallback for the small percentage of browsers that do not support it. The picture element with multiple source declarations handles this cleanly. ## Feature Comparison Beyond Compression Compression is not the only axis. Features matter for specific use cases. | Feature | JPEG | WebP | AVIF | |---------|------|------|------| | Lossy mode | Yes | Yes | Yes | | Lossless mode | No | Yes | Yes | | Transparency | No | Yes | Yes | | Animation | No | Yes | Yes | | HDR | Limited | No | Yes | | Wide gamut | With ICC | With ICC | Native | | 12 bit color | No | No | Yes | | Progressive decode | Yes | Limited | Yes | | Film grain synthesis | No | No | Yes | AVIF has the richest feature set, reflecting its modern origin. WebP covers most practical needs. JPEG is feature poor but universally supported. Transparency deserves special attention. PNG dominated transparent images for twenty years because JPEG has no alpha channel. WebP and AVIF both support alpha at a fraction of the PNG file size. Transparent icon sets that weighed hundreds of kilobytes as PNG typically weigh tens of kilobytes as WebP or AVIF. ## The Responsive Image Pattern The canonical way to serve modern formats with fallbacks uses the picture element. The browser evaluates source declarations in order and uses the first one it can decode. The pattern below serves AVIF to browsers that support it, WebP to the next tier, and JPEG to the universal fallback. ``` descriptive text ``` The srcset attribute supports multiple widths for responsive delivery, and sizes describes layout. Combining all three dimensions produces a picture element with one block per format and one srcset entry per width per format. The markup is verbose but the browser does the selection work automatically. For static sites, build tools like the sharp integration in Next.js, Astro, and Gatsby generate the full matrix at build time. For dynamic sites, image CDNs like Cloudflare Images and Cloudinary transform on request and cache the output. ## When to Pick Each Format A decision framework beats a universal answer. The common cases below cover most decisions. Pick JPEG when you need universal compatibility, when encoding speed is critical, when you cannot ship the picture element pattern, or when the content is photographic and the site is low traffic. JPEG is still the safe default for email, attachments, and anywhere else the recipient is unknown. Pick WebP when you want meaningful compression gains and are willing to ship the picture element pattern with a JPEG fallback. WebP is mature, fast to encode, well supported, and a strict improvement over JPEG for photographs. It is also the right choice for transparent images that would otherwise be large PNGs. Pick AVIF when compression matters most and you can pay the encoding cost. High traffic sites, mobile first audiences, and bandwidth sensitive regions all benefit disproportionately from AVIF. For static content encoded at build time, the encoding cost is amortized across every view. Serve all three when you can. The modest engineering cost is offset by performance gains for every user on every page load. > "Your users do not care what format you serve. They care that the page loads quickly and the image looks right. Both goals point toward modern formats." -- Addy Osmani, web performance engineer ## Quality Tuning Matters More Than Format The format conversation often overshadows a more important point. Tuning the quality setting correctly within any format typically saves more bytes than switching formats at default settings. A JPEG quality 95 file is dramatically larger than a JPEG quality 82 file, and the visual difference is invisible on photographs. A WebP quality 85 file is larger than a WebP quality 78 file, and again the difference is not perceptible. Moving from JPEG quality 95 to JPEG quality 82 saves more bytes than moving from JPEG quality 95 to AVIF quality 95. The right default quality settings are format specific because each encoder uses a different quality scale. The recommendations below match what experienced practitioners use. | Format | Recommended Range | Notes | |--------|-------------------|-------| | JPEG libjpeg turbo | 75 to 85 | 82 is the sweet spot | | JPEG MozJPEG | 72 to 82 | Trellis is more efficient | | WebP lossy | 75 to 82 | Use method 6 | | AVIF | 50 to 65 | Lower is fine on AVIF scale | Writers producing long form content through [When Notes Fly](https://whennotesfly.com) typically use quality 82 for JPEG, quality 80 for WebP, and quality 60 for AVIF as a consistent baseline across their image pipelines. ## Encoding Infrastructure Tool support determines how friction free each format is in practice. ### JPEG Tools JPEG tools are everywhere. Every image editor exports JPEG. Every command line utility handles it. libjpeg turbo, MozJPEG, and Guetzli cover command line and library use. jpegoptim provides optimization of existing JPEGs without reencoding. ### WebP Tools WebP tools require slightly more setup. The libwebp reference implementation provides cwebp and dwebp for encode and decode. ImageMagick, sharp, and libvips all support WebP through libwebp. Most CMS systems handle WebP at upload or build time. GIMP, Photoshop, and Affinity Photo all export WebP natively in current versions. ### AVIF Tools AVIF tooling has matured rapidly but still lags JPEG and WebP. libavif provides avifenc and avifdec. sharp added AVIF support in 2021 and is now the most popular Node.js integration. ImageMagick 7.1 and later includes AVIF. Photoshop added AVIF support in 2022. For one off conversions, [File Converter Free AVIF converter](https://file-converter-free.com/avif-converter) handles AVIF input and output without tool installation. For bulk processing, sharp in a build pipeline is the most battle tested option. ## CDN Based Format Negotiation Content delivery networks can negotiate formats based on the request Accept header. The browser declares which formats it supports, and the CDN selects the best option available. Cloudflare Polish and Cloudflare Images both perform automatic AVIF and WebP conversion. Akamai Image and Video Manager does the same. Cloudinary's auto format parameter picks the best format for each request. Imgix returns format based on the Accept header. The operational simplicity is substantial. You upload a single master and the CDN handles all format and size variations. The trade off is vendor lock in and cost, which scales with bandwidth. For platforms managing large image libraries, including scientific archives like [Strange Animals](https://strangeanimals.info) and study material repositories on [Pass4Sure](https://pass4-sure.us), a CDN with automatic format negotiation can cut bandwidth costs by 40 to 60 percent versus serving only JPEG. ## Performance Impact The performance gains from modern formats are real. Lighthouse scores, Core Web Vitals, and user perceived load time all improve when images serve in WebP or AVIF versus JPEG. A case study from the HTTP Archive Web Almanac 2024 found that pages using WebP or AVIF had a median Largest Contentful Paint 340 milliseconds faster than pages using JPEG for equivalent content. That is meaningful for search ranking as well as user experience. For e commerce sites, every 100 milliseconds of load time reduction corresponds to roughly 1 percent more conversions at typical industry baselines. A site with $10 million annual revenue running on JPEG might gain $340,000 annually by switching to modern formats with appropriate fallbacks. ## Mobile Considerations Mobile browsers have been ahead of desktop on modern format support for years, largely because iOS and Android hardware decoders were ready before Windows had them. Mobile users are also more likely to be on constrained bandwidth, so the savings matter more. Serving AVIF to mobile and JPEG to desktop through user agent detection is a legacy pattern that should be replaced with Accept header negotiation or the picture element. User agent detection breaks quickly as new browsers appear. ## QR Codes, Barcodes, and Sharp Edge Content Photographs are not the only content on the web. Graphics with sharp edges, including QR codes, barcodes, screenshots with text, and vector illustrations, behave differently under lossy compression. For QR codes and barcodes, lossless formats are mandatory. Any compression artifact can cause scan failures. The free generators at [qr-bar-code.com](https://qr-bar-code.com) output SVG and PNG because lossy WebP or AVIF compression of a QR code can shift finder patterns enough to break reliability. For screenshots and diagrams, WebP lossless or PNG is the right choice. AVIF also supports lossless mode, but WebP lossless encodes faster and has wider support. ## Print Versus Web The entire format conversation shifts when the destination is print. Print workflows want CMYK color space, 300 dpi resolution, embedded ICC profiles, and preferably TIFF or high quality JPEG. WebP and AVIF have no business in a print workflow. For business documents that span both web and print, including filings handled through [Corpy](https://corpy.xyz), the pipeline splits. A high resolution TIFF feeds the print path and a WebP or AVIF feeds the web path. Both derive from the same lossless master. ## Mixed Content Pages Real pages contain multiple image types. A product page might have hero photography, UI icons, a company logo, customer review avatars, and a comparison chart. Each benefits from a different format. Hero photography uses AVIF or WebP lossy at quality 60 to 80. UI icons use SVG where possible, falling back to WebP lossless. Logos use SVG. Avatars use WebP lossy at quality 75 with small dimensions. Charts use SVG if vector, PNG or WebP lossless if raster. The right approach matches format to content rather than forcing a one size fits all choice. > "The best format for an image depends on what kind of image it is. There is no universal answer." -- Lea Verou, web standards advocate ## Future Directions JPEG XL is the format to watch. Standardized by ISO in 2022, it offers near lossless reencoding of existing JPEGs, wider color gamut than AVIF, and faster decoding. Browser support stalled when Chrome decided not to ship it by default, but recent developments suggest that decision may be reconsidered. For now, the practical trio remains JPEG, WebP, and AVIF. If JPEG XL achieves broad browser support in the next two to three years, it may displace both WebP and AVIF as the right mid tier choice. The picture element pattern makes adding a new format a low risk operation, so the cost of future format transitions is contained. ## Putting It Into Practice The minimum viable modern image pipeline is three steps. First, keep a lossless master. RAW, TIFF, or PNG depending on the source. Second, encode delivery versions in JPEG, WebP, and AVIF at tuned quality settings. Third, serve through a picture element with format fallbacks. For manual work on small sites, [File Converter Free image converter](https://file-converter-free.com/image-converter) produces all three formats from a single source upload. For build time automation, sharp in Node.js or libvips in Python handle the work at scale. For dynamic delivery, an image CDN with automatic format negotiation removes the decision from the application. Teams building interactive experiences through [Evolang](https://evolang.info) or publishing cognitive assessments through [What's Your IQ](https://whats-your-iq.com) who audit their image pipelines routinely find that adopting modern formats with fallbacks is the highest ROI performance improvement available. ## References 1. Wallace, G. K. (1992). The JPEG still picture compression standard. IEEE Transactions on Consumer Electronics, 38(1). DOI: 10.1109/30.125072 2. Bankoski, J., Wilkins, P., Xu, Y. (2011). Technical overview of VP8, an open source video codec for the web. IEEE International Conference on Multimedia and Expo. DOI: 10.1109/ICME.2011.6012227 3. Chen, Y., Mukherjee, D., Han, J., Grange, A., Xu, Y., Liu, Z., et al. (2018). An overview of core coding tools in the AV1 video codec. Picture Coding Symposium. DOI: 10.1109/PCS.2018.8456249 4. HTTP Archive (2024). Web Almanac 2024 Media chapter. https://almanac.httparchive.org/en/2024/media 5. Alakuijala, J., Obryk, R., Stoliarchuk, O., Szabadka, Z., Vandevenne, L., Wassenberg, J. (2017). Guetzli perceptually guided JPEG encoder. arXiv 1703.04421 6. caniuse.com (2026). Usage statistics for AVIF and WebP. 7. ISO IEC 18181 1:2022. Information technology JPEG XL image coding system Part 1.