Measure the layout
Start with the maximum CSS width of the image at common breakpoints. Consider a larger source for high-density displays, often around twice the CSS pixel width when the image is important and the added bytes are justified.
A 320-pixel card thumbnail and a full-width editorial image have different needs. Export variants rather than making every image the dimensions of the largest source in your library.
Deliver responsive images
Use `srcset` and `sizes` so the browser can select a suitable file for viewport width and device density. Specify intrinsic width and height to reserve layout space and reduce shifts.
Test a page on mobile and desktop. Visual sharpness, file bytes, crop and loading behavior should be judged together; compression alone cannot fix an incorrectly sized source.
Frequently asked questions
Should a hero image be 1920 pixels wide?
Only if the layout and target screens need it. Measure the actual slot and create the smallest variant that remains sharp.