How to resize a banner or header image

Banners are the hardest images to get right, because they are displayed at completely different shapes depending on the device.

Resize an image
Whichever tool you use here, the file stays on your device. How that works

Step by step

  1. 1Find the dimensions the platform asks for and crop to that shape.
  2. 2Keep anything important in the centre of the image.
  3. 3Resize to the exact pixel size requested.
  4. 4Check how it looks on a phone as well as a desktop.

The centre is the only part you can rely on

A wide banner on a desktop becomes a much narrower crop on a phone, and the platform takes that crop from the middle. Anything you place near the left or right edge is invisible to over half your visitors.

So put the essential content, a logo or a line of text, in the central third. The edges are decoration and should be treated as expendable.

Upload at the size asked for. Platforms that scale your banner down do so with no regard for sharpness, and a banner you resized deliberately will look better than one the site squeezed for you.

Questions

Why is my banner cropped on mobile?

Because mobile shows a narrower slice of the same image, taken from the centre.

What size should I use?

Whatever the platform specifies. They differ, and they change the numbers periodically.

Is my image uploaded?

No.