Image Dimensions for Websites, Thumbnails, and Social Previews
Updated: May 26, 2026
Pixel dimensions should follow the place an image will appear. Sending a huge original to a narrow layout makes pages heavier, while sending an undersized image to a large display makes it soft and difficult to read.
Dimensions and aspect ratio are related but different: dimensions state the pixel count, while aspect ratio describes the shape. Choosing the shape before resizing helps prevent accidental stretching or awkward platform crops.
| Use case | Starting dimensions | What to check |
|---|---|---|
| Social link preview | 1200 x 630 px | Keep text and subjects away from edges that may be cropped. |
| Square thumbnail or avatar | 1000 x 1000 px | Center the subject and check appearance at a small size. |
| Article image | 1200 to 1600 px wide | Match the content column and avoid oversized originals. |
| Wide page banner | 1600 to 2400 px wide | Test responsive crops on both narrow and wide screens. |
| Website icon source | 512 x 512 px | Use a simple square mark with breathing room at small sizes. |
Start with the displayed width
The correct article-image width is set by the site design, not the camera. Look at the largest width the image occupies on a normal desktop layout and export near that value, or modestly above it when a high-density display needs extra sharpness.
For a hero image that changes shape on mobile, test what remains visible after the responsive crop. Important faces, product labels, or text should not depend on the outer edges staying visible.
Crop for shape before resizing for pixels
A square card, a 16:9 thumbnail, and a 1200 by 630 preview all frame a subject differently. Apply the intended aspect ratio while enough original detail remains, move the crop around the important subject, and then resize to final pixels.
If you resize first and crop later, you may throw away resolution needed for a good focal crop. This matters most for small objects, text overlays, and images reused in several layouts.
Text, logos, and favicon sources
Graphics with small writing need more caution than photographs. Export a social graphic at its required pixel size and inspect the writing after compression; lightweight text may become fuzzy in a heavily compressed JPG.
A favicon begins as a large square source but must remain recognizable as a tiny icon. Favor a simple centered mark, remove unnecessary detail, and generate several PNG sizes so browsers and installed-app surfaces receive an appropriate asset.
Publishing checklist
- Record the target aspect ratio before choosing a crop.
- Export only as wide as the largest real display requires.
- Preview small thumbnails at their real on-screen size, not only zoomed in.
- Check link-preview images after sharing because platforms may apply their own crop.
- Use a consistent crop and dimension rule for galleries to avoid layout movement.
Related browser tools
Apply the workflow locally in your browser with the relevant SimpleImgTools utility: