Start with the displayed size
An image should not be dramatically larger than the space where it appears. If a card is shown at about 600 pixels wide, serving a 4000-pixel source usually wastes bandwidth. Allow extra resolution for high-density screens, but avoid using the camera original by default.
Keep the aspect ratio
The aspect ratio is the relationship between width and height. Changing only one dimension while preserving the ratio prevents stretching. Crop first when the destination needs a different shape, such as converting a landscape photo into a square profile image.
- Identify the maximum displayed width.
- Keep proportional resizing enabled.
- Preview important faces, text and product details.
Choose a suitable format
JPEG is widely suitable for photographs, PNG is useful when transparency or sharp interface graphics matter, and WebP often offers a good quality-to-size balance. Keep an original master file so that later edits do not repeatedly compress an already compressed image.
Test visual quality and file weight
There is no universal quality number. Compare the processed image at its actual on-page size, check gradients and fine text, then select the smallest version that still looks acceptable. Descriptive filenames and accurate alt text also make an image library easier to maintain.
Frequently asked questions
What width should a hero image use?
It depends on the layout. A responsive full-width hero commonly needs a larger source than a content card; test at the largest real display width instead of relying on one universal number.
Should I enlarge a small image?
Enlarging cannot recreate missing detail. A modest increase may be usable, but starting from a larger original usually produces a cleaner result.
