Images & media
Deliver suitable image files and choose loading behavior for the actual viewport.
Trusted resources
Use these primary references alongside the practical guides below.
Responsive image delivery
Understand image candidates and display sizing before investigating oversized downloads.
Read official reference · opens in a new tabBrowser-level lazy loading
Check loading behavior for visible images, offscreen content and reserved dimensions.
Read official reference · opens in a new tabA CSS background is the LCP image: investigate late discovery
Trace delayed hero background requests, compare semantic image markup and avoid indiscriminate preloading on WordPress templates.
Read the guideAn image-format quality checklist for WordPress content
Compare alternative image exports by transparency, text clarity and product detail before processing a media library.
Read the guideAudit video embeds without delaying the main article
Inspect video loading, reserved space and playback behavior on a WordPress article before choosing an embed strategy.
Read the guideImages break only through the CDN: trace the URL pipeline
Diagnose missing image derivatives, rewrite errors and CDN-only failures without hiding the underlying delivery problem.
Read the guideLazy loading audit: which WordPress images should wait?
Classify hero, article and gallery images before applying lazy loading, and verify the result on mobile.
Read the guideMobile downloads the desktop image: debug srcset and sizes
Inspect the chosen image candidate, rendered width and device pixel ratio to find oversized mobile image downloads.
Read the guideStop product galleries shifting when images and controls load
Investigate WooCommerce gallery layout shifts by reserving media space and testing thumbnails, zoom and variation changes.
Read the guideTransparent logos look wrong after optimization: a visual QA workflow
Diagnose halos, matte backgrounds and lost edge detail in optimized logos across light and dark WordPress themes.
Read the guideWhy your mobile WordPress page downloads desktop-sized images
Inspect the actual image selected on a phone and correct responsive-image sizing with a practical browser audit.
Read the guideWordPress image optimization: lighter files without a slower hero
A practical loading strategy for hero images, galleries and the space they occupy.
Read the guide