--- title: "WebP vs AVIF vs JPEG: which format your website should use" description: "Your speed test says serve images in next-gen formats? Learn which format to use, how WebP and AVIF fit your platform, and how to switch safely." url: "https://webleveling.com/blog/jpeg-webp-or-avif-for-your-website/" lang: "en" published: "2026-10-17" modified: "2026-10-17" author: "Cal Hewitt" tags: ["website-maintenance","web-design","small-business"] image: "https://webleveling.com/og/blog-jpeg-webp-or-avif-for-your-website.jpg" alternates: es: "https://webleveling.com/es/blog/formato-de-imagen-webp-avif-o-jpeg.md" --- # WebP vs AVIF vs JPEG: which format your website should use Your speed test says serve images in next-gen formats? Learn which format to use, how WebP and AVIF fit your platform, and how to switch safely. ![A row of empty wooden picture frames of different sizes leaning against a plain painted wall.](https://webleveling.com/blog/jpeg-webp-or-avif-for-your-website/image-format-featured.jpg) A speed test just told you to "serve images in next-gen formats," and now you are staring at a list of file names wondering what to change. The short answer to WebP vs AVIF vs JPEG is that WebP is a dependable default for website images, and AVIF can be smaller when your platform makes it for you with a working fallback. JPEG is still fine for photos that are already small and sharp. PNG is the safer pick for transparent logos and graphics with crisp text. You do not have to rebuild anything or touch hundreds of pages to act on that. Your platform may already be serving a newer format, and a few flagged images are a small job, not a project. Work in this order: pick the format for each kind of image, see what your platform already does, change only what is worth changing, and confirm the result. **Key Takeaways** **WebP is the dependable default** Google reports lossy WebP files 25% to 34% smaller than comparable JPEG files at equivalent quality, and lossless WebP files 26% smaller than PNG on average. **Check your platform before you convert anything** Wix converts uploads to AVIF on the live site, Squarespace shows uploads as WebP by default, and WordPress converts only when a setting, plugin or host feature does it. **Confirm by looking at one image** Rerun PageSpeed Insights, then open one image in your browser's network panel and read its Content-Type, which will say JPEG, PNG, WebP or AVIF. ## Which format should each image on your site use? Pick by what the image is, not by what is newest. A photo, a logo with a clear background, a screenshot and an animation each have a format that suits them. WebP covers most jobs: it handles lossy and lossless compression, transparency and animation, and modern browsers all read it. AVIF handles the same list, adds HDR and wide color, and often makes smaller files than WebP, though it can take longer to encode and older browsers still need a fallback. Google's [WebP documentation](https://developers.google.com/speed/webp) and the [MDN image format guide](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) lay out the trade-offs. Which format fits which image | Image type | Good choice | Why | | --- | --- | --- | | Photos on pages and in galleries | WebP, or AVIF if your platform makes it automatically | Smaller than JPEG at similar quality | | Photos that are already small and sharp | JPEG | Little to gain from converting | | Logo with a transparent background | PNG, or WebP or AVIF with transparency | JPEG has no transparency | | Screenshots, diagrams, text-heavy graphics | PNG or lossless WebP | Edges and small text stay crisp | | Animated images | WebP | Supports animation | Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF as of October 2026, per its [image SEO documentation](https://developers.google.com/search/docs/appearance/google-images). AVIF has been supported in Google Search and Google Images since August 30, 2024, as Google announced in [Supporting AVIF in Google Search](https://developers.google.com/search/blog/2024/08/happy-avifriday). So, switching to either format will not cost you a place in image results. ![A closed laptop beside a small stack of printed photographs on a pale wooden desk.](https://webleveling.com/blog/jpeg-webp-or-avif-for-your-website/image-format-photo-prints.jpg) Photos are where a newer format saves the most. JPEG XL is not on Google's list of supported image formats. Chrome 155, Firefox 158 and Safari 17 support it, per the [Chrome blog](https://developer.chrome.google.cn/blog/jpeg-xl-in-chrome?hl=en), [Firefox 158 release notes](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/158) and [Safari 17 release notes](https://developer.apple.com/documentation/safari-release-notes/safari-17-release-notes), but Safari cannot load it progressively. Keep a JPEG, WebP or AVIF version on the public page for now. ## How do you find out whether your platform already did the work? Before you convert a single file, check what your site builder or host already serves. The three most common setups behave differently, and each one's own help page says how. On Wix, uploaded site images are converted to AVIF on the live site and compressed for speed, per [Wix's media guidance](https://support.wix.com/en/article/images-and-loading-times). On Squarespace, uploads display as WebP by default. The WebP toggle sits in Image Settings, and if someone switched it off, images revert to their original format within 24 hours, per [Squarespace's image help page](https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-images-for-display-on-the-web), updated June 22, 2026. WordPress takes a little more checking. It accepts AVIF uploads from version 6.5 when the server's image library supports AVIF, per the [WordPress 6.5 notes](https://make.wordpress.org/core/2024/02/23/wordpress-6-5-adds-avif-support/). JPEG and PNG uploads become WebP or AVIF only through the \`image\_editor\_output\_format\` filter, an image-optimization plugin, or a feature from your host or CDN. Ask your host which of those is switched on. ![Three blank paper cards fanned out on a slate surface, each a slightly different shade.](https://webleveling.com/blog/jpeg-webp-or-avif-for-your-website/image-format-sample-cards.jpg) Your platform may already be serving a different format than the one you uploaded. ## How can you switch formats without breaking anything? Start with the originals. Keep every source file in a folder you control, and treat any converted copy as a copy. If a conversion looks soft, you re-export from the original instead of compressing an already compressed file again. Then work in small batches, starting with the pages that matter most: the homepage and your main service page. Convert or enable automatic conversion for those first, and compare the result at the size visitors see it. If you are also resizing, the guide to [resizing and compressing images for your website](https://webleveling.com/blog/resize-and-compress-images-for-your-website/) covers dimensions and quality settings. A \`.jpg\` renamed to \`.webp\` is still a JPEG inside, and Google recommends the extension match the actual file type, so use an export or conversion tool that rewrites the image. When you serve a newer format yourself, Google recommends the \`\` element with a fallback \`\`, so a browser that cannot read the new format shows the older one. A host, CDN or plugin that does this for you handles that step. ![A wooden box of loose photo prints beside a tidy stack of the same prints held with a binder clip.](https://webleveling.com/blog/jpeg-webp-or-avif-for-your-website/image-format-original-folder.jpg) Keep the originals; the converted files are copies. After each batch, test it. Check the page on desktop and on a phone, look at any logo or graphic with a transparent background, open your galleries, and send a test message through your contact form. Then check Search Console over the following weeks to see that your pages and images still show up. Google advises against sweeping changes without evaluating the site, so a batch at a time is the safe pace. ## How do you confirm which format your visitors actually get? Two checks take about ten minutes. The first is PageSpeed Insights, and the second is a look at one image. ![A closed laptop beside a small magnifying glass on a plain white desk.](https://webleveling.com/blog/jpeg-webp-or-avif-for-your-website/image-format-quality-check.jpg) Check the format your visitors actually receive before you change anything. Run your homepage and one important service page through [PageSpeed Insights](https://pagespeed.web.dev/), on mobile and desktop. Open the image opportunities and note which image URLs are flagged, the format each one arrives in, and the estimated savings. The "serve images in next-gen formats" line is an optimization opportunity based on estimated download savings, per [Chrome's image delivery guidance](https://developer.chrome.com/docs/performance/insights/image-delivery). It skips images where the estimated savings are under 4 KiB, and you can treat it as a prompt to check, not an order to convert every image. For the second check, open the page in your browser, open the developer tools, switch to the Network tab and reload. Click one image and read its Content-Type. It will say \`image/jpeg\`, \`image/png\`, \`image/webp\` or \`image/avif\`. If it already says WebP or AVIF, the platform did the work. A flagged image that is also far larger than it needs to be points to a size problem, not a format problem. That is where [why your website is slow to load](https://webleveling.com/blog/website-slow-to-load/) is the better next read. ## When is it fine to leave your image formats alone? If your platform already serves WebP or AVIF and PageSpeed shows only a few kilobytes of savings, leave the format alone. A small, sharp image that already loads efficiently gains little from conversion, and a redesign or a full media-library migration for a handful of flagged images is not worth the cost. There is no single file size every image must hit. The 500 KB figure people quote is Squarespace's recommendation for uploads, not a Google rule. The right size depends on how large the image appears, what it shows and how much quality it needs. Web.dev advises choosing the smallest image that still looks sharp, and its [image performance guide](https://web.dev/learn/performance/image-performance) covers responsive sizes and compression testing. Help is worth paying for when the problem is bigger than the file extension. That means templates that serve different formats, oversized source images, a theme that bypasses the optimizer, transparent logos that break, stale caches, visible quality loss, or a site that needs ongoing checks. Descriptions of your images matter too, and [alt text for your small business website](https://webleveling.com/blog/alt-text-for-small-business-website/) is a separate job from choosing a format. **Quiz: Which image format fits?** 1. Your logo has a transparent background. Which format should you avoid saving it as? - PNG - JPEG **(correct answer)** - WebP with transparency - AVIF with transparency 2. You run a Wix site and PageSpeed flags an image. What should you check first? - Rebuild the site in another platform - Whether the live image is already served as AVIF **(correct answer)** - Rename every file to .avif - Delete the image 3. What does the Content-Type of an image tell you? - How many people viewed it - Which format the server actually sent **(correct answer)** - Whether Google ranks it - Its alt text ## Frequently Asked Questions About WebP vs AVIF vs JPEG **Is WebP better than JPEG?** For web use, WebP usually makes a smaller file at comparable quality, and it supports transparency. JPEG stays widely compatible and is fine when an image is already small and clear. **Is AVIF better than WebP?** AVIF often makes smaller files and supports HDR and wide color. WebP has broader practical compatibility and is simpler to set up. AVIF works best when your platform or a CDN creates it with a fallback. **Can Google index WebP and AVIF images?** Yes. Google Search lists both among its supported image formats, and AVIF has been supported since August 30, 2024. **What is the best image format for a website?** It depends on the image. Use WebP for most photos and graphics, AVIF where your platform makes it automatically, PNG for transparent logos and crisp text graphics, and JPEG for photos that are already small. **Do I need to convert every image on my site?** No. Start with large images on your most important pages, and leave small images that already load quickly. PageSpeed skips estimated savings under 4 KiB. **Does converting images to WebP help my rankings?** A smaller file loads sooner, which helps visitors on slow connections. Google lists WebP and AVIF as supported formats, so the switch is safe for image search, and the benefit is speed rather than a ranking lift. ## Final Thoughts For most image jobs on your site, WebP is a dependable default, AVIF is a good choice when your platform creates it with a fallback, PNG suits transparent logos and sharp graphics, and JPEG is fine for small, clear photos. Wix and Squarespace may already be handling the conversion for you, and WordPress needs a setting, plugin or host feature to do it. Rerun PageSpeed Insights and read one image's Content-Type to see where you stand. Done in small batches with your originals saved, this is a short job. Your pages load a little sooner on phones, your logos keep their transparent edges, and the speed test stops flagging images that matter. If you would rather hand it off, [Web Leveling](https://webleveling.com/) can look at what your site serves, fix the pages where the format or size is costing you, and leave everything else alone. Our [web design](https://webleveling.com/services/web-design/) work covers how images are served from the ground up, and you can [tell us which warning your speed test gave you](https://webleveling.com/contact/) so we can check what it is flagging. We work with small and medium businesses across the country and overseas. ## Terms Image format words in this post Tap a term to see what it means. **WebP.** A web image format from Google that supports lossy and lossless compression, transparency and animation. **AVIF.** A newer image format that often makes smaller files than WebP and supports HDR, transparency and wide color. **JPEG.** A long-standing lossy photo format with no transparency. **PNG.** A lossless format that supports transparency, often used for logos, screenshots and text-heavy graphics. **Fallback.** An older-format version of an image that a browser uses when it cannot read the newer one. **Content-Type.** A label the server sends with a file that names its format, such as image/webp. - [How much does website testing cost? Prices and free checks](https://webleveling.com/blog/website-testing-cost/): Website testing cost runs from low marketplace hourly rates to $50 to $180 per hour for US QA. See what drives the price, what to test free, and when to pay. - [Oilfield Service Company Website: What Buyers Check](https://webleveling.com/blog/websites-for-oilfield-service-companies/): What an oilfield service company website needs to show buyers and recruits: the pages to build, what to keep private, and a ten-minute check to run today. - [How to Resize and Compress Images for Your Website](https://webleveling.com/blog/resize-and-compress-images-for-your-website/): Resize phone photos to the right width, pick JPEG or WebP, and compress them with Squoosh. Then test your page in PageSpeed Insights to confirm it worked.