Images are almost always the largest contributor to page weight in Drupal sites. Here is our complete setup for image optimisation in 2025.
Image styles
Define a set of image styles that covers your use cases: thumbnail (150×150), card (400×250), hero (1200×630), and a 2x variant for each. Avoid generating styles on the fly for arbitrary sizes.
WebP conversion
The ImageMagick module supports WebP output natively. Add a WebP effect to each image style and configure Drupal to serve WebP with a JPEG fallback using the responsive_image module's picture element.
Lazy loading
Drupal 9+ applies loading="lazy" to below-the-fold images automatically via the lazy_image module or through the core image formatter settings. Make sure your hero image has loading="eager" and fetchpriority="high" to avoid LCP penalties.
CDN
Serve all images through Cloudflare or a similar CDN. Enable Cloudflare's Polish (automatic WebP conversion) as a fallback for images that escape your Drupal image style pipeline.
