Placing the logo or shop name near the left edge, where the mobile crop removes it first.
Photo types and platforms
Banner image
Also called cover image, shop banner or header image. Here is what it means, when it changes what you export, and what people get wrong.
The short answer
A banner image is the wide letterbox artwork across the top of a shop, profile or channel page. Its defining problem is responsive cropping: the same file is shown at very different shapes on desktop and mobile, and the sides are usually the first thing to go.
Updated
The short version
Banner image at a glance
| Quick fact | Detail |
|---|---|
| Typical shape | Wide letterbox, roughly 4:1 |
| Etsy big shop banner | Minimum 1200 x 300 px, 1600 x 400 px recommended |
| Etsy carousel banner | 1200 x 300 px |
| Safe zone | Central band of the width |
| Colour space | sRGB |
Slide the table sideways to see every column.
How do you build a safe zone?
Treat the banner as two layers: a wide background that can be sacrificed, and a central band that must survive.
- Keep the message in the middle. Logo, shop name and any text belong in the central portion, roughly the middle half of the width.
- Let the edges be texture. Pattern, gradient or continuation of the scene, nothing load-bearing.
- Avoid vertical extremes too. Some layouts overlay a profile picture or a shop title on top of the banner, usually near the lower centre.
- Preview at both shapes. Crop your own file to a square and to a wide strip before uploading and see what is left.
What sizes do platforms ask for?
Figures vary by platform and by placement, and they change. Etsy's published image guidance gives the clearest example: a big shop banner has a minimum of 1200 x 300 px with 1600 x 400 px recommended, and the carousel banner is 1200 x 300 px.
For platforms that do not publish a figure, the general rule holds: supply a wide image at least twice the width you expect it to display, keep it in sRGB, and keep the file small enough to load quickly, since a banner sits at the top of the page and delays everything under it. Resizing and cropping one master into each platform's shape is a mechanical job that a resize and crop tool such as Photomop handles in a pass.
What people get wrong about banner image
Each one is a real failure mode, not a style preference.
Designing the banner at the exact minimum dimensions, so it looks soft on a wide or high-density screen.
Filling the banner with small text that is unreadable once the image is scaled into a phone-width header.
Forgetting that a profile picture or shop title may be overlaid on top of the banner, hiding part of the artwork.
Questions people ask
Banner image, answered
The follow-up questions people search for once they have the definition.
What size should a shop banner be?
It depends on the platform. Etsy publishes a minimum of 1200 x 300 px for the big shop banner with 1600 x 400 px recommended, and 1200 x 300 px for the carousel. Where a platform publishes nothing, supply a wide image well above the displayed width and keep the message centred.
Can I put text on a banner image?
Yes, but keep it short, large and central. Long lines and small type are the first casualties of a mobile crop and a scale-down. Test by cropping the banner to roughly square and checking the text still fits.
Why is my banner blurry?
Almost always because the source is too small for the display width, particularly on high-density screens where the browser draws roughly twice the pixels. Export at least double the width you expect and let the platform scale down rather than up.
What is the difference between a banner and a hero image?
A banner is decorative or identifying artwork across the top of a shop or profile, often with a fixed shape set by the platform. A hero image is the lead visual of a page you control, usually paired with a headline and a call to action, and it typically drives your page's largest paint.
Same cluster
More from the glossary
Neighbouring entries, so every term in the set is one hop from every other.
Bicubic interpolation
Bicubic interpolation works out each new pixel by fitting a smooth cubic curve through a 4 x 4 block of sixteen surrounding pixels.
Banding
Banding is when a smooth gradient breaks into visible steps or stripes instead of blending.
Bit depth
Bit depth is how many bits an image uses to store each colour channel, which sets how many distinct levels that channel can hold.
From the studio
Tools that do this
Each one runs on your own device, so the photo stays where it is.
Sources
Where the facts on this page come from. Every link opens the specification, standard or documentation the claim was read at.
Keep reading
Elsewhere on Photomop
Platform image rules
Image size, file type and background rules for 22 selling platforms, each one sourced.
Read itConvert image
JPG, PNG, WebP and AVIF, with an honest answer about HEIC and alpha.
Read itAll the tools
The whole toolbox in three families, with what each one needs before it can run.
Read itOn-device privacy
The pipeline in five steps, what leaves your device, and how to check it yourself.
Read it
Now do it to a photo
Photomop is a photo studio that runs on your own device. Resize, crop, compress, convert, batch edit, remove a background and change one all work in the browser tab you are reading this in, at full resolution and with no watermark. The on-device page shows you how to check that the photo stays put.