WebP Format

Learn about the WebP image format, its advantages over JPEG and PNG, browser support, and how OPTIMAGE uses WebP for optimal performance.

What is WebP?

WebP is a modern image format developed by Google that provides superior compression for images on the web. It supports both lossy and lossless compression, as well as transparency (alpha channel) and animation.

✓Smaller file sizes: 25-35% smaller than JPEG at equivalent quality
✓Better quality: Fewer compression artifacts than JPEG
✓Transparency support: Alpha channel like PNG, but smaller
✓Animation support: Alternative to GIF with better compression

File Size Comparison

WebP provides significant file size savings compared to traditional formats:

Format	Typical Size	Savings vs WebP
WebP	100 KB	Baseline
JPEG (high quality)	130-150 KB	30-50% larger
PNG (8-bit)	200-300 KB	2-3x larger
PNG (24-bit)	500+ KB	5x+ larger

OPTIMAGE uses WebP by default with 80% quality setting, providing an excellent balance between file size and visual quality. All uploaded images are automatically converted to WebP.

Browser Support

WebP has excellent browser support, covering over 97% of users worldwide:

Browser	WebP Support	Since Version
Chrome	Full support	Chrome 32+ (2014)
Firefox	Full support	Firefox 65+ (2019)
Safari	Full support	Safari 14+ (2020)
Edge	Full support	Edge 18+ (2018)
iOS Safari	Full support	iOS 14+ (2020)
Android Browser	Full support	Android 4.2+ (2012)

The only browsers without WebP support are Internet Explorer (discontinued) and very old versions of Safari. For these rare cases, you can provide a fallback.

Fallback with <picture>

If you need to support legacy browsers, use the <picture> element to provide a JPEG/PNG fallback:

<picture>
  <!-- WebP for modern browsers -->
  <source
    type="image/webp"
    srcset="
      https://cdn.optimage.com/col_abc123/320/image.webp 320w,
      https://cdn.optimage.com/col_abc123/768/image.webp 768w,
      https://cdn.optimage.com/col_abc123/1280/image.webp 1280w
    "
    sizes="100vw"
  />

  <!-- JPEG fallback for older browsers -->
  <img
    src="fallback.jpg"
    srcset="
      fallback-320.jpg 320w,
      fallback-768.jpg 768w,
      fallback-1280.jpg 1280w
    "
    sizes="100vw"
    alt="Description"
    loading="lazy"
  />
</picture>

Note: With 97%+ WebP support, fallbacks are rarely necessary for most websites. Consider your audience before adding the extra complexity. OPTIMAGE only generates WebP to keep things simple and optimized.

WebP vs Other Formats

WebP vs JPEG

+25-35% smaller files at same quality
+Better handling of sharp edges and text
+Fewer blocking artifacts
+Supports transparency (JPEG doesn't)

WebP vs PNG

+26% smaller for lossless compression
+Supports lossy compression (PNG is lossless only)
+Same transparency quality, much smaller size

WebP vs GIF

+Animated WebP is much smaller than GIF
+Supports 24-bit color (GIF limited to 256 colors)
+Better transparency support

What About AVIF?

AVIF is a newer format with even better compression than WebP, but browser support is still catching up (around 90%). WebP remains the best choice for broad compatibility while still offering excellent compression.

OPTIMAGE and WebP

OPTIMAGE automatically converts all uploaded images to WebP format:

•Automatic conversion: JPEG, PNG, GIF, and existing WebP are all optimized
•Quality setting: 80% quality provides excellent visual quality with small file sizes
•11 sizes generated: Each size is independently optimized
•CDN delivery: All WebP images served from global CDN

URL Structure

https://cdn.optimage.com/{collectionId}/{size}/{slug}.webp

Examples:
https://cdn.optimage.com/col_abc123/768/hero-image.webp
https://cdn.optimage.com/col_abc123/1280/hero-image.webp
https://cdn.optimage.com/col_abc123/0/hero-image.webp  (original size)

Best Practices

1.Use WebP everywhere: With 97%+ support, WebP should be your default format.
2.Don't over-compress: OPTIMAGE's 80% quality is well-balanced. Higher compression may cause visible artifacts.
3.Use the right size: Combine WebP with srcset to serve the optimal size for each device.
4.Keep originals: Store your original files locally. OPTIMAGE keeps the original WebP conversion too (size 0).
5.Set proper cache headers: OPTIMAGE CDN handles this for you with optimal cache settings.

Performance Impact

Switching to WebP can significantly improve your Core Web Vitals:

-30%

Average file size reduction

Faster

Largest Contentful Paint (LCP)

Lower

Data transfer costs