Start from display size
An image does not need to be much wider than the largest space where it appears. Uploading a 5000 pixel image for a 600 pixel card wastes bandwidth.
For sharp results on high-density screens, prepare images around two times the displayed CSS width when quality matters.
Use predictable crops
Cards, avatars, banners, and product photos often have fixed aspect ratios. Crop intentionally instead of letting the browser cut off important details.
Keep faces, text, product edges, and labels away from the very edge of the frame when the image may be cropped on mobile.
Serve practical file sizes
Large images slow pages and can increase bounce rate. Compress a copy, inspect the result, and keep the original separately.
For important photography, compare a few quality levels and choose the smallest version that still looks clean at normal viewing size.