Image Optimization #4

New Issue

2026-09-13T07:23:18Z

kevin.bataille commented

2026-09-13 07:23:18 +00:00

Problem Statement

Large images are the biggest contributor to page weight. Images below the fold load unnecessarily. Missing width/height attributes cause layout shifts.

Solution

Lazy load images, convert to modern formats (WebP/AVIF), optimize compression, add missing dimensions for CLS prevention, and provide placeholders while loading.

User Stories

As a site owner, I want to lazy load images, so that images below the fold load on demand
As a site owner, I want to convert images to WebP format, so that file sizes are smaller
As a site owner, I want to convert images to AVIF format, so that file sizes are even smaller
As a site owner, I want to optimize image compression, so that quality is maintained while size is reduced
As a site owner, I want to add missing width/height attributes, so that layout shifts are prevented
As a site owner, I want placeholder images while loading, so that users see content immediately
As a site owner, I want to lazy load iframes, so that embedded content loads on demand
As a site owner, I want to exclude specific images from lazy loading, so that above-the-fold images load immediately
As a site owner, I want images converted on upload, so that optimization is automatic
As a site owner, I want to see which images have been optimized, so that I can verify the changes
As a site owner, I want the optimization to work with external image CDN URLs, so that third-party images are handled correctly
As a site owner, I want to generate responsive image sizes, so that mobile users get smaller images

Implementation Decisions

Native lazy loading via loading="lazy" attribute
Format conversion using WordPress wp_image_editor APIs
Compression via Imagick/GD
WebP/AVIF generation on upload via WordPress hooks
Placeholder via low-quality image placeholder (LQIP) or CSS
Dimension detection via getimagesize or image editor

Testing Decisions

Test images have loading="lazy" attribute added
Test WebP files are generated
Test AVIF files are generated when supported
Test image compression reduces file size
Test width/height attributes are added
Test excluded images are not lazy loaded
Test with external CDN images

Out of Scope

CSS/JS optimization (separate issues)
Video optimization
Font optimization

Further Notes

Image optimization should work independently of other optimization features.

## Problem Statement Large images are the biggest contributor to page weight. Images below the fold load unnecessarily. Missing width/height attributes cause layout shifts. ## Solution Lazy load images, convert to modern formats (WebP/AVIF), optimize compression, add missing dimensions for CLS prevention, and provide placeholders while loading. ## User Stories 1. As a site owner, I want to lazy load images, so that images below the fold load on demand 2. As a site owner, I want to convert images to WebP format, so that file sizes are smaller 3. As a site owner, I want to convert images to AVIF format, so that file sizes are even smaller 4. As a site owner, I want to optimize image compression, so that quality is maintained while size is reduced 5. As a site owner, I want to add missing width/height attributes, so that layout shifts are prevented 6. As a site owner, I want placeholder images while loading, so that users see content immediately 7. As a site owner, I want to lazy load iframes, so that embedded content loads on demand 8. As a site owner, I want to exclude specific images from lazy loading, so that above-the-fold images load immediately 9. As a site owner, I want images converted on upload, so that optimization is automatic 10. As a site owner, I want to see which images have been optimized, so that I can verify the changes 11. As a site owner, I want the optimization to work with external image CDN URLs, so that third-party images are handled correctly 12. As a site owner, I want to generate responsive image sizes, so that mobile users get smaller images ## Implementation Decisions - Native lazy loading via loading="lazy" attribute - Format conversion using WordPress wp_image_editor APIs - Compression via Imagick/GD - WebP/AVIF generation on upload via WordPress hooks - Placeholder via low-quality image placeholder (LQIP) or CSS - Dimension detection via getimagesize or image editor ## Testing Decisions - Test images have loading="lazy" attribute added - Test WebP files are generated - Test AVIF files are generated when supported - Test image compression reduces file size - Test width/height attributes are added - Test excluded images are not lazy loaded - Test with external CDN images ## Out of Scope - CSS/JS optimization (separate issues) - Video optimization - Font optimization ## Further Notes Image optimization should work independently of other optimization features.

kevin.bataille added the phase-3 label 2026-09-13 07:28:53 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: kevin.bataille/wp-recache#4