Images are the biggest contributor to page weight — accounting for over 50% of a typical webpage's total size. Optimizing them is the fastest way to improve your site speed and Core Web Vitals scores.
Why Image Optimization Matters
| Metric | Unoptimized | Optimized | Improvement |
|---|---|---|---|
| Page size | 3.2 MB | 850 KB | 73% smaller |
| LCP | 4.1s | 1.8s | 56% faster |
| Load time (3G) | 8.5s | 3.2s | 62% faster |
| Bandwidth cost | $0.30/GB | $0.08/GB | 73% savings |
Every millisecond counts — a 1-second delay in page load reduces conversions by 7%.
1. Choose the Right Image Format
WebP (Recommended)
WebP provides superior compression compared to JPEG and PNG:
| Format | File Size | Quality |
|---|---|---|
| JPEG | 100 KB | Baseline |
| PNG | 240 KB | Lossless |
| WebP | 45 KB | Visually identical (lossy) |
| WebP | 85 KB | Lossless |
WebP is supported by 97% of browsers. For the remaining 3%, serve JPEG/PNG fallbacks.
AVIF (Next-Gen)
AVIF offers even better compression than WebP (20-30% smaller) but has lower browser support (~92%). Use AVIF as a secondary option for supported browsers.
When to Use Each Format
| Image Type | Best Format | Why |
|---|---|---|
| Photos | WebP (lossy) | 25-35% smaller than JPEG |
| Screenshots | WebP (lossless) | Smaller than PNG |
| Logos with text | SVG | Scalable, tiny file size |
| Icons | SVG or WebP | Vector is always better |
| Product photos | WebP (lossy) | Quality + size balance |
2. Implement Automatic WebP Conversion
Via LiteSpeed Cache (GetHost.One)
If you're on a LiteSpeed server (like GetHost.One), LiteSpeed Cache can automatically convert images to WebP:
- Go to LiteSpeed Cache → Image Optimization
- Click "Send Optimization Request" for all images
- The server automatically serves WebP to supported browsers
- JPEG/PNG fallback is handled automatically
Via Plugin
If your server doesn't support server-level conversion:
- ShortPixel — automatic WebP conversion + CDN delivery
- Imagify — one-click bulk optimization
- EWWW Image Optimizer — free, supports WebP and AVIF
- WebP Express — lightweight, focused on WebP delivery
3. Configure Proper Compression
Quality Settings (Visual Lossless)
| Image Type | Quality Setting | File Size Reduction |
|---|---|---|
| Photographs | 80-85% | 70-80% smaller |
| Product images | 80-85% | 60-75% smaller |
| Screenshots | 85-90% | 50-65% smaller |
| Background images | 70-80% | 75-85% smaller |
At 80% quality, most images are visually indistinguishable from the original.
Bulk Optimization Workflow
- Before uploading: Compress with TinyPNG or Squoosh
- Existing images: Run a bulk optimization plugin (ShortPixel, Imagify)
- New images: Enable automatic compression on upload
4. Implement Lazy Loading
Lazy loading defers off-screen images so they only load when the user scrolls near them.
WordPress Native Lazy Loading
WordPress includes built-in lazy loading since version 5.5:
<!-- Automatically added by WordPress -->
<img src="image.jpg" loading="lazy" width="800" height="600" alt="Description" />
LiteSpeed Cache Lazy Loading
LiteSpeed Cache offers enhanced lazy loading with:
- Image placeholders (blurry or dominant color)
- Iframe lazy loading (YouTube embeds, maps)
- Exclude above-the-fold images from lazy loading
- Add CSS background-image lazy loading
Important: Never Lazy Load LCP Images
Above-the-fold images (especially the Largest Contentful Paint element) should load immediately:
<!-- LCP image: load immediately -->
<img src="hero.webp" fetchpriority="high" width="1200" height="600" alt="Hero" />
<!-- Below fold: lazy load -->
<img src="gallery-photo.webp" loading="lazy" width="800" height="600" alt="Gallery photo" />
5. Serve Images via CDN
A CDN (Content Delivery Network) serves images from servers geographically closer to your visitors, reducing latency.
CDN Performance Impact
| Region | Without CDN | With CDN | Improvement |
|---|---|---|---|
| Local | 50ms | 50ms | Same |
| Same continent | 150ms | 60ms | 150% faster |
| Cross-continent | 400ms | 100ms | 300% faster |
| Asia to US | 350ms | 120ms | 190% faster |
GetHost.One includes free Cloudflare CDN integration on all plans.
6. Set Proper Image Dimensions
Never let the browser resize images. If your content area is 800px wide, upload images at exactly 800px (or use responsive images):
<!-- Responsive images -->
<img
src="image-800.webp"
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
width="800"
height="600"
alt="Responsive image example"
/>
Always set explicit width and height attributes to prevent Cumulative Layout Shift (CLS).
Image Optimization Checklist
- Convert all images to WebP
- Set compression quality to 80-85%
- Enable lazy loading for below-fold images
- Set
fetchpriority="high"on LCP image - Add explicit width/height to all images
- Configure CDN for image delivery
- Set responsive image srcset/sizes
- Remove unnecessary image metadata (EXIF)
- Use SVG for icons and logos
- Monitor image loading in Lighthouse
FAQ
Does WebP work on all browsers?
WebP is supported by 97% of browsers. For Safari (which supports WebP since version 14), fallback to JPEG using the <picture> element.
How much can I expect to save with image optimization?
Most sites reduce total page weight by 60-80% with proper image optimization.
Should I use a CDN for images?
Yes. CDN delivery reduces load times by 30-60% for international visitors.
Can I automate image optimization?
Yes. LiteSpeed Cache (included with GetHost.One) provides automatic WebP conversion and lazy loading with zero manual effort.
Conclusion
Image optimization is the lowest-hanging fruit for WordPress performance. Converting to WebP, enabling lazy loading, and serving via CDN can cut your page weight by 70% or more.
GetHost.One includes LiteSpeed Cache with automatic WebP conversion — set it and forget it, all on a lifetime plan.