What is the recommended image size for a banner?

Featured links

1. Shopify documentation on uploading images
2. Company XYZ documentation on How do I get banners to look better in desktop and mobile?
3. Shopify documentation on improving your online store performance

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Full-width images

For full-width banners, use images that are 1600–2400 px wide at 72 dpi. Choose the height to suit your design and layout.

For mobile-specific banner images, aim for 640–800 px wide at 72 dpi. You can use images as small as 320 px wide, but starting slightly larger lets the image scale down more sharply.

For image upload details, see Shopify documentation on uploading images

For layout advice, see Company XYZ documentation on adapting banners for desktop and mobile.

Tip

Test banner images on several screen sizes. A size that looks right on desktop may need adjustment for mobile.

Multi-column images

For images displayed inside a multi-column section, make the image around 1.5–2 times wider than its average displayed width.

For example, if a two-column layout uses an average full-width size of about 1600 px, each column is roughly 800 px wide. An image around 800 px wide is a good starting point; rounding up slightly is fine.

Finding the best size can take some trial and error. Check the layout across multiple devices and adjust until the image looks right.

Optimize image files

Avoid using unnecessarily large image files. Oversized dimensions and heavy files can slow down your site and affect SEO.

Themes automatically resize images for mobile, but compressing images before uploading helps keep them lightweight. tinypng.com is a simple free tool for compressing images.

For broader guidance, see Shopify documentation on improving your online store performance