A product card rarely needs the same image file as a full-screen gallery. Responsive sources let the browser choose a suitable resource.
Measure rendered widths
List the image widths used by cards, article headers and galleries at common breakpoints. Export a small set of useful sizes from the original. Consider high-density screens without automatically sending the largest source to every device.
Describe the layout accurately
Use srcset and sizes consistently with the CSS layout. An inaccurate sizes value can make the browser download an unnecessarily large file. Keep width and height attributes for stable layout and avoid stretching a small source beyond useful detail.
Check the selected request
Use the network panel on different viewports to see which resource is selected. Clear caching when comparing transfer sizes. Confirm image crops preserve the subject and that a mobile version does not hide connectors or labels important to a product enquiry.