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.
Practical example workflow
Start by deciding where the image will appear: a hero banner, product card, profile photo, form attachment, social preview, or email. Each location has a different useful size and crop. Preparing one giant file for every use case is slower for visitors and harder to review.
Make a working copy, resize it to the largest realistic display size, then export a compressed version. Open the exported file on desktop and mobile before publishing. Check small text, edges, faces, product labels, transparency, and color shifts. If those details are still clear, the smaller version is usually the better publishing file.
Quality checks before publishing
Use clear filenames, remove private metadata when the image is public, and keep the original file in a private folder. For client work, record the final width, height, format, and compression setting so the image can be recreated later without guessing.
For important uploads, test the image inside the actual platform instead of only viewing it locally. Some platforms crop thumbnails, recompress uploads, or reject transparent images. A quick final preview catches those problems before the file is shared publicly.