Optimize Your Images
Shrink your images without losing quality.
What this covers: Image format selection (WebP, AVIF, JPEG, PNG, SVG), responsive sizing with srcset, compression tools and target file sizes, lazy loading implementation, and WordPress-specific automation plugins.
Who it’s for: Site owners and developers whose pages are slow due to large or unoptimized images.
Key outcome: You’ll have images converted to optimal formats, properly sized for each device, compressed to target file sizes, and lazy-loaded below the fold — cutting page weight significantly.
Time to read: 5 minutes
Part of: Technical Performance series
Smaller images, faster pages. Here’s the quick version.
Image Size and Format Targets
Most page weight comes from images. A single unoptimized hero image can be larger than all your HTML, CSS, and JavaScript combined.
Images should be:
- As small as possible (file size)
- As large as needed (dimensions)
- In the right format
Format Cheat Sheet
| Format | Best For | Transparency | Size |
|---|---|---|---|
| WebP | Everything (use this) | Yes | Smallest |
| AVIF | Photos (if supported) | Yes | Even smaller |
| JPEG | Photos (fallback) | No | Medium |
| PNG | Graphics with transparency | Yes | Large |
| SVG | Icons, logos, illustrations | Yes | Tiny (vector) |
Default choice: WebP. 90%+ browser support. Significantly smaller than JPEG.
Sizing Rules
An image displayed at 400px wide doesn’t need to be 4000px. Serve the right size for each screen and you’ll cut page weight dramatically.
- Don’t upload 4000px images for 400px displays
- Create sizes for: mobile (400px), tablet (800px), desktop (1200px)
- Use
srcsetto serve the right size
Compression
Compression removes visual data your eyes can’t detect. At quality 80–85, WebP images look identical to uncompressed originals but weigh 60–70% less.
Tools
- Squoosh – squoosh.app (free, browser-based)
- ImageOptim – Mac app (free)
- TinyPNG – tinypng.com (free, web-based)
- Sharp – Node.js library for automation
Settings
- JPEG/WebP quality: significant (good balance)
- Strip metadata (EXIF data adds size)
- Target: Under 200KB for hero images, under 100KB for thumbnails
Lazy Loading
Don’t load images until they’re needed:
Exception: Don’t lazy load above-the-fold images (hero, header). They need to load immediately for LCP.
Dimensions in HTML
Always include width and height to prevent layout shift:
Image CDN
A CDN serves images from servers closest to your visitors. If your host is in New York and a visitor is in Tokyo, a CDN delivers from a Tokyo edge server instead of crossing the Pacific. Many also auto-optimize on the fly:
- Cloudflare – Free tier includes image improvement
- Cloudinary – On-the-fly transforms
- imgix – URL-based resizing
Compression Plugins
Install Imagify or ShortPixel. They auto-compress uploads and convert to WebP.
Quick Checklist
Run through this before launching any page. Missing even one item can undo the gains from the others.
- ☠All images in WebP format
- ☠Multiple sizes with
srcset - ☠Compressed to under 200KB
- ☠Lazy loading on below-fold images
- ☠Width/height attributes set
- ☠Served from CDN
Automate Image Compression Going Forward
Don’t optimize images manually every time you upload. Install a WordPress plugin that handles compression and format conversion on upload.
After setup, run your homepage through PageSpeed Insights. Expand “Properly size images” to confirm nothing is flagged.
The Image Optimization Checklist
- All images are under 200KB (ideally under 100KB for most)
- Images are in WebP format with JPEG/PNG fallbacks
- Lazy loading is enabled for below-fold images
- PageSpeed Insights shows no “Properly size images” warning
Sources
Image Optimization Questions Answered
What image format should I use on my website?
WebP for photographs and complex images (30% smaller than JPEG at equal quality). SVG for logos and icons. PNG only when you need transparency and WebP is not supported. AVIF offers even better compression than WebP but browser support is still growing.
What is the ideal image file size for web?
Hero images: under 200KB. Content images: under 100KB. Thumbnails: under 30KB. Total image weight per page should stay under 1MB. If your hero image exceeds 200KB, it is likely hurting your LCP score and page load time.
Should I use lazy loading on all images?
No. Never lazy load your hero image or any image visible in the viewport on initial page load. Lazy loading these delays LCP. Add loading=”lazy” only to images below the fold. Add loading=”eager” and fetchpriority=”high” to your LCP image.
Does WordPress automatically optimize uploaded images?
WordPress creates multiple sizes of uploaded images but does not compress them or convert formats. Install an optimization plugin like ShortPixel, Imagify, or Smush to auto-compress uploads to WebP format. ShortPixel”s free tier handles 100 images per month.
✓ Your Images Are Fully Optimized When
- All images are served in WebP (or AVIF) format with proper fallbacks for older browsers
- Every <img> tag includes explicit width and height attributes to prevent layout shift
- Below-the-fold images use loading=”lazy” and above-the-fold hero images use fetchpriority=”high”
- No single image file exceeds 200KB after compression (check in DevTools Network tab)
- Responsive srcset attributes serve appropriately sized images for mobile, tablet, and desktop
Test it: Run PageSpeed Insights on your heaviest page — the “Serve images in next-gen formats” and “Properly size images” audits should both pass with green scores.