photomopOpen the studio

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.

Photo types and platformsRuns on your deviceUpdated 10 August 2026

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 facts about Banner image: typical shape, etsy big shop banner, etsy carousel banner, safe zone, colour space
Quick factDetail
Typical shapeWide letterbox, roughly 4:1
Etsy big shop bannerMinimum 1200 x 300 px, 1600 x 400 px recommended
Etsy carousel banner1200 x 300 px
Safe zoneCentral band of the width
Colour spacesRGB

Slide the table sideways to see every column.

Why does the same banner look wrong on a phone?

Because the container changes shape, not just size. A banner slot that is roughly 4:1 on a desktop monitor may be closer to square in a mobile app, and the platform fills that slot by cropping your wide image inwards from the left and right edges.

Nothing is scaled to fit. Content near either end simply leaves the frame. That is why shop banners so often show a logo half cut off on mobile while looking perfectly composed on the desktop preview the designer used.

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.

  1. Placing the logo or shop name near the left edge, where the mobile crop removes it first.

  2. Designing the banner at the exact minimum dimensions, so it looks soft on a wide or high-density screen.

  3. Filling the banner with small text that is unreadable once the image is scaled into a phone-width header.

  4. 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.

Sources

Where the facts on this page come from. Every link opens the specification, standard or documentation the claim was read at.

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.