Images account for 60-80% of page weight on most WordPress sites. Optimize them correctly and you cut load time in half. Do it wrong and you trade quality for minimal gains—or break your site entirely.
At Rocket.net, I have seen image optimization done brilliantly and terribly. Here is the complete process—from format selection to implementation—that actually works.
Choosing the Right Format
WebP: The Default Choice
WebP delivers 25-35% smaller files than JPEG at equivalent quality. Modern WordPress (5.8+) supports WebP natively.
When to use WebP:
- All photos, screenshots, graphics
- Hero images, product photos, blog featured images
Browser support: 96%+ coverage. Safari added full support in macOS Big Sur / iOS 14. The remaining 4% gets JPEG fallback automatically.
JPEG: The Fallback
Still valid for:
- Maximum compatibility requirements
- Legacy systems
- When WebP conversion breaks (rare)
PNG: Transparency Only
Use PNG only when you need transparency. For logos, icons with alpha channels. For everything else, WebP.
SVG: Icons and Logos
Scalable, tiny file size. Use for logos, icons, simple graphics. WordPress blocks SVG uploads by default—use Safe SVG plugin or manual upload.
AVIF: The Future (With Caveats)
AVIF compresses 50% better than WebP. But:
- Encoding is CPU-intensive
- Browser support is ~85% (missing older Safari)
- WordPress does not support AVIF natively yet
Verdict: WebP now, monitor AVIF for 2025 adoption.
Scaling Before Uploading
The biggest image mistake: uploading 4000px wide photos for 800px display.
Resize first:
- Hero images: 1920px wide max
- Content images: 1200px wide max
- Thumbnails: 800px wide
- Icons: 200px or SVG
Use ImageOptim (Mac), Squoosh (web), or GIMP. Do not rely on WordPress to resize—thumbnails add bloat.
WordPress Implementation Options
Option 1: ShortPixel (Recommended)
ShortPixel converts uploads to WebP automatically and serves them via .htaccess rewrite rules.
Pros:
- Handles conversion + delivery
- .htaccess fallback for non-WebP browsers
- Bulk optimization of existing library
Setup:
- Install ShortPixel → Settings → WebP
- Enable “<.htaccess> WebP delivery”
- Run bulk optimization
Option 2: LiteSpeed Cache (Free)
If your host runs LiteSpeed server:
- Image Optimization → Request Key
- Generate WebP automatically
- Uses LS server-level delivery (faster than PHP)
Best for: Sites on LiteSpeed hosting (Rocket.net uses LiteSpeed).
Option 3: WebP Express (Free)
Conversion only—does not handle delivery. Requires server configuration or CDN integration to serve WebP.
Verdict: Use ShortPixel or LiteSpeed if available.
Responsive Images with Srcset
WordPress generates multiple sizes (thumbnail, medium, large, full). Use them via srcset:
<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, 800px" alt="Description">WordPress does this automatically if your theme uses the_post_thumbnail() or block images.
Test: DevTools → Network → check images load with size suffix (-400x300.jpg not full size).
Lazy Loading Native
WordPress 5.5+ adds loading="lazy" to images automatically. No plugin needed.
Exceptions: Above-the-fold images should NOT lazy load (LCP delay).
Disable on first viewport images: Add skip-lazy class or use Perfmatters to exclude.
Fallback: Native lazy loading has 95%+ browser support. For old browsers, images load normally—no harm done.
Background Images: The Hard Problem
CSS background images do not support native lazy loading. Solutions:
JavaScript libraries: lazysizes, vanilla-lazyload
LiteSpeed Cache: Lazy load background images (CSS-based)
Critical: Hero background images should never lazy load. They block Largest Contentful Paint.
Video Thumbnails and Embeds
YouTube embeds load 500KB+ of JavaScript before users click play.
Fix:
- Use thumbnail image + lightbox
- Ninja Forms YouTube embed optimization
- Lazy load iframe
<iframe loading="lazy" src="..."></iframe>CDN Considerations
Images served from origin = slower than edge. Use a CDN:
- Cloudflare: Polish (WebP conversion) on Pro+
- Rocket.net: Cloudflare Enterprise included—Polish active
- KeyCDN: Image processing add-on
Configure CDN to serve WebP automatically. Cloudflare Polish detects WebP support and serves accordingly.
Monitoring and Testing
PageSpeed Insights: Look for “Serve images in next-gen formats” and “Efficiently encode images.”
WebPageTest: Filmstrip view shows when images load. Lazy loading should delay below-fold images 500ms+.
DevTools → Network: Check type column. WebP = success. JPEG/PNG = needs optimization.
The Complete Checklist
- Upload WebP when possible
- Scale images before upload (no 4000px uploads)
- Use ShortPixel or LiteSpeed for conversion
- Confirm responsive srcset works
- Lazy load below-fold images only
- Use CDN for edge delivery
- Test Pagespeed Insights monthly
Bottom Line
Image optimization is the highest-ROI speed fix. WebP + proper sizing + lazy loading cuts 50%+ of page weight.
Start with WebP conversion—everything else builds on that. Your hosting matters too: Rocket.net’s Cloudflare Enterprise optimizes delivery automatically.
Need help auditing your image setup? My speed diagnostic checks format, sizing, lazy loading, and CDN configuration.