Image Size Guide

Choosing the right image size keeps pages fast while preserving enough detail for readers.

Start With Display Size

Do not upload a 4000 pixel photo if the page only displays it at 900 pixels. Resize a copy to match the expected display area.

Keep Originals

Always keep the original image in a separate folder. Export optimized versions for the web, email, or upload forms.

Retina Screens

For sharp UI images, export around twice the displayed width, then compress carefully.

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.