Skip to content

WebP

Rule

Use WEBP format for your images, you can use tools like cwepb to convert your pictures

  • Superior compression - WebP typically provides 25-35% smaller file sizes compared to JPEG at equivalent visual quality, and 26% smaller files than PNG.
  • Support for transparency - Unlike JPEG, WebP supports alpha channel transparency like PNG, but with much smaller file sizes.
  • Both lossy and lossless compression - WebP can use either compression method depending on your needs:
  • Lossy for photographs and complex images (like JPEG)
  • Lossless for graphics, text, and images that need perfect clarity (like PNG)
  • Animation support - WebP can replace animated GIFs with much smaller file sizes while maintaining quality.
  • Better performance - Smaller image sizes lead to faster page loads, improving:
  • Core Web Vitals metrics
  • User experience
  • SEO rankings (Google considers page speed)
  • Reduced bandwidth costs
  • Wide browser support - All major modern browsers now support WebP (Chrome, Firefox, Safari, Edge, Opera).
  • Multiple image features in one format - Instead of using different formats for different needs (JPG, PNG, GIF), WebP can often handle all requirements.

Retro-compatibility

If you’re not sure about retro-compatibility, you can use the picture element :

<picture>
  <source type="image/webp" srcset="flower.webp" />
  <source type="image/jpeg" srcset="flower.jpg" />
  <img src="flower.jpg" alt="A beautiful flower" loading="lazy" />
</picture>

Examples

🚨 DON’T

<!-- Using JPEG for all photos -->
<img src="hero-banner.jpg" alt="Team meeting" />

<!-- Using PNG for photos with no transparency -->
<img src="product-photo.png" alt="Smartphone" />

<!-- Large PNG file for logo with transparency -->
<img src="company-logo.png" alt="Company Logo" />

✅ DO

<!-- Using JPEG for all photos -->
<img src="hero-banner.webp" alt="Team meeting" />

<!-- Using PNG for photos with no transparency -->
<img src="product-photo.webp" alt="Smartphone" />

<!-- Large PNG file for logo with transparency -->
<img src="company-logo.webp" alt="Company Logo" />