Unlike JPG, which is always lossy, or PNG, which is always lossless, WebP supports both compression modes in the same file format — which is exactly why it’s confusing the first time you look at conversion settings. For small-business owners managing website performance and hosting costs, understanding this distinction can directly impact load times and bandwidth expenses.
Lossy WebP: Maximum Compression for Visual Content
Lossy WebP works like JPG: it discards some image data to shrink file size, using smarter compression algorithms so the visual quality loss is less noticeable at an equivalent file size. The compression is intelligent enough to preserve details humans notice while removing data in areas where we’re less sensitive to loss.
Real-world compression gains
- A typical product photograph (3000×2000px) saved as JPG at quality 85: ~520 KB
- Same image as lossy WebP at quality 80: ~340 KB (35% smaller)
- A hero image for an e-commerce site: typically 25-34% file reduction compared to equivalent JPG
Best use cases: Photographs, product shots, hero images, backgrounds, and any photographic content. For a small business with 100+ product images on their site, switching to lossy WebP at quality 80 could reduce total image bandwidth by 8-12 GB annually — meaningful savings if you’re on a shared hosting plan with monthly bandwidth limits.
Quality setting guidance
WebP quality ranges from 0 (worst) to 100 (best). For business websites, the sweet spot is 75-85:
- 75-80: Recommended for most product images and marketing graphics. Quality is visually indistinguishable from the original to most viewers, but file sizes drop 30-40% versus original JPG.
- 80-85: Use for high-end product photography or luxury brands where image fidelity is critical to brand perception.
- Below 75: Generally not recommended for business use; visible compression artifacts appear even in casual viewing.
Lossless WebP: Pixel-Perfect Quality
Lossless WebP works like PNG: no data is discarded, so the image is pixel-perfect identical to the original. The file is mathematically reversible — you could theoretically convert it back to the exact original pixels. Lossless WebP files typically run about 26% smaller than the equivalent PNG, using more efficient compression mathematics.
Real-world compression gains
- A PNG logo (500×500px, solid colors): ~45 KB
- Same logo as lossless WebP: ~32 KB (29% smaller)
- A screenshot with text and UI elements as PNG: ~280 KB
- Same screenshot as lossless WebP: ~205 KB (27% smaller)
Best use cases: Logos, icons, brand graphics, screenshots with text, diagrams, infographics, and any image with sharp edges or flat colors. The transparency support also makes lossless WebP ideal for buttons, badges, and layered graphics that need to sit on varying backgrounds.
When lossless matters most
If your website includes detailed line art, maps, charts, or text overlays, lossless WebP preserves all that detail while saving 25-30% file space compared to PNG. For a SaaS company with 40+ product screenshots in their help documentation, this could mean 200-300 MB in total bandwidth savings.
Which Should You Pick?
- Photos and product images: Lossy WebP, quality setting 75-85
- Logos, icons, and graphics with text: Lossless WebP
- Screenshots and technical diagrams: Lossless WebP
- Backgrounds and hero images: Lossy WebP, quality 80
- Not sure? Lossy at 80% quality is a safe default for most website images and is what most automated conversion tools use out of the box.
One Critical Thing to Watch
Converting a lossy JPG into lossless WebP won’t recover quality you already lost — you’ll just get a larger file that’s just as compressed as the original JPG. Lossless mode only helps when your source image was lossless to begin with (like a PNG, TIFF, or original design file).
The mistake: A small business scans printed marketing materials and saves them as JPG, then converts to lossless WebP hoping to improve quality. The file size balloons (because lossless must encode all the JPEG compression artifacts), but the image still looks exactly like the JPG — no quality improvement happens.
The solution: When converting existing images, match the WebP mode to your source: if your source was lossy (JPG), use lossy WebP. Only use lossless WebP when you’re starting with a lossless source or original files. For new content, always start with the highest-quality source available before choosing compression.