The Complete Guide to WebP (Updated 2025): Lossy vs. Lossless (With Settings That Work)

TL;DR — Recommended Settings

• Photos / banners / hero images: Lossy WebP, Quality 75–85. Start at 80. If the subject is forgiving (soft backgrounds), try 75.
• Logos / icons / UI / screenshots with text: Lossless WebP first. If still too big and visually acceptable, test Lossy 90–95.
• Transparent PNGs → WebP: Keep alpha; try Lossy 85–90 for photo cutouts, Lossless for crisp UI.
• Thumbnails / cards: Lossy 70–80; resize to the actual render size (e.g., 480px).
• Strip metadata unless required; resize large sources (e.g., max width 1920px for hero).

These baselines are battle-tested across many sites. Adjust per asset type after a quick visual check at 100–200% zoom.

Why WebP Still Matters in 2025

• Smaller files, same look: Often 30–70% smaller than JPEG at comparable quality; typically beats PNG for flat graphics.
• Alpha transparency: No need to stick with PNG just to preserve transparency.
• Universal support: Chrome, Safari, Firefox, Edge, Android—WebP is safe.
• Direct SEO impact: Faster Largest Contentful Paint boosts Core Web Vitals and can improve rankings and conversions.

Lossy vs. Lossless: What’s the Real Difference?

Lossy WebP

Lossy WebP discards certain information to achieve high compression while remaining visually similar at normal viewing distances. It shines on photography, gradients, and complex textures.

• Best for: photos, banners, hero images, backgrounds
• Controls: Quality (0–100), encoder method, optional alpha-quality
• Typical savings: 30–60% vs. baseline JPEG, sometimes more

Lossless WebP

Lossless WebP preserves every pixel—perfect for assets that must remain razor sharp.

• Best for: logos, UI icons, line art, screenshots with text
• Transparency: fully supported
• Often smaller than PNG—but not always

Quick chooser: Text or sharp UI edges? Start Lossless. Photo or complex gradient? Use Lossy (Quality 80 to start).

Settings That Work (and Why)

A) Photos (JPG → WebP)

• Mode: Lossy
• Quality: 80 (try 75 if you need more savings)
• Resize: Cap to largest render (e.g., 1920px wide)
• Strip metadata: On for public web copies
• Expected savings: 30–60% vs. JPEG

Deviate for faces/architecture (85–90) or noisy/grainy photos (stay ~85 or denoise first).

B) Logos, Icons, UI (PNG/SVG→raster → WebP)

• Mode: Lossless first
• If still large and acceptable visually: Lossy 90–95
• Transparency: preserved

If you have SVG, serve it directly. Use WebP when only a bitmap is available.

C) Transparent PNGs (product cutouts, UI parts)

• Soft edges (hair, fabric): Lossy 85–90
• Crisp UI shapes/text: Lossless

D) Thumbnails & Cards

• Resize to real render size (often 320–600px)
• Lossy 70–80 works great for small visuals

Downscaling First: The Biggest Free Win

Oversized sources kill performance even with perfect compression. Resize before encoding:

• Find breakpoints: if a card image never renders above 480px, export 480px (or 2× for HDPI).
• Heroes: 1200–1920px wide covers most layouts.
• Downscale → then encode to WebP.

Transparency & Alpha Quality

WebP supports alpha in both lossy and lossless modes.

• Soft edges: Lossy can be substantially smaller than PNG while looking great.
• Crisp shapes: Lossless keeps edges pixel-perfect.
• Some encoders expose alpha-quality—raise it for smoother semi-transparent edges.

Metadata: Keep or Strip?

Most images ship with EXIF/XMP (camera model, GPS, timestamps). For public web copies:

• Strip metadata for smaller files and better privacy.
• Keep ICC profiles if you require strict brand color management on masters, not public copies.

Responsive WebP with picture, srcset, and sizes

Serve only the pixels needed for the layout and let modern browsers pick the right resource.

<picture>
  <!-- Optional AVIF first -->
  <source type="image/avif"
          srcset="/img/hero-800.avif 800w, /img/hero-1200.avif 1200w"
          sizes="(min-width: 900px) 1200px, 800px">
  <!-- WebP for universal support -->
  <source type="image/webp"
          srcset="/img/hero-800.webp 800w, /img/hero-1200.webp 1200w"
          sizes="(min-width: 900px) 1200px, 800px">
  <img src="/img/hero-800.jpg" width="800" height="450" alt="Hero image">
</picture>

Add explicit width/height to help avoid CLS. Keep descriptive alt text for accessibility and SEO.

Validation: Know Your Settings Are Good Enough

1. Visual checks at 100% & 200%: Look for halos, banding, blockiness. If visible, bump quality by 5–10 or switch to lossless for UI.
2. Lighthouse / PageSpeed: Watch Largest Contentful Paint (LCP) and Total Byte Weight. Your LCP image should be smaller and load faster post-conversion.
3. Real User Monitoring (RUM): Check p75/p95 LCP and INP improvements across key templates.
4. Phased rollout: Convert a subset, compare bounce/conversion, then roll out wider.

Decision Tree (Quick Chooser)

Common Pitfalls (and Fixes)

• “My WebP is bigger than JPEG/PNG.” You might be using lossless on a photo, or not resizing. Switch to Lossy 80 and cap dimensions.
• “Logo looks fuzzy.” Use Lossless. If you must use Lossy, push 90–95 and compare.
• “Transparent icon has a white halo.” Raise alpha-quality or switch to Lossless WebP.
• “Site still feels slow.” Ensure responsive images (`srcset`/`sizes`), HTTP/2+, CDN caching, and preload your LCP image.

Example Workflows

E-commerce Product Images

• Generate sizes (320, 640, 960, 1280px).
• Encode each as Lossy 80; thumbnails 70–75.
• Logos/badges: Lossless.
• Use srcset to serve smallest sufficient size.

Blog / Publisher

• Hero images: 1200–1600px wide, Lossy 80–85.
• Inline images: Lossy 75–80; strip metadata.
• Illustrations with text: Lossless or Lossy 92–95.

App UI / Docs

• Screenshots: Lossless (crisp text).
• Icons: SVG preferred; if bitmap, Lossless WebP.

Bulk Conversion & Automation

Manual conversion works for a handful of assets, but automation wins for real sites:

• Build step (CI/CD): On deploy, resize → encode WebP variants → upload to CDN. Re-encode only changed originals.
• One-time migration: Crawl your site, skip existing .webp, convert the rest, and download a ZIP keeping folders intact.

If you want a head start, try our free tool: single image conversion or a whole-page WebP ZIP—no sign-up.

What Quality Number Should I Use?

• 70–75: Thumbnails/cards; big savings on small visuals.
• 80: Reliable default for photos.
• 85–90: Critical visuals where gradients/edges must be pristine.
• 90–95: Only when absolutely necessary.
• Lossless: For crisp UI/logos/screenshots.

Pro tip: Pick 2–3 representative images (portrait, foliage/landscape, text/diagram). Tune until you’re happy, then apply to similar assets.

Implementation Snippets

Preload an LCP WebP Hero

<link rel="preload" as="image"
      href="/img/hero-1200.webp"
      imagesrcset="/img/hero-800.webp 800w, /img/hero-1200.webp 1200w"
      imagesizes="(min-width: 900px) 1200px, 800px"
      type="image/webp">

Friendly Download Headers (keep spaces/unicode)

Content-Type: image/webp
Content-Disposition: attachment; filename="My Product Photo.webp"; filename*=UTF-8''My%20Product%20Photo.webp

WebP vs. AVIF vs. JPEG XL (Practical View)

• WebP: Best everyday choice in 2025—great compatibility and speed.
• AVIF: Can be smaller for photos; slower to encode; toolchain support varies.
• JPEG XL: Impressive tech, but inconsistent browser support keeps it niche.

Pragmatic approach: Ship WebP broadly; optionally offer AVIF as an extra <source> if your pipeline handles it and you’ve verified visuals/perf.

Launch Checklist

• Resize to real render sizes (add 2× for HDPI where needed).
• Lossy 80 default; Lossless for logos/UI/screenshots.
• Visual QA at 100–200%; adjust outliers.
• Preserve transparency; tweak alpha-quality if needed.
• Strip metadata for public copies.
• Use srcset/sizes for responsive delivery.
• Preload your LCP image.
• Measure with Lighthouse/RUM; compare before/after.
• Roll out in phases; keep originals archived.

Final Word

Switching from JPG/PNG to WebP is one of the fastest ways to improve page speed and Core Web Vitals without redesigning your site. Use Lossy 75–85 for photos, Lossless for crisp UI, and resize to what your layout actually needs. Validate with Lighthouse, monitor LCP in the real world, and iterate once. It’s a few hours of work for months (or years) of faster, better-performing pages.