Images are typically 60-80% of a page’s weight. Optimizing them does more for performance than almost any other change. The job has three parts: pick the right format, compress aggressively, and lazy-load so the browser only fetches what’s actually visible. This guide covers all three with practical implementation on cPanel hosting.
Format selection
| Format | Best for | Notes |
|---|---|---|
| WebP | Almost everything in 2026 | 25-35% smaller than JPEG at same quality; universally supported |
| AVIF | Cutting-edge optimization | 50% smaller than JPEG; ~95% browser support, getting universal |
| JPEG | Photographs as fallback | Use when WebP/AVIF unsupported |
| PNG | Images needing transparency, screenshots, logos with sharp edges | Always larger than equivalent WebP |
| SVG | Logos, icons, illustrations | Vector — scales to any size; tiny file |
| GIF | Almost nothing in 2026 | Use MP4/WebM video instead |
Default 2026 recommendation: serve WebP as primary with JPEG fallback for the few old browsers that need it. AVIF for sites pushing performance.
Sizing images correctly
The most common mistake: uploading a 4000×3000px photo from a phone, then displaying it at 800×600. Browser still downloads the full 4000px file, then resizes. Wasteful.
Resize before uploading:
- Hero / featured images — 1920px wide max.
- Content images — 800-1200px wide max.
- Thumbnails — 300-400px wide.
- Avatars / icons — 100-200px wide.
For retina displays serve 2x dimensions. So a 600px display image gets a 1200px file. Bigger than non-retina but much smaller than a 4000px source.
Compression settings
JPEG/WebP quality is a slider 0-100. Sweet spots:
- Quality 75-85 — Visually identical to original for most photos. Big file size reduction.
- Quality 60-75 — Slight perceptible difference on close inspection. Significant file size win.
- Quality 90+ — Barely smaller than original. Rarely worth it.
- Below 50 — Noticeable artifacts; only for ultra-budget contexts.
80 is a good universal default. Test by viewing at display size — if you can’t see degradation in normal viewing, you’ve compressed enough.
WordPress plugins for image optimization
ShortPixel
- Free tier 100 images/month, paid scales.
- Converts to WebP and AVIF.
- Bulk optimizes existing library.
- Lossy/glossy/lossless modes.
Imagify
- From WP Rocket team. 200MB free monthly.
- WebP conversion.
- Simpler than ShortPixel but fewer options.
EWWW Image Optimizer
- Free tier compresses locally (no quota).
- WebP requires premium.
- Excellent for unlimited bulk optimization.
LiteSpeed Cache built-in
- If you’re on iWebVault’s LiteSpeed servers, LSCache plugin includes image optimization via QUIC.cloud.
- Free quota generous for most sites.
- Auto WebP conversion and serving.
Don’t run multiple optimization plugins simultaneously. Pick one.
Lazy loading
“Don’t load images that aren’t visible yet.” Browser defers fetching images below the fold until user scrolls toward them. Major saving for long pages.
Native lazy loading
<img src="image.webp" loading="lazy" width="800" height="600" alt="...">
The loading="lazy" attribute is supported by all modern browsers. WordPress 5.5+ adds this automatically to all images.
Critical: DO NOT lazy-load above-the-fold images. The hero image should load immediately, not after JavaScript runs. If your theme lazy-loads everything including hero, LCP scores suffer.
Lazy loading plus dimensions
Always specify width and height — even when CSS controls actual display size. Without dimensions, browser doesn’t know to reserve space, causing layout shift (bad CLS) when the image loads.
Responsive images with srcset
Modern browsers can pick from multiple image sizes based on device. WordPress generates these automatically; if you’re hand-coding:
<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: 600px) 100vw, 800px"
loading="lazy"
width="800"
height="600"
alt="...">
Mobile devices download the 400px version; desktops get 1200px. Massive bandwidth savings.
Picture element for format fallback
Serve AVIF where supported, WebP otherwise, JPEG as fallback:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="..." loading="lazy" width="800" height="600">
</picture>
Browser picks the first format it supports. WordPress with optimization plugins generates this automatically.
Optimizing existing images in bulk
For sites with thousands of existing images:
- Backup uploads folder before bulk operations.
- Install image optimization plugin of choice.
- Run bulk optimization — may take hours for large libraries.
- Verify a sampling of optimized images look correct.
- Test pages — make sure WebP serving works.
Most plugins keep original backups so you can revert if quality looks wrong.
Server-side conversion with ImageMagick
If ImageMagick is installed (see PHP extensions guide), you can convert via SSH:
# Convert single image
convert input.jpg -quality 80 output.webp
# Bulk convert all JPGs in current folder
for f in *.jpg; do convert "$f" -quality 80 "${f%.jpg}.webp"; done
Useful for non-WordPress sites or one-off batch jobs.
Common questions
“My PageSpeed says ‘serve images in next-gen formats’ — did the plugin not work?” Check WebP is being served. Browser DevTools Network tab — image requests should return .webp content-type. If still JPEG, plugin may need configuration or .htaccess update.
“Plugin broke image display.” Try a different plugin. Some have edge cases with specific themes / page builders.
“How small can I get JPEG images?” Most can hit 50-100KB for typical 1000px wide content images at quality 80. Hero images 100-200KB. Tiny thumbnails under 20KB.
“Does optimizing affect SEO?” Positively — faster pages rank better. Image search uses the original quality; alt text matters far more than image format for image SEO.
“Should I use a CDN with image optimization?” Yes, together they multiply. CDN serves images from edge; optimization makes them small. Use both. CDN basics.
What’s next
- Why image speed matters: Core Web Vitals.
- Caching at browser level: Browser caching.
- CDN basics: CDN guide.
Image optimization is the highest-ROI performance work for most sites. WordPress + LiteSpeed Cache or ShortPixel + sensible upload sizing handles it for nearly everyone. The result: pages load faster, ranking improves, mobile users on slow connections actually stay long enough to see your content.
Was this helpful?
Thanks for your feedback!