Image Optimization Best Practices
Image optimization uses modern formats, responsive sizing, compression, lazy loading, and CDNs to cut the heaviest bytes on a page. It speeds up LCP and reduces layout shift while keeping images sharp.
Best Practice: Image Optimization Best Practices
Images are usually the heaviest part of a web page, often accounting for the majority of transferred bytes, so optimizing them is one of the highest-leverage performance wins available. Image optimization combines modern formats (WebP, AVIF), correct dimensions for each device, sensible compression, lazy loading for offscreen media, and delivery through a CDN that can transform assets on demand. Done well, it cuts bytes dramatically, speeds up Largest Contentful Paint (often the hero image), and reduces cumulative layout shift, all while keeping images visually sharp. The payoff is concrete: faster pages convert better, rank better, and cost less in bandwidth. Google's web.dev guidance is a strong, vendor-neutral reference for the techniques.
Step-by-Step Implementation Guidance
- Audit current images for size, format, and dimensions.
- Convert photos to AVIF or WebP with appropriate quality settings.
- Serve responsive images with srcset and sizes so each device gets the right resolution.
- Set explicit width and height to reserve space and prevent layout shift.
- Lazy-load offscreen images with the native loading attribute.
- Deliver through an image CDN that resizes and compresses on the fly.
- Prioritize the LCP image with fetchpriority and avoid lazy-loading it.
Common Mistakes Teams Make When Ignoring This Practice
- Shipping huge originals scaled down by CSS.
- Using PNG or JPEG where AVIF or WebP would be far smaller.
- Omitting width and height, causing cumulative layout shift.
- Lazy-loading the hero image and delaying LCP.
- Ignoring art direction and serving one crop to all viewports.
Tools and Techniques That Support This Practice
- Squoosh, sharp, and ImageMagick for conversion and compression.
- Image CDNs such as Cloudinary, imgix, and Cloudflare Images.
- Next.js Image and similar framework components.
- Lighthouse and WebPageTest for verification.
How This Practice Applies to Different Migration Types
- Cloud Migration: Move image transformation to an edge CDN for on-the-fly resizing.
- Database Migration: Store image references, not blobs, and offload binaries to object storage.
- SaaS Migration: Confirm a new CMS supports modern formats and responsive variants.
- Codebase Migration: Adopt the new framework's optimized image component during the port.
Checklist
- Modern formats (AVIF/WebP) used.
- Responsive srcset and sizes set.
- Width and height declared.
- Offscreen images lazy-loaded.
- LCP image prioritized, not lazy.
- Delivery via an image CDN.
- Quality verified against compression.