Image Optimization Guide — Improve Page Speed with WebP Conversion
Why Image Optimization Matters
Images account for an average of 40–60% of a web page's total transfer size. Optimizing images is one of the most effective ways to improve page load speed.
Google's PageSpeed Insights (PSI) frequently flags unoptimized images as "opportunities for improvement." Among the Core Web Vitals, LCP (Largest Contentful Paint) measures how quickly the largest content element appears, and hero image optimization directly impacts this score.
Improving load speed not only enhances user experience but also positively affects SEO rankings.
Comparing Image Formats
Here's a comparison of the major image formats used on the web:
| Format | Compression | Transparency | Animation | Browser Support | Primary Use |
|---|---|---|---|---|---|
| JPEG | Lossy | No | No | All | Photos |
| PNG | Lossless | Yes | No | All | Logos, screenshots |
| GIF | Lossless | Yes | Yes | All | Simple animations |
| WebP | Both | Yes | Yes | 97%+ | General (recommended) |
| AVIF | Lossy | Yes | Yes | 93%+ | High compression needs |
| SVG | Vector | Yes | Yes | All | Icons, shapes |
JPEG
The most widely used format for photographs. Lossy compression achieves high compression ratios, but repeated compression and saving degrades quality. It does not support transparency.
PNG
Lossless compression ensures no quality loss, and it supports transparency. Ideal for logos, screenshots, and text-heavy images, but file sizes tend to be large for photographs.
WebP
Developed by Google, WebP combines the strengths of both JPEG and PNG. It supports both lossy and lossless compression, as well as transparency and animation.
Benefits of Converting to WebP
WebP can reduce file sizes by 25–35% compared to JPEG and up to 80% compared to PNG.
Real-World Compression Examples
| Original Image | JPEG (Quality 85) | WebP (Quality 80) | Reduction |
|---|---|---|---|
| Landscape photo (4000×3000) | 2.1 MB | 1.4 MB | 33% |
| Product photo (1200×800) | 450 KB | 290 KB | 36% |
| Screenshot (1920×1080) | 680 KB | 180 KB | 74% |
WebP's compression efficiency is particularly impressive for screenshots and images with large areas of uniform color.
WebP Quality Settings
The WebP quality parameter ranges from 0 to 100. Recommended values by use case:
| Use Case | Recommended Quality | Reason |
|---|---|---|
| Thumbnails | 60–70 | Degradation is not noticeable at small display sizes |
| General images | 75–85 | Good balance between quality and file size |
| High-quality photos | 85–95 | Minimizes visual degradation |
| Lossless | 100 | Larger file size but no quality loss |
Compression Techniques
Lossy Compression Tips
Lossy compression reduces file size by removing information that is imperceptible to the human eye.
- Appropriate quality level: Saving at around quality 80 produces no noticeable visual degradation for most use cases
- Chroma subsampling: A technique that reduces color information. 4:2:0 is common and significantly reduces file size
- Progressive rendering: Displays a rough overview first, then gradually sharpens. Improves perceived speed
Lossless Compression Tips
Methods that reduce file size without any quality degradation:
- Remove metadata: Delete EXIF data (date, GPS coordinates, camera info). Also recommended for privacy protection
- Optimize color palette: For images with few colors, optimize the palette size
- PNG optimization tools: Use dedicated tools like pngquant and optipng
Implementing Responsive Images
Serving appropriately sized images based on device screen size prevents unnecessary data transfer on mobile devices.
Using srcset and sizes
<img
src="image-800.webp"
srcset="
image-400.webp 400w,
image-800.webp 800w,
image-1200.webp 1200w,
image-1600.webp 1600w
"
sizes="
(max-width: 640px) 100vw,
(max-width: 1024px) 50vw,
33vw
"
alt="Product photo"
width="800"
height="600"
>
This specification allows the browser to automatically select the optimal image based on screen size and device pixel ratio.
Using the picture Element for Format Negotiation
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Landscape photo" width="800" height="600">
</picture>
This serves AVIF to supported browsers, WebP to WebP-capable browsers, and falls back to JPEG for others.
Lazy Loading
Loading images outside the viewport later can dramatically improve initial page load speed.
Native Lazy Loading
<!-- Add loading="lazy" to below-the-fold images -->
<img src="below-fold.webp" loading="lazy" alt="Description" width="800" height="600">
<!-- Do NOT add it to above-the-fold images (impacts LCP) -->
<img src="hero.webp" alt="Main image" width="1200" height="600">
Important: Never set loading="lazy" on LCP elements (main images at the top of the page). Lazy loading will worsen your LCP score.
Priority Control with fetchpriority
<!-- Load hero image with high priority -->
<img src="hero.webp" fetchpriority="high" alt="Main image" width="1200" height="600">
<!-- Load decorative images with low priority -->
<img src="decoration.webp" fetchpriority="low" loading="lazy" alt="" width="200" height="200">
Preventing CLS (Layout Shift)
Layout shifts caused by image loading negatively impact the Core Web Vitals CLS score.
Always Specify width and height
<!-- Specifying width and height lets the browser reserve space in advance -->
<img src="photo.webp" width="800" height="600" alt="Photo">
Use aspect-ratio
.responsive-image {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
}
Optimization Checklist
A summary of items to verify when optimizing images for your website:
Format Selection
- Are photos converted to WebP (or AVIF)?
- Are logos and icons using SVG?
- Is a fallback provided for unsupported browsers?
Size Optimization
- Are images not excessively larger than their display size?
- Are 2x images prepared for Retina displays?
- Are multiple sizes provided via srcset?
Delivery Optimization
- Is
loading="lazy"set on below-the-fold images? - Is
fetchpriority="high"set on the hero image? - Are images served through a CDN (Content Delivery Network)?
Quality and CLS
- Is an appropriate compression quality set (75–85 as a guideline)?
- Do all images have
widthandheightspecified? - Has unnecessary metadata (EXIF, etc.) been removed?
Conclusion
Image optimization is the highest return-on-investment measure for improving website performance. Simply converting to WebP, setting appropriate sizes, and implementing lazy loading can produce dramatic improvements for most sites. With online image conversion and compression tools, you can easily start optimizing without specialized knowledge.