Lossy compression shrinks a file by permanently discarding some details the eye won't easily notice; lossless compression also shrinks the file, but when opened it gives back an exact copy of the original. On websites, lossy compression is generally the right choice for photos, while lossless compression or a vector format is right for logos, screenshots and drawings. This choice directly affects how fast your site loads.
In short
- Lossy compression: Some data is discarded and the file becomes much smaller. Suited to photos. Example: JPEG.
- Lossless compression: No data is lost and the file shrinks less. Suited to logos, drawings and screenshots. Example: PNG.
- WebP and AVIF support both lossy and lossless compression as well as transparency. As of January 2025, current versions of Chrome, Edge, Firefox and Safari can all display both.
- Use SVG (vector) for logos and icons whenever possible.
- Resizing an image to the size it will be displayed at matters as much as choosing the format.
What are lossy and lossless compression?
A digital image is made up of pixels and the color information of each pixel. Storing that information as-is takes up a lot of space. Compression is a way of storing the same image with less data, and there are two basic approaches.
Lossless compression packs the data in a more efficient arrangement. It's like packing a suitcase more neatly: you don't take anything out, it just takes up less space. When the file is opened, you get a bit-for-bit copy of the original. ZIP archives and PNG images use this method.
Lossy compression goes one step further: it permanently discards details the human eye has trouble noticing (subtle color transitions, very small texture differences). The file becomes much smaller, but the discarded information doesn't come back. JPEG is the best-known example of this approach. The higher you push the compression, the smaller the file gets, and beyond a certain point artifacts (blocking, smudging around edges) become visible.
Image formats used on the web
According to MDN's image format guide and browser support tables, the common web formats compare as follows:
| Format | Compression | Transparency | Animation | Best use |
|---|---|---|---|---|
| JPEG | Lossy | No | No | Photos (the old, universal fallback format) |
| PNG | Lossless | Yes | No (yes with APNG) | Screenshots, sharp-edged graphics, transparent images |
| GIF | Lossless but up to 256 colors | Limited | Yes | Very simple animations; not suitable for photos |
| WebP | Lossy and lossless | Yes | Yes | Most photos and graphics |
| AVIF | Lossy and lossless | Yes | Yes | Photos, especially large images |
| SVG | Vector (not pixels) | Yes | Yes | Logos, icons, diagrams |
A few important notes:
- WebP: For this format, developed by Google, Google's own documentation states that lossless WebP is about 26% smaller than PNG, and lossy WebP is 25–34% smaller than JPEG at equivalent quality. These are the developer's own measurements; the results for your images will vary with the content.
- AVIF: A newer format based on AV1 video coding. MDN notes that AVIF generally produces noticeably smaller files than JPEG and PNG, but does not support progressive loading.
- SVG: Defined by mathematical shapes rather than pixels. No matter how much you enlarge it, it doesn't degrade. We explained this difference in detail in our post on vector vs. raster images.
Browser support: the situation as of January 2025
The first question to ask before using a new format is: can my visitors' browsers display it? According to Can I Use data:
- WebP: Supported since Chrome 32, Firefox 65 and Edge 18. In Safari, there is full support from iOS 14; on macOS, partial support in Safari 14–15.6 and full support from Safari 16.
- AVIF: Supported from Chrome 85, Firefox 93, iOS Safari 16 and desktop Safari 16.4. Edge began supporting AVIF by default with version 121, released in January 2024.
So as of January 2025, current versions of all four major browsers can display both WebP and AVIF. For older devices that haven't been updated, it's still good practice to offer a fallback format (JPEG or PNG) with HTML's <picture> element: the browser picks the first format it supports.
“html <picture> <source srcset="team.avif" type="image/avif"> <source srcset="team.webp" type="image/webp"> <img src="team.jpg" alt="Our field team at work" width="1200" height="675"> </picture> “
Google Search supports these formats too: Google's image SEO guide lists BMP, GIF, JPEG, PNG, WebP, SVG and AVIF among the supported formats. AVIF support was added in August 2024.
The impact on your website and business
Images make up the largest share of the weight on most pages. Google's image SEO guide also notes that images are among the biggest contributors to page size and can slow a page down. Choosing the right format and size affects:
- Load speed: Especially for visitors on mobile data. We explained how speed also affects search visibility in our post on building an SEO-friendly website for local businesses.
- Hosting and traffic: Smaller files mean less storage and less data transfer.
- Perceived quality: A logo saved in the wrong format looks blurry; a product photo compressed with the wrong settings looks blotchy. This directly affects how your brand is perceived.
WordPress
WordPress has supported WebP since version 5.8 (2021) and AVIF since version 6.5 (April 2024). In both cases, however, the image processing library on your server (Imagick or GD) must support the format. You can check this under Tools → Site Health in the WordPress admin. If your hosting doesn't support it, uploads may fail.
Common mistakes
- Uploading images at camera size: Displaying a multi-megabyte photo taken with a phone in a box 600 pixels wide. Whatever the format, reduce the dimensions first.
- Saving a logo as JPEG: Sharp edges and flat colors get smudged by lossy compression. Use SVG for a logo, or PNG or lossless WebP if that's not possible.
- Saving a photo as PNG: Lossless compression produces very large files for photos.
- Re-saving the same image with lossy compression over and over: Every lossy save loses a bit more information. Always keep the original file separately.
- Embedding important text inside an image: It degrades under compression and isn't read as text by search engines; see our post What is HTML? for details.
- Confusing print files with web files: High-resolution CMYK files prepared for print are not suitable for the web. We explained the difference in our post on print-ready files.
Our experience
When we improved mobile speed on this site (artsution.com.tr), we didn't treat images in isolation: alongside the images, we self-hosted our fonts on our server, used small font subsets containing only the characters needed for Turkish, and combined our CSS files. The lesson for us was this: speed doesn't improve with a single setting, but by reviewing every file loaded on the page one by one. Choosing image formats is the most visible item on that list, but not the only one.
We prepare images in our projects with the same logic: vector for logos and icons, and photos resized to their display size and compressed. We archive the original high-resolution files separately.
Frequently asked questions
Should I use WebP or AVIF?
Both are good options. AVIF can produce smaller files for most photos, but because it reached browsers later, it may not be supported on older devices that haven't been updated. WebP has been widespread for longer, and more tools and plugins support it. A practical approach: serve AVIF and WebP together with the <picture> element and keep a JPEG fallback at the bottom. If your system does this automatically, it's even easier.
Will lossy compression ruin my image?
With the right settings, most people won't notice any degradation; that's the whole point. But if you push the compression too far or save the same file again and again, artifacts become visible. For important images, comparing the compressed version side by side with the original is a good habit.
Is PNG always the highest-quality format?
PNG is lossless, so it preserves the pixels you saved exactly. But "highest quality" doesn't always mean "most suitable." Saving a photo as PNG means a much larger file for a quality difference the eye won't notice.
Which format should I use for my logo?
On the web, SVG whenever possible. It looks sharp at every size and is usually a very small file. If you don't have an SVG, use a PNG with a transparent background or a lossless WebP. JPEG is not suitable for logos.
Conclusion
Lossy compression is the right tool for photos; lossless compression and vector formats are right for logos, drawings and screenshots. As of January 2025, WebP and AVIF are supported in all current browsers, so there's little reason left to stick with large, old-style JPEG and PNG files. But the format is only half the job: serving the image at the right size matters just as much.
If you'd like to tackle your site's images and speed together, take a look at our web design and WordPress development services or get in touch with us.
Learn more on Grafik Sanat (in Turkish): Visual explanations and quizzes on this topic → grafiksanat.com.tr/terim/kayipsiz-sikistirma
Update (October 2026): With version 155, released in October 2026, Chrome began displaying the JPEG XL format by default. When this post was published, Safari was the only major browser that could display JPEG XL (partially, from version 17). Google's Chrome team recommends trying AVIF and JPEG XL together, especially for high-quality or lossless photos. Until support in other browsers becomes clear, the advice to offer a fallback format with <picture> still stands.
Sources12
- MDN Web Docs — Image file type and format guide developer.mozilla.org
- Google for Developers — An image format for the Web (WebP) developers.google.com
- Google for Developers — Compression techniques (WebP) developers.google.com
- Can I Use — AVIF image format caniuse.com
- Can I Use — WebP image format caniuse.com
- Google Search Central — Image SEO best practices developers.google.com
- Google Search Central Blog — Supporting AVIF in Google Search (30 August 2024) developers.google.com
- Make WordPress Core — WordPress 5.8 adds WebP support (7 June 2021) make.wordpress.org
- Make WordPress Core — WordPress 6.5 adds AVIF support (23 February 2024) make.wordpress.org
- Winaero — Microsoft Edge 121 finally enables AVIF support out of the box (December 2023; stable release January 2024) winaero.com
- Chrome for Developers — Shipping JPEG XL in Chrome (6 October 2026, for the update box) developer.chrome.com
- Can I Use — JPEG XL image format (for the update box) caniuse.com
