Mantys CoreImages
srcset and sizes, the LCP image, background heroes and SVG: serving the right image, at the right size, at the right moment.
My hero is a background image: why it slows LCP and how to fix it (Divi, Elementor)
A CSS background image is invisible to the browser until the stylesheet is downloaded and applied, it has no srcset, and builders often lazy load it with JavaScript, so the hero starts late; the best fix is a real image, and the next best is a preload per device and no lazy loading on that section.
The LCP image is not the same on mobile and desktop: how to preload the right one
When the largest image differs between phone and desktop, a single preload makes one of them download an image it will not show, or download the hero twice, and the fix is one preload per device, with the same srcset and sizes as the image, placed right after the viewport tag.
Inline SVG: perfect for an icon, poison for an illustration
An SVG is not one single kind of image. A small icon inline is ideal, a heavy illustration inline bloats your page, and a raster photo hidden inside an SVG is the worst of all three. Here is how to tell them apart and pick the right format every time.
Why does PageSpeed Insights still say “Properly size images” when I have a srcset?
Srcset offers the browser a list of sizes, but it is the sizes attribute that tells it which one to pick. If sizes is missing, wrong, or ignored, the browser downloads the largest image in the list, and PageSpeed flags it, srcset or not.