Images comprise 50-70% of average page weight making image optimisation critical for WordPress performance. Proper optimisation reduces file sizes 60-80% without visible quality loss through compression, appropriate formats, responsive delivery, and lazy loading dramatically improving load times and WordPress speed.
Compression reduces file sizes maintaining visual quality. Lossy compression removes imperceptible data; lossless compression optimises file structures without quality loss.
Before Upload:
WordPress Plugins:
Compression Settings:
Aggressive compression dramatically improves Core Web Vitals particularly LCP scores.
Serve appropriately-sized images to different devices avoiding wasted bandwidth sending desktop images to mobile.
WordPress Responsive Images:
// WordPress automatically generates:
// - thumbnail (150x150)
// - medium (300x300)
// - large (1024x1024)
// - full (original)
// Add custom sizes:
add_image_size( 'hero', 1920, 1080, true );
add_image_size( 'mobile-hero', 800, 600, true );
Srcset Attributes:
<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 adds srcset automatically when using wp_get_attachment_image().
WebP and AVIF provide superior compression versus JPEG/PNG reducing file sizes 25-35%.
WebP Implementation:
// Using WebP Express plugin
// Or Cloudflare Polish
// Serves WebP to supporting browsers
Fallback Strategy:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Fallback">
</picture>
AVIF Format:
Newest format with best compression but limited browser support. Use with WebP fallback.
Defer off-screen images until scrolling improving initial page load.
Native Lazy Loading:
<img src="image.jpg" loading="lazy" alt="Description">
WordPress 5.5+ adds loading="lazy" automatically.
JavaScript Solutions:
// Intersection Observer for custom control
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
}
});
});
images.forEach(img => observer.observe(img));
Comprehensive lazy loading implementation guide provides detailed techniques.
CDN distribution serves images from geographically nearest servers reducing latency and server load.
Image CDN Benefits:
Implementation:
Most CDNs integrate through WordPress plugins or URL rewriting serving all static assets including images.
Detailed CDN setup guide covers complete implementation.
Always specify image dimensions preventing layout shifts harming Core Web Vitals CLS scores.
Correct Implementation:
<img src="image.jpg" width="800" height="600" alt="Description">
Aspect Ratio CSS:
.image-container {
aspect-ratio: 16 / 9;
}
WordPress includes dimensions automatically when using media library properly.
What's best image format for WordPress?
JPEG for photographs, PNG for graphics needing transparency, WebP for modern browsers providing best compression. Use WebP with JPEG fallback achieving optimal balance. SVG for logos and icons provides resolution-independent graphics. Avoid GIF except simple animations; video formats prove more efficient for complex animations.
How much can I compress images without quality loss?
Compress images 60-80% without perceptible quality loss using proper tools and settings. JPEG 80-85% quality appears identical to originals for web viewing. PNG compression proves lossless maintaining perfect quality. Test compression viewing images at intended display sizes; imperceptible differences at display size prove acceptable regardless of zoomed inspection.
Should I use image optimization plugins?
Yes, image optimisation plugins dramatically simplify bulk optimisation and automate compression for uploads. Quality plugins like ShortPixel or Imagify handle compression, format conversion, and responsive image generation automatically. Manual optimisation proves tedious for large media libraries. Plugins provide consistent optimisation across all images maintaining performance standards efficiently.
Do images affect WordPress SEO?
Yes, images affect SEO through page speed (ranking factor), image search visibility, and user experience signals. Optimised images improve WordPress speed benefiting rankings. Descriptive filenames and alt text improve image search visibility and accessibility. Large unoptimised images slow pages harming rankings regardless of content quality. Strategic image optimisation supports comprehensive WordPress SEO efforts.
Related Image Optimisation Topics:
Written by the Performance Team at London Web Design.
