Responsive images: get srcset and sizes right for your layout
Build responsive image variants using real slot widths, pixel density, and browser-selected sources. Includes a complete HTML card example.
Image optimization,
explained.
For the people building a faster web. Practical guides to lighter images, better delivery, and the audits that point you in the right direction.
Build responsive delivery and stable layouts in real website components.
Next.js Image serving files that are too large? Check sizes first
Diagnose oversized Next.js Image downloads by matching sizes to grid columns, inspecting generated srcset, and separating source assets from delivery variants.
Stop images from causing Cumulative Layout Shift
Reserve image space with correct width, height, and aspect ratio. Fix shifting cards and article images without relying on smaller files alone.
Optimize a CSS background image that delays LCP
Diagnose late CSS hero backgrounds, choose markup or a matching preload, and keep mobile candidates from downloading unnecessarily.
Find oversized images with Chrome DevTools and currentSrc
Identify the image a browser actually downloaded, compare its slot and selected source, and capture a useful image audit without guessing from filenames.
Optimize WordPress images without adding another plugin
Prepare smaller media files locally, preserve originals, and check the theme’s responsive image output before replacing assets in WordPress.