For mobile pages, choose image sources that match the layout and display density without sending desktop-sized assets unnecessarily. Responsive image markup helps the browser choose among files you provide. Compression helps with bytes, but discovering the hero promptly and reserving its space remain separate requirements.
Separate CSS width from source pixels
A 360 CSS-pixel image may benefit from a higher-resolution source on a dense display. That does not mean every visitor needs the largest master file. Provide appropriate width candidates and a sizes description that reflects the actual layout, including columns and gutters. The browser makes the final selection based on available information and conditions.
Build variants for a real placement
Illustrative example: a card occupies most of a narrow screen but only one third of a desktop grid. Prepare a few useful source widths rather than one file for every possible viewport. Check the image URL chosen at both layouts. If mobile still downloads the largest source, inspect sizes and the markup before lowering quality further.
Keep initial loading focused
Do not lazy-load the mobile LCP image. Defer suitable off-screen images, reserve their aspect ratios and inspect late layout movement. A preload is not automatically needed for every visible image: use it for a demonstrated discovery problem and avoid downloading a candidate different from the one the image element selects.
Check a constrained connection
Compare before and after using the same viewport and cache conditions. Look at request timing, transferred bytes and visual detail, not just the score. Field data can reveal device and network patterns a desktop simulation misses. If the image finishes downloading but appears late, investigate rendering work rather than assuming another quality reduction will solve the delay.