Image Optimisation
Definition
Reducing image file sizes while maintaining acceptable visual quality, improving page speed and user experience.
What is Image Optimisation?
Image optimisation is the process of reducing image file sizes to improve page loading speed while maintaining acceptable visual quality. It includes compression, resizing, format selection, and smart loading techniques.
Images often account for the majority of page weight, making optimisation one of the highest-impact performance improvements.
Why Image Optimisation Matters
Page Speed Impact
Images typically represent 50-70% of a page's total weight. Unoptimised images are often the primary cause of slow sites.
User Experience
Faster loading images mean faster pages and happier users.
Mobile Performance
Large images particularly hurt mobile users on slower connections and limited data plans.
SEO Benefit
Page speed affects search rankings. Optimised images contribute to better Core Web Vitals scores.
Hosting Costs
Smaller files reduce bandwidth costs and server load.
Key Optimisation Techniques
Compression
Reduce file size by removing unnecessary data. Lossy compression sacrifices some quality for smaller sizes; lossless preserves quality completely.
Proper Sizing
Serve images at the size they're displayed. A 2000px image displayed at 400px wastes bandwidth.
Format Selection
Different formats suit different images:
- JPEG – Photographs, complex images
- PNG – Graphics with transparency, simple graphics
- WebP – Modern alternative with better compression
- AVIF – Newest format, best compression but limited support
Responsive Images
Serve different image sizes based on screen size using srcset and sizes attributes.
Lazy Loading
Only load images when they're about to enter the viewport, prioritising above-fold content.
Tools for Image Optimisation
Compression Tools
- Squoosh (browser-based, excellent quality)
- TinyPNG/TinyJPG
- ImageOptim (Mac)
Build Pipeline
- Sharp for Node.js
- Imagemin for automation
- Next.js Image component
CDN-Based
- Cloudinary
- Imgix
- Cloudflare Polish
Best Practices
- Compress all images before upload
- Use responsive images for different screen sizes
- Implement lazy loading for below-fold images
- Consider WebP with fallbacks for older browsers
- Set proper dimensions to avoid layout shift