Resolution and Format Choices
Offer multiple sources, describe the display size, and lazy-load images that are not the LCP candidate.
Density with srcset and sizes
srcset lists candidate widths; sizes tells the browser how wide the image will render so it can pick a file without downloading all of them.
Art direction and WebP with picture
Use media on <source> when the crop should change (art direction). When you ship WebP files, add a type="image/webp" source before the JPEG fallback. Always keep a fallback <img> with intrinsic dimensions and meaningful alt.
Lazy loading
Mark below-the-fold images with loading="lazy". Leave the largest above-the-fold hero or product shot eager so LCP is not delayed.