Images account for 60-75% of a typical WordPress page weight. Optimizing images is the single highest-impact performance improvement you can make. Unoptimized images slow down your site, hurt SEO rankings, and increase bandwidth costs. Modern WordPress image optimization involves choosing the right format, compressing effectively, serving responsive sizes, and delivering through a CDN.
This guide covers how to optimize images for WordPress from capture to delivery.
Image Formats
Choose the right format for each image. JPEG is best for photographs with many colors. PNG is best for images with transparency or sharp edges like logos. WebP provides 25-35% smaller files than JPEG at the same quality and supports transparency. AVIF provides 50% smaller files than JPEG and supports HDR and transparency. Use WebP as your primary format for broad browser support, with AVIF as a progressive enhancement.
WordPress supports WebP natively since version 5.8. Plugins like WebP Express, Imagify, and ShortPixel handle automated WebP conversion and delivery.
Compression Plugins
Image compression plugins automatically optimize images when you upload them. ShortPixel offers lossy, glossy, and lossless compression options with WebP and AVIF conversion. Imagify provides tiered compression levels and a generous free quota. Smush compresses images in bulk and includes lazy loading. EWWW Image Optimizer provides server-side compression without API limits.
Configure your compression plugin to strip metadata from images. EXIF data, GPS coordinates, and camera information add kilobytes to every file without providing value to visitors.
Responsive Images
WordPress generates multiple image sizes for each uploaded image and outputs them using the srcset attribute. This ensures mobile users download small images while desktop users get high-resolution versions. Use the_post_thumbnail() in your theme to enable automatic responsive image output. The srcset attribute is supported by all modern browsers.
Register custom image sizes with add_image_size() and use them in your content templates. Remove unused default sizes with remove_image_size() to save disk space.
Lazy Loading
Lazy loading defers image loading until the image is about to enter the viewport. WordPress includes native lazy loading since version 5.5, using the loading=”lazy” attribute. This is sufficient for most sites. For more control, use a lazy loading plugin with intersection observer support, fade-in effects, and placeholder generation.
Exclude above-the-fold images from lazy loading to avoid delaying the Largest Contentful Paint (LCP) render. Use the skip-lazy class or a plugin setting to mark critical images.
CDN Delivery
Deliver images through a CDN for global performance. CDNs cache images at edge locations worldwide, reducing latency for international visitors. Cloudflare includes image optimization features with Polish. BunnyCDN offers image processing at the edge. Most image compression plugins include CDN delivery or integration with CDN services.
Configure long cache times for images since they change infrequently. Use a separate subdomain for media files to optimize CDN performance.
The Bottom Line
Image optimization is the highest-ROI performance improvement for WordPress sites. Use modern formats like WebP and AVIF, compress images with a dedicated plugin, leverage responsive images with srcset, enable lazy loading, and deliver through a CDN. These practices can reduce image weight by 70-80% with no visible quality loss.
