より高速なウェブサイトのためにWebPを使用：実践ガイド

Introduction

Images are often the biggest bytes on a page. A single hero image can outweigh all your HTML, CSS, and JavaScript combined. For many websites, image optimization is the single most impactful performance improvement available.

WebP is a straightforward win. The format typically produces files 25-35% smaller than JPG and even more compared to PNG — without visible quality loss. Adopting WebP does not require changing your design or content strategy, just your image delivery.

This guide explains why WebP improves performance, which images to convert first, how to choose settings that avoid quality regressions, and how to serve WebP with safe fallbacks for older browsers.

Why WebP Improves Performance

What WebP is: a modern image format designed for efficient compression. It uses more advanced algorithms than JPG or PNG, achieving smaller file sizes at similar visual quality.

Smaller images mean:

• Faster downloads: Less data to transfer, especially impactful on mobile connections.
• Better LCP scores: Largest Contentful Paint improves when hero images load faster.
• Lower bandwidth costs: Reduced CDN and hosting expenses for high-traffic sites.
• Improved user experience: Pages render faster, reducing bounce rates.

The biggest wins come from:

• Large hero images and backgrounds
• Product photo galleries
• Content-heavy pages with multiple images

Small icons and already-optimized assets benefit less — the overhead is small, so percentage improvements matter less in absolute terms.

Pick Settings That Avoid Regressions

The goal is smaller files without visible quality loss. Different image types need different settings:

Photos (JPG sources)

• Mode: Lossy
• Quality: 75-85
• Resize: To actual display dimensions (not source dimensions)

For photos, lossy WebP at quality 80 typically looks identical to a high-quality JPG but is 25-35% smaller. See our JPG to WebP tutorial for details.

UI and Graphics (PNG sources)

• Mode: Lossless (or lossy at 90+)
• Quality: N/A for lossless; 90-95 for lossy
• Resize: Only if oversized

Graphics with sharp edges and flat colors need lossless or high-quality lossy to avoid artifacts. See our PNG to WebP tutorial.

Mixed Content

If an image has both photographic content and text/graphics (like a marketing banner), err toward higher quality to protect the text edges.

Workflow: Converting at Scale

For a single image, the process is simple. For an entire site, you need a workflow.

Batch Conversion

1. Gather source images: Collect the JPGs and PNGs you want to convert.
2. Convert in batches: Use img2webp.com to batch convert multiple files at once.
3. Download as ZIP: The converter packages multiple WebPs into a single download.
4. Verify quality: Spot-check a sample of converted images at 100% zoom.

Asset Pipeline Tips

• Keep originals: Store original JPG/PNG files for future editing. WebP is for delivery.
• Naming convention: Use consistent names (e.g., hero.webp alongside hero.jpg) for easy fallback setup.
• Automate if possible: For large sites, integrate conversion into your build process.

Serve WebP with Safe Fallbacks

WebP is supported by all modern browsers, but fallbacks ensure compatibility with the rare older browser.

The <picture> Element

The standard approach is to serve WebP with a JPG or PNG fallback:

<picture>
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" loading="lazy" />
</picture>

Browsers that support WebP load the smaller file. Others fall back to JPG. The loading="lazy" attribute defers loading for images below the fold.

CDN-Based Delivery

Many CDNs and image optimization services can automatically serve WebP to supported browsers:

• Cloudflare Polish
• Imgix
• Cloudinary
• Fastly Image Optimizer

These services detect browser support via the Accept header and serve the appropriate format automatically.

Testing Fallbacks

1. Test in a modern browser — you should see WebP in the network tab.
2. Test in Safari 13 or older (or use browser dev tools to disable WebP) — you should see the fallback.

Measuring the Impact

After converting to WebP, measure the results:

• Page weight: Use browser dev tools (Network tab) to compare total image bytes before and after.
• Core Web Vitals: Check LCP in Lighthouse, PageSpeed Insights, or Chrome UX Report.
• Real user metrics: If you have analytics, track load times and bounce rates.

Typical results: 20-40% reduction in image weight, 0.5-2 second improvement in LCP for image-heavy pages.

Summary

WebP is a low-effort way to improve website performance:

• 25-35% smaller files compared to JPG at similar quality
• Directly improves LCP and other Core Web Vitals
• Universal browser support with simple fallbacks for edge cases
• No design changes required — same images, smaller files

Start with your largest images (hero, products, backgrounds), convert in batches, and serve with <picture> fallbacks. The result is faster pages, lower bandwidth, and better user experience.