Images Are the Problem
Images account for 50-75% of total page weight on most websites. A single unoptimized image can add 2-3 seconds to your page load time. The good news is that image optimization delivers the biggest speed improvements with the least effort.
I optimized images for a restaurant website last month. The homepage had 8 images totaling 14MB. After optimization, the same images totaled 800KB - a 94% reduction. The page load time dropped from 8 seconds to 1.8 seconds.
Technique 1: Compression
Image compression reduces file size by removing unnecessary data. There are two types:
- Lossy compression: Removes some image data for significant size reduction. Quality loss is usually imperceptible. Tools: TinyPNG, ShortPixel, Imagify.
- Lossless compression: Reduces file size without any quality loss. Smaller size reduction but zero quality impact. Tools: OptiPNG, PNGOUT.
For most web images, lossy compression at 80-85% quality provides the best balance of size and quality. The human eye cannot detect the difference, but the file size reduction is dramatic.
Technique 2: Proper Sizing
Do not upload images larger than they will be displayed. If your content area is 800px wide, do not upload a 4000px image. Resize images to their actual display dimensions before uploading.
Common display sizes:
- Blog post featured image: 1200 x 630 pixels
- Product image: 800 x 800 pixels
- Hero banner: 1920 x 1080 pixels
- Thumbnail: 300 x 300 pixels
Technique 3: Modern Formats
Modern image formats provide better compression than traditional JPEG and PNG:
- WebP: 25-50% smaller than JPEG with same quality. Supported by all modern browsers.
- AVIF: 50% smaller than JPEG. The newest format with growing browser support.
- SVG: For logos, icons, and illustrations. Infinitely scalable with tiny file sizes.
Convert images to WebP as the default format with JPEG as a fallback for older browsers. WordPress plugins like ShortPixel handle this automatically.
Technique 4: Lazy Loading
Lazy loading delays the loading of images until they enter the viewport. Images below the fold do not load until the user scrolls to them. This dramatically improves initial page load time.
WordPress 5.5+ has native lazy loading. For other platforms, use the native loading="lazy" attribute on img tags or a JavaScript lazy loading library.
Technique 5: Image CDNs
Image CDNs automatically optimize and serve images from the nearest server. Services like Cloudinary, Imgix, and Bunny Optimizer resize, compress, and convert images on-the-fly based on the user's device and connection speed.
Technique 6: CSS Sprites
For small icons and images, combine multiple images into a single sprite sheet. This reduces HTTP requests from dozens to one. While less common with modern CSS, sprites still provide measurable speed improvement for icon-heavy pages.
Technique 7: Proper File Naming
Descriptive file names help both SEO and organization:
- Good: blue-running-shoes-nike.webp
- Bad: IMG_20260115_143523.jpg
File names do not directly affect page speed, but organized file naming makes image management easier and supports SEO through keyword-relevant file names.
Technique 8: Responsive Images
Serve different image sizes for different devices. A mobile phone does not need the same image size as a desktop monitor. Use the srcset attribute to serve appropriately sized images based on the user's viewport.
Implementation Priority
- Compress all existing images (immediate impact)
- Convert to WebP format (25-50% additional reduction)
- Resize to proper dimensions (eliminates oversized images)
- Enable lazy loading (improves initial load time)
- Implement responsive images (serves optimal size per device)
Measuring the Impact
Before optimization, note your page load time and total page weight using GTmetrix. After optimization, retest and compare. Most sites see a 50-80% reduction in image-related page weight and a 2-4 second improvement in load time.