ToolSahla, Tools Sahla

My phone photos are 4000 px wide. What width should I use for my website or blog?

Choose by the widest place the image appears, not one number for everything: a full-width banner needs more pixels than a photo inside an article column, and thumbnails need far fewer. For most content images a width between 1200 and 1600 px is plenty; type it with the ratio lock on and the height is calculated for you.

Published · 3 min read

4000 px is more than almost any page needs

A phone captures big pictures because they might be printed or cropped later, not because websites need them. A 4032 px photo shown in an article column that is a few hundred pixels wide on most screens gets downloaded in full, and most of it is thrown away. The fix is not a magic number; it is sorting your images by where they go.

Three places, three sizes

  • A full-width banner: the largest spot on your site, and the one that needs the widest file. 1920 px is a practical width, and the ratio usually needs cropping to make the banner wide.
  • A photo inside an article or product page: the column is narrower than the screen, so 1200 to 1600 px leaves headroom for high-density screens.
  • Thumbnails in a post list or product grid: they show small, so 400 px is usually enough.

These are practical starting points, not rules. Your theme decides: measure the width an image really displays at, and if your article column is wider than usual, raise the number.

The numbers from one phone photo

Worked example

A 4032 × 3024 landscape photo with the ratio lock on:

width 1920 gives 1920 × 1440, width 1600 gives 1600 × 1200, and width 1200 gives 1200 × 900.

For a thumbnail, width 400 gives 400 × 300.

A 3024 × 4032 portrait photo at width 1200 becomes 1200 × 1600, taller than a desktop screen, so consider a smaller height for these.

The steps

  1. Decide where the image goes on your site and pick the matching width from the list above.
  2. Open the Image resizer, choose the photo and make sure the ratio lock is on.
  3. Type the width and the tool works out the height. For tall portrait photos, type the height instead.
  4. Save as JPEG or WebP, check the size in the table, and run the files through the Image compressor if you need them lighter.

Do not delete the original

Keep the original phone photo in a separate folder. If you later move to a wider theme you will need bigger copies, and enlarging a 1200 px version does not bring detail back. The file name the tool downloads carries the new size, which keeps originals and copies easy to tell apart.

Common questions

Don't blog platforms shrink images on their own?

Some create smaller copies automatically and some serve the file as you uploaded it. If you are not sure, the safe choice is to upload at a sensible size from the start.

Is WebP better for my site?

It usually gives a smaller file at similar quality, and modern browsers support it. Just check that your site platform accepts WebP uploads.