Website image guide

How to Resize Images for Websites

A website image should be large enough to look clear in its layout, but not needlessly larger than the space where it appears. Correct dimensions can reduce page weight before you even adjust image compression.

Start with the display size

Check how wide the image will appear in the page layout and whether the design needs a larger source for high-density screens. Avoid uploading a huge original for a small thumbnail. At the same time, do not make the source so small that it looks blurry when visitors zoom in or view it on a larger screen.

Keep proportions consistent

Preserve the original aspect ratio unless the design specifically calls for a crop. Stretching an image to fit a different ratio can distort faces, products and diagrams. If a fixed shape is required, crop a copy rather than stretching the original.

Resize, then compress

First reduce the pixel dimensions to suit the layout. Then compress the result and compare its appearance and file size. These are separate steps: resizing changes the number of pixels, while compression changes how image data is encoded.

1. Use Resize Image to adjust dimensions.
2. Use Compress Image to reduce the output size.
3. Preview the result on a page or at the intended display size.

Use the right format

JPG is often suitable for photographs, PNG can be useful for transparent graphics, and WebP can offer efficient web delivery. Choose a format supported by your publishing workflow and check the final image rather than relying only on the file extension.