Resize from the original to dimensions suited to the intended display, allowing for density and any legitimate zoom requirement. Proportional resizing changes pixel dimensions but does not crop or add padding. Downscaling can discard detail, and upscaling does not recreate missing detail, so preserve the original and inspect the delivery copy at its actual use size.
Separate source pixels from layout size
A file has intrinsic pixel dimensions while CSS controls its rendered size. A dense display may use more source pixels than CSS pixels, so exact one-to-one matching is not always appropriate. For responsive pages, prepare useful candidates and let accurate srcset and sizes information describe the layout.
Calculate the proportional result
Illustrative calculation: a 3000 by 2000 image resized to a 1200-pixel long side becomes 1200 by 800. Fitting that same source inside a 1000 by 1000 box produces 1000 by about 667, not a square. Preserve the aspect ratio unless you intentionally crop in a tool that supports cropping.
If the destination requires a square image, decide between a crop and added canvas space before export. Merely typing equal box dimensions into a fit control does not choose the subject framing for you.
Avoid unnecessary enlargement
If a source is already below your target dimensions, keep it unless the receiving workflow specifically requires a larger canvas or resampled file. Enlargement can make a file heavier without revealing more genuine detail. A DPI label by itself does not define the amount of detail a browser displays.
Inspect edges and detail after reduction
Compare text, hair, product labels and diagonal lines at the delivery size. Apply any sharpening conservatively and check for halos; it cannot restore information removed by downscaling. Verify the dimensions of the downloaded export, then inspect the image candidate actually served on the site. Keep separate masters so future larger placements can use the original rather than an enlarged small copy.