{"id":20,"date":"2026-10-15T19:16:32","date_gmt":"2026-10-15T19:16:32","guid":{"rendered":"https:\/\/refracttools.com\/blog\/?p=20"},"modified":"2026-10-15T21:07:07","modified_gmt":"2026-10-15T21:07:07","slug":"webp-vs-avif-vs-jpeg","status":"publish","type":"post","link":"https:\/\/refracttools.com\/blog\/image-optimisation\/webp-vs-avif-vs-jpeg\/","title":{"rendered":"WebP vs AVIF vs JPEG: which image format should you use?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">WebP vs AVIF is the image format question most web projects face now that JPEG is no longer the automatic choice. Both are supported by every current browser, both beat JPEG on file size, and both have trade-offs that matter more than the headline numbers suggest.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide gives you the short answer first, then explains where each format earns its place, what to do about PNG, SVG and JPEG XL, and how to serve the modern formats with a safe fallback.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-refract-takeaways is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Key takeaways<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For most websites, WebP is the sensible default for photos and graphics. It is supported everywhere and noticeably smaller than JPEG.<\/li>\n\n\n<li>AVIF usually produces the smallest photos, but it is slower to encode and not every tool can create it.<\/li>\n\n\n<li>Keep JPEG as a fallback or for places outside the browser, such as email and some social platforms.<\/li>\n\n\n<li>Use PNG for screenshots and sharp-edged graphics, and SVG for logos and icons. JPEG XL is not ready for general web use yet.<\/li>\n\n\n<li>Resizing images to the size you display them saves more than any format switch.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The short answer<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want one rule: export photos as WebP at around 75\u201385% quality, and use AVIF where your build process or CMS can generate it automatically with a WebP or JPEG fallback. That covers the vast majority of sites with very little risk.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The rest of this article is about the cases where that rule needs adjusting.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JPEG: still the safe baseline<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JPEG has been the standard photo format for over three decades and opens in absolutely everything: browsers, email clients, office software, old phones and printers. That universal compatibility is its main strength.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Its weaknesses are well known. It has no transparency, it smears sharp edges and text, and at the same visual quality it produces larger files than either modern format. On a web page you control, there is rarely a reason to serve JPEG as the first choice any more. It remains the right format for anything leaving the browser, such as images attached to emails or uploaded to services that re-encode them anyway.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WebP: the default for most websites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WebP was released by Google and has worked in every major browser since Safari added it in 2020. Google&#8217;s own figures put lossy WebP at 25\u201334% smaller than comparable JPEGs, and lossless WebP at around 26% smaller than PNG.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It supports transparency and animation, encodes quickly, and almost every design tool, CMS and image CDN can produce it. WordPress has accepted WebP uploads natively for years. For a typical site, switching from JPEG to WebP is the biggest easy win available.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The main downside is that WebP&#8217;s lossy mode always uses reduced colour detail (4:2:0 chroma subsampling), which can make fine red or blue detail and coloured text look soft. For those images, lossless WebP or PNG is a better fit.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">AVIF: smallest files, with trade-offs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">AVIF is based on the AV1 video codec. For photos it usually produces smaller files than WebP at the same visual quality, and the gap tends to widen at lower quality settings, where AVIF degrades into soft blur rather than blocky artefacts. It also supports transparency, wide colour and HDR.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Support is complete across current browsers: Chrome added it in 2020, Firefox in 2021, Safari in version 16 (2022), and Edge was last in January 2024, which made AVIF Baseline. The trade-offs are elsewhere:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Encoding is slow.<\/strong> Creating AVIF files can take many times longer than WebP, which matters for large batches and on-the-fly resizing.<\/li>\n\n\n<li><strong>Not every tool can create it.<\/strong> Some browsers can display AVIF but cannot export it from a canvas, so browser-based tools may grey the option out.<\/li>\n\n\n<li><strong>No progressive loading.<\/strong> A large AVIF appears all at once when it has downloaded, rather than sharpening as it loads.<\/li>\n\n\n<li><strong>Fine texture can be smoothed away<\/strong> at aggressive settings. Check skin, fabric and foliage at 100% before committing to a low quality value.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What about PNG, SVG and JPEG XL?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">PNG<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">PNG is lossless, so it keeps every pixel exactly. That makes it right for screenshots, UI images, diagrams and anything with text or hard edges, and wasteful for photos. Lossless WebP is usually smaller than PNG for the same image if you want to trim further.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SVG<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Logos, icons and simple illustrations should be SVG wherever possible. A vector file stays sharp at any size and is often only a few kilobytes. When you need a raster version, for an app store or a social image, the <a href=\"https:\/\/refracttools.com\/image-converter\/\">image converter<\/a> can render an SVG to PNG at 2\u00d7, 3\u00d7 or 4\u00d7 scale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JPEG XL<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JPEG XL is technically impressive, and it can losslessly repack existing JPEGs into smaller files. Browser support is still thin, though. Safari has supported it since version 17. Chrome added a decoder in version 145 in early 2026 but, at the time of writing, keeps it behind a flag, and Firefox does not ship it in release builds. Without broad default support it is not a practical first choice for websites yet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WebP vs AVIF vs JPEG side by side<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><div class=\"table-scroll\" tabindex=\"0\" role=\"region\" aria-label=\"Scrollable table\"><table><thead><tr><th><\/th><th>JPEG<\/th><th>WebP<\/th><th>AVIF<\/th><\/tr><\/thead><tbody><tr><td>File size (photos)<\/td><td>Largest<\/td><td>Smaller<\/td><td>Usually smallest<\/td><\/tr><tr><td>Transparency<\/td><td>No<\/td><td>Yes<\/td><td>Yes<\/td><\/tr><tr><td>Animation<\/td><td>No<\/td><td>Yes<\/td><td>Yes<\/td><\/tr><tr><td>Encoding speed<\/td><td>Fast<\/td><td>Fast<\/td><td>Slow<\/td><\/tr><tr><td>Progressive loading<\/td><td>Yes<\/td><td>No<\/td><td>No<\/td><\/tr><tr><td>Browser support<\/td><td>Universal<\/td><td>All current browsers<\/td><td>All current browsers (Baseline 2024)<\/td><\/tr><tr><td>Best for<\/td><td>Email, compatibility<\/td><td>Default web format<\/td><td>Large hero and gallery photos<\/td><\/tr><\/tbody><\/table><\/div><\/figure>\n\n\n<aside class=\"tool-card tool-card--inline\"><span class=\"swatch\" style=\"background:linear-gradient(135deg,#7dd3fc,#be123c)\" aria-hidden=\"true\"><\/span><div class=\"tool-card__body\"><p class=\"tool-card__eyebrow\">Free tool<\/p><p class=\"tool-card__name\">Image format converter<\/p><p class=\"tool-card__blurb\">Convert between PNG, JPG, WebP and AVIF in bulk.<\/p><\/div><a class=\"btn primary\" href=\"https:\/\/refracttools.com\/image-converter\/\">Try it free <span aria-hidden=\"true\">\u2192<\/span><\/a><\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Serving AVIF and WebP with a fallback<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want AVIF&#8217;s savings without worrying about older devices, the <code>&lt;picture&gt;<\/code> element lets the browser pick the first format it understands:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;picture&gt;\n  &lt;source srcset=\"\/img\/hero.avif\" type=\"image\/avif\"&gt;\n  &lt;source srcset=\"\/img\/hero.webp\" type=\"image\/webp\"&gt;\n  &lt;img src=\"\/img\/hero.jpg\" alt=\"Describe the image\"\n       width=\"1600\" height=\"900\" loading=\"lazy\" decoding=\"async\"&gt;\n&lt;\/picture&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Keep the <code>width<\/code> and <code>height<\/code> attributes so the browser can reserve space and avoid layout shift. Drop <code>loading=\"lazy\"<\/code> for the main image at the top of the page, since lazy-loading your largest visible image slows down Largest Contentful Paint.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you use WordPress or an image CDN, check whether it already does this for you. Many generate WebP or AVIF automatically and choose the format per visitor.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-refract-callout is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Resize before you convert. A 4000px photo saved as AVIF is still far heavier than a 1600px WebP. Get the dimensions right with the <a href=\"https:\/\/refracttools.com\/bulk-image-resizer\/\">bulk image resizer<\/a> first, then pick the format.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Convert your images in the browser<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To try this on your own images, drop a few photos into the <a href=\"https:\/\/refracttools.com\/image-converter\/\">image converter<\/a> and export them as WebP and AVIF at 80% quality. Compare the file sizes and look at the results at full size. Everything runs on your own device, so nothing is uploaded. For most sites, the WebP versions will be the ones you ship.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A practical comparison of WebP, AVIF and JPEG for websites: which to use by default, where AVIF is worth the extra effort, and how to serve both with a fallback.<\/p>\n","protected":false},"author":1,"featured_media":34,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_refract_tool":"image-converter","footnotes":""},"categories":[9],"tags":[15,16,5,17,14],"class_list":["post-20","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image-optimisation","tag-avif","tag-image-formats","tag-image-tools","tag-performance","tag-webp"],"_links":{"self":[{"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":1,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":27,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions\/27"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/media\/34"}],"wp:attachment":[{"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/refracttools.com\/blog\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}