{"course":{"slug":"image-editing","title":"Editing an Image","url":"https://addaly.com/learn/image-editing","level":"beginner","track":"create"},"lesson":{"slug":"webp-avif-and-jpeg-xl","title":"The formats that replaced JPEG, and the one that might","url":"https://addaly.com/learn/image-editing/webp-avif-and-jpeg-xl","position":73,"of":78,"minutes":10,"answer":"WebP and AVIF are smaller than JPEG because they use variable block sizes and intra prediction borrowed from video codecs, AVIF's characteristic failure is smoothing texture rather than blocking it.","keyIdea":"WebP and AVIF are smaller than JPEG because they use variable block sizes and intra prediction borrowed from video codecs, AVIF's characteristic failure is smoothing texture rather than blocking it, JPEG XL can losslessly shrink existing JPEGs but its browser support is genuinely unresolved, and quality numbers never transfer between encoders."},"body":{"format":"markdown","text":"## Why the newer formats are smaller\n\nJPEG splits an image into fixed 8x8 blocks and transforms each one independently. That was a sensible design in 1992 and it leaves a great deal on the table.\n\n**WebP** and **AVIF** are both built from video codecs (VP8 and AV1 respectively) and they bring the tricks video encoders use inside a single frame. The important ones:\n\n- **Variable block sizes.** A flat sky is described with a few large blocks; a face gets small ones. JPEG spends the same 8x8 grid on both.\n- **Intra prediction.** Before transforming a block, the encoder predicts it from the pixels already decoded above and to the left, in one of several directions, and only stores the difference. On a gradient or a smooth surface the difference is nearly nothing.\n- **Better entropy coding.** Arithmetic coding rather than JPEG's Huffman tables, which is a few more per cent for free.\n\nThe practical result at matched visual quality: WebP is typically 25 to 34 per cent smaller than JPEG, AVIF another 20 to 30 per cent smaller than WebP, with the gap widening at low bitrates and narrowing at high ones.\n\n## What each one is good and bad at\n\n**WebP.** Lossy and lossless in one format, alpha in both, animation. Supported by every current browser since 2020 and by most tooling. Its lossy mode inherits VP8's chroma handling and is always 4:2:0, so saturated red edges suffer the same fringing as JPEG. Its lossless mode is good on graphics and often beats PNG by 20 to 30 per cent.\n\n**AVIF.** The best compression of the three at web sizes, real 10- and 12-bit support, alpha, wide gamut and HDR, animation. Two costs. Encoding is slow (seconds per image at high effort settings rather than milliseconds) and at aggressive settings it **smooths** rather than blocks. That is a more insidious failure than JPEG's: fine grain, distant foliage and fabric weave quietly become flat, and the image looks clean rather than damaged. Always check a texture-heavy region at 100 per cent before committing a whole catalogue to AVIF.\n\n**JPEG XL.** Technically the most interesting of the three. It can **losslessly transcode an existing JPEG** to roughly 80 per cent of its size, and turn it back byte-for-byte, so an archive of a million JPEGs can shrink by a fifth with nothing lost and nothing re-encoded. It supports progressive decoding properly, high bit depths and very high quality at low cost.\n\nAnd its browser support is unsettled. Safari ships it. Chrome implemented it, removed it in 2023, and the argument about whether to restore it has run ever since; Firefox has kept it behind a flag. Any confident statement about where this lands is a guess. Check the current state before you rely on it, and do not build a delivery pipeline whose only output is JPEG XL today.\n\n## Encoder settings that matter\n\n```bash\ncwebp -q 78 -m 6 in.png -o out.webp\navifenc --min 0 --max 63 -a end-usage=q -a cq-level=28 -s 4 in.png out.avif\ncjxl in.jpg out.jxl # lossless transcode of an existing JPEG\n```\n\nTwo things to understand in there.\n\n**Effort or speed settings are not quality settings.** `-m 6` in cwebp and `-s 4` in avifenc tell the encoder to search harder for a better encoding. Higher effort means a smaller file at the *same* quality, paid for in seconds. For a one-off hero image, use the slowest setting. For 5000 thumbnails, do not.\n\n**Quality numbers do not transfer between formats.** WebP 78 is not AVIF 78 is not JPEG 78. Each encoder has its own scale: AVIF's `cq-level` even runs the other way, lower being better. The only way across is a perceptual measurement or your own eyes, which is the previous lesson.\n\n## Delivering more than one format\n\nYou do not have to choose one. The `` element lets the browser take the first source it understands:\n\n```html\n\n \n \n \"...\"\n\n```\n\nThe JPEG stays as the floor. Anything that does not understand the newer types (an old email client, a scraper, somebody's image-saving script) still gets a file that works.\n\n## Where the old formats are still right\n\n- **Anything a stranger will download and open in unknown software.** A JPEG opens everywhere, including on a fifteen-year-old machine in an office you will never see.\n- **Print delivery.** A lab or a press wants TIFF or JPEG. Sending AVIF to a print shop will get you a phone call.\n- **Editable archives.** None of these are working formats. Keep the layered master.\n- **Email.** Support across mail clients is far patchier than across browsers, and some gateways re-encode anyway.\n\nToday: take one photograph with visible grain or foliage, export it as JPEG at your usual setting, then as WebP and AVIF at file sizes 30 per cent smaller, and compare the textured area at 100 per cent. You are looking for whether the AVIF has kept the grain or quietly painted over it."},"check":{"question":"An editor converts a catalogue of tweed jacket photographs to AVIF at an aggressive setting and reports that they look cleaner than the JPEGs. A buyer later complains the fabric looks like felt. What happened?","options":[{"text":"AVIF's alpha channel was discarded during conversion, flattening the shadow detail that gave the fabric its depth.","correct":false,"tempting":"Invokes a channel that a photograph on an opaque background does not have and that would not affect surface texture."},{"text":"The AVIF encoder ran at a low effort setting, and effort settings trade file size for detail retention.","correct":false,"tempting":"Misreads effort as a quality control: lower effort costs bytes at the same quality, not detail."},{"text":"At low bitrates AVIF smooths fine texture rather than blocking it, so lost weave reads as clean.","correct":true},{"text":"AVIF uses 4:2:0 chroma subsampling, which removes the colour variation that makes tweed read as woven.","correct":false,"tempting":"Attributes a luminance-detail loss to colour subsampling, which would show on saturated edges rather than on grey weave."}]},"prev":{"slug":"choosing-quality-by-measurement","title":"Stop guessing the quality slider","url":"https://addaly.com/learn/image-editing/choosing-quality-by-measurement"},"next":{"slug":"when-the-image-has-to-move","title":"GIF is a 1987 format and you are probably still exporting one","url":"https://addaly.com/learn/image-editing/when-the-image-has-to-move"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'The formats that replaced JPEG, and the one that might', in Editing an Image. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/image-editing/webp-avif-and-jpeg-xl (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"The formats that replaced JPEG, and the one that might","courseTitle":"Editing an Image","module":{"index":8,"slug":"out-of-the-editor","title":"Out of the editor: size, sharpness and the delivered file"},"answer":null,"keyIdea":"WebP and AVIF are smaller than JPEG because they use variable block sizes and intra prediction borrowed from video codecs, AVIF’s characteristic failure is smoothing texture rather than blocking it, JPEG XL can losslessly shrink existing JPEGs but its browser support is genuinely unresolved, and quality numbers never transfer between encoders.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"why-the-newer-formats-are-smaller","runs":[{"text":"Why the newer formats are smaller"}]},{"t":"p","runs":[{"text":"JPEG splits an image into fixed 8x8 blocks and transforms each one independently. That was a sensible design in 1992 and it leaves a great deal on the table."}]},{"t":"p","runs":[{"text":"WebP","b":true},{"text":" and "},{"text":"AVIF","b":true},{"text":" are both built from video codecs (VP8 and AV1 respectively) and they bring the tricks video encoders use inside a single frame. The important ones:"}]},{"t":"ul","items":[[{"text":"Variable block sizes.","b":true},{"text":" A flat sky is described with a few large blocks; a face gets small ones. JPEG spends the same 8x8 grid on both."}],[{"text":"Intra prediction.","b":true},{"text":" Before transforming a block, the encoder predicts it from the pixels already decoded above and to the left, in one of several directions, and only stores the difference. On a gradient or a smooth surface the difference is nearly nothing."}],[{"text":"Better entropy coding.","b":true},{"text":" Arithmetic coding rather than JPEG’s Huffman tables, which is a few more per cent for free."}]]},{"t":"p","runs":[{"text":"The practical result at matched visual quality: WebP is typically 25 to 34 per cent smaller than JPEG, AVIF another 20 to 30 per cent smaller than WebP, with the gap widening at low bitrates and narrowing at high ones."}]},{"t":"h2","id":"what-each-one-is-good-and-bad-at","runs":[{"text":"What each one is good and bad at"}]},{"t":"p","runs":[{"text":"WebP.","b":true},{"text":" Lossy and lossless in one format, alpha in both, animation. Supported by every current browser since 2020 and by most tooling. Its lossy mode inherits VP8’s chroma handling and is always 4:2:0, so saturated red edges suffer the same fringing as JPEG. Its lossless mode is good on graphics and often beats PNG by 20 to 30 per cent."}]},{"t":"p","runs":[{"text":"AVIF.","b":true},{"text":" The best compression of the three at web sizes, real 10- and 12-bit support, alpha, wide gamut and HDR, animation. Two costs. Encoding is slow (seconds per image at high effort settings rather than milliseconds) and at aggressive settings it "},{"text":"smooths","b":true},{"text":" rather than blocks. That is a more insidious failure than JPEG’s: fine grain, distant foliage and fabric weave quietly become flat, and the image looks clean rather than damaged. Always check a texture-heavy region at 100 per cent before committing a whole catalogue to AVIF."}]},{"t":"p","runs":[{"text":"JPEG XL.","b":true},{"text":" Technically the most interesting of the three. It can "},{"text":"losslessly transcode an existing JPEG","b":true},{"text":" to roughly 80 per cent of its size, and turn it back byte-for-byte, so an archive of a million JPEGs can shrink by a fifth with nothing lost and nothing re-encoded. It supports progressive decoding properly, high bit depths and very high quality at low cost."}]},{"t":"p","runs":[{"text":"And its browser support is unsettled. Safari ships it. Chrome implemented it, removed it in 2023, and the argument about whether to restore it has run ever since; Firefox has kept it behind a flag. Any confident statement about where this lands is a guess. Check the current state before you rely on it, and do not build a delivery pipeline whose only output is JPEG XL today."}]},{"t":"h2","id":"encoder-settings-that-matter","runs":[{"text":"Encoder settings that matter"}]},{"t":"code","lang":"bash","label":"Bash","text":"cwebp -q 78 -m 6 in.png -o out.webp\navifenc --min 0 --max 63 -a end-usage=q -a cq-level=28 -s 4 in.png out.avif\ncjxl in.jpg out.jxl # lossless transcode of an existing JPEG"},{"t":"p","runs":[{"text":"Two things to understand in there."}]},{"t":"p","runs":[{"text":"Effort or speed settings are not quality settings.","b":true},{"text":" "},{"text":"-m 6","code":true},{"text":" in cwebp and "},{"text":"-s 4","code":true},{"text":" in avifenc tell the encoder to search harder for a better encoding. Higher effort means a smaller file at the "},{"text":"same","i":true},{"text":" quality, paid for in seconds. For a one-off hero image, use the slowest setting. For 5000 thumbnails, do not."}]},{"t":"p","runs":[{"text":"Quality numbers do not transfer between formats.","b":true},{"text":" WebP 78 is not AVIF 78 is not JPEG 78. Each encoder has its own scale: AVIF’s "},{"text":"cq-level","code":true},{"text":" even runs the other way, lower being better. The only way across is a perceptual measurement or your own eyes, which is the previous lesson."}]},{"t":"h2","id":"delivering-more-than-one-format","runs":[{"text":"Delivering more than one format"}]},{"t":"p","runs":[{"text":"You do not have to choose one. The "},{"text":"","code":true},{"text":" element lets the browser take the first source it understands:"}]},{"t":"code","lang":"html","label":"HTML","text":"\n \n \n \"...\"\n"},{"t":"p","runs":[{"text":"The JPEG stays as the floor. Anything that does not understand the newer types (an old email client, a scraper, somebody’s image-saving script) still gets a file that works."}]},{"t":"h2","id":"where-the-old-formats-are-still-right","runs":[{"text":"Where the old formats are still right"}]},{"t":"ul","items":[[{"text":"Anything a stranger will download and open in unknown software.","b":true},{"text":" A JPEG opens everywhere, including on a fifteen-year-old machine in an office you will never see."}],[{"text":"Print delivery.","b":true},{"text":" A lab or a press wants TIFF or JPEG. Sending AVIF to a print shop will get you a phone call."}],[{"text":"Editable archives.","b":true},{"text":" None of these are working formats. Keep the layered master."}],[{"text":"Email.","b":true},{"text":" Support across mail clients is far patchier than across browsers, and some gateways re-encode anyway."}]]},{"t":"p","runs":[{"text":"Today: take one photograph with visible grain or foliage, export it as JPEG at your usual setting, then as WebP and AVIF at file sizes 30 per cent smaller, and compare the textured area at 100 per cent. You are looking for whether the AVIF has kept the grain or quietly painted over it."}]}],"check":{"question":[{"text":"An editor converts a catalogue of tweed jacket photographs to AVIF at an aggressive setting and reports that they look cleaner than the JPEGs. A buyer later complains the fabric looks like felt. What happened?"}],"options":[{"text":[{"text":"AVIF’s alpha channel was discarded during conversion, flattening the shadow detail that gave the fabric its depth."}],"correct":false,"tempting":[{"text":"Invokes a channel that a photograph on an opaque background does not have and that would not affect surface texture."}]},{"text":[{"text":"The AVIF encoder ran at a low effort setting, and effort settings trade file size for detail retention."}],"correct":false,"tempting":[{"text":"Misreads effort as a quality control: lower effort costs bytes at the same quality, not detail."}]},{"text":[{"text":"At low bitrates AVIF smooths fine texture rather than blocking it, so lost weave reads as clean."}],"correct":true,"tempting":null},{"text":[{"text":"AVIF uses 4:2:0 chroma subsampling, which removes the colour variation that makes tweed read as woven."}],"correct":false,"tempting":[{"text":"Attributes a luminance-detail loss to colour subsampling, which would show on saturated edges rather than on grey weave."}]}],"order":[0,1,2,3],"why":null},"prev":{"slug":"choosing-quality-by-measurement","title":"Stop guessing the quality slider","minutes":9},"next":{"slug":"when-the-image-has-to-move","title":"GIF is a 1987 format and you are probably still exporting one","minutes":9}}}