Shopify Image Sizes (2026): Product, Banner, Logo and More

The right Shopify image size for most product photos is 2048 x 2048 px, which Shopify's Help Center says usually displays best for square product images. Shopify accepts product and collection images up to 5000 x 5000 px (25 megapixels) and under 20 MB. Banner sizes depend on your theme, so the cheat sheet below gives Shopify's own number where one exists and labels everything else as a recommendation.

Every figure was checked on 22 October 2026 against Shopify's Help Center and developer documentation, the code of Shopify's free Dawn and Horizon themes, and Meta's guidance for social previews. For page speed, compression and Largest Contentful Paint, use our Shopify image optimization checklist.

Shopify image size cheat sheet for 2026

In the notes, "Shopify" means the number is in Shopify's documentation, "theme code" means we read it in the source of Horizon 4.3.0 or Dawn, and "recommendation" is our reasoning, explained further down.

Two rules explain most of the table. First, the image_url filter documentation says an image can't be resized beyond its original dimensions, so your original sets the ceiling for sharpness. Second, limits differ by place. Product and collection images allow 25 megapixels, while Shopify's Uploading images guide caps other uploads, such as theme images, at 20 megapixels or 20 MB. Megapixels are width times height divided by 1,000,000, so a 3840 x 2160 px banner is about 8.3 MP.

What does "large" mean for Shopify images?

In this guide, a large image means the recommended size in the table, such as 2048 px for a product photo or 3840 px wide for a full-width banner, not an unedited camera or design export. Shopify's advice points both ways. The Uploading images guide says images aren't compressed on upload and don't need compressing first, and asks you to upload the best quality images you can provide. Shopify's guide to improving online store performance says pages with many high-quality images can load slowly, and tells you to resize images to match their display size.

Both hold because shoppers don't download your original. Shopify's product media guidance says different sizes of each image are created for different areas of your theme, and the performance guide says the image CDN, combined with your theme code, can serve images resized, compressed and in the best format. Shopify's theme performance best practices tell theme developers to use srcset and sizes with the image_tag filter, so each browser gets the smallest image that still looks good at its screen size. The display size that counts is the largest width your theme requests, which you can find in the page's srcset, as the checking steps below show. An original past that width adds file size but no detail shoppers see.

So export at the sizes in the table rather than straight from the camera. If your tool compresses as it resizes, keep the quality high, since Shopify may compress images again when the theme serves them. Our free Shopify Image Resizer has presets for these sizes and works in your browser. For the loading side, such as lazy loading, the LCP image and how many images a page shows, follow our Shopify speed optimization checklist.

Why should product images share one aspect ratio?

Aspect ratio is an image's shape: width compared with height. Shopify's product media guidance notes that product images shown side by side on collection pages display at different sizes unless they share a consistent aspect ratio.

Your theme sets the frame. Dawn's product and collection grids have an Image ratio setting with Adapt to image, Portrait and Square. Horizon's product cards have an Aspect ratio setting with Auto, Portrait (the default), Square and Landscape. For product cards, Portrait means 4:5 in both themes' code, and Horizon's Landscape is 16:9. Adapt to image and Auto follow each featured image, so they only look tidy when every featured image has the same shape.

A practical approach:

1. Pick one ratio for the catalog, or at least per collection. Square is the safe default; 4:5 suits apparel and tall products.
2. Shoot or export every featured image at that ratio, with the product at a similar size and position.
3. Set the theme's card ratio to match, so the theme isn't cropping or padding your photos.
4. Fix outliers with the media editor, whose Crop and transform tool offers Freeform, Original and Square.
5. Keep sources large enough, not oversized. Horizon's product media code requests versions up to 3840 px wide, so an original larger than 2048 px, up to that width and within the 25-megapixel limit, gives big high-density screens more detail. Resize camera files to that range before uploading them.

Replacing images in bulk by CSV? Run through our product CSV update checklist first. Keep fit details such as size charts in text rather than in product photos, where they are hard to read on a phone; see our guide to Shopify size charts.

How big should Shopify banner and slideshow images be?

Shopify doesn't publish one banner size. Its Uploading images guide says ideal dimensions depend on your theme and version, and recommends cropping to a ratio close to the section's shape, such as a landscape image for a wide section.

Theme code does show width: by default, Dawn's Image banner and Horizon's Hero and Slideshow sections offer the browser sizes up to 3840 px wide, and the browser picks the one that fits the screen. Hence our 3840 px recommendation: phones still download a small copy, and large screens aren't held back by a small original.

Then choose a height in the theme editor:

• Adapt to first image: Shopify says many of its free themes offer this Height option, which sizes the section to your image instead of cropping it. Your image's ratio becomes the banner's: 3840 x 2160 px (16:9) for a tall hero, 3840 x 1280 px (3:1) for a slim one.
• Fixed heights: options such as Small, Medium and Large fill the section by cropping, and the crop changes with screen width.
• Slideshows: with Adapt to first image, Shopify says the section follows the first slide, so later slides with another shape still get cropped. Export every slide at the same dimensions.

Shopify also advises keeping text out of slideshow and background images, because the theme may crop or resize them; use the section's text settings instead. For a short store-wide message, an announcement bar is usually a better home than words baked into a hero image.

Why do banners crop differently on mobile and desktop?

Shopify's Uploading images guide describes two crops. On tall screens, such as phones held upright, wide images lose their left and right edges. On wide screens, such as laptops, tall images lose their top and bottom. Three tools help:

1. Set a focal point. It marks the part of the image that must stay in frame when the theme crops. You set it on the image, not the section; each image has one, and it applies wherever the image is used. Shopify lists support in all Horizon-family themes, Dawn 7.0.0 and later, and many other free themes.
2. Use a separate mobile image where one exists. Horizon's Hero section has a Show different media on mobile setting, and its code requests mobile images up to 1600 px wide. A 1600 x 2000 px portrait image is our starting point. In Horizon 4.3.0, Slideshow slides have no mobile-only image, and neither does Dawn's Image banner.
3. Compose for the crop. Our recommendation: keep the subject near the center, with background at the edges a phone can lose.

What size should the logo, favicon and social image be?

Header logo. Shopify's theme settings guide says logo images have a maximum width of 300 px, set with a width slider. In Dawn's code that slider runs from 50 to 300 px, and the theme requests the logo at up to twice the width you set. Horizon sizes the logo by height instead, with desktop and mobile sliders from 12 to 100 px. Upload at least twice the display size, such as 600 px wide for a 300 px slot. Shopify's brand assets page also asks for a default logo at least 512 px wide, in PNG or JPEG.

Square logo and cover image. On the same brand assets page (Settings > General, then Manage under Brand assets), Shopify recommends a square logo of at least 512 x 512 px and a cover image of at least 1920 x 1080 px. The square logo may be cropped to a circle, so keep the mark away from the corners.

Favicon. Shopify's favicon guide calls 16 x 16 or 32 x 32 px ideal and says larger images are reduced to 32 x 32 px on upload. Dawn and Horizon both request a 32 x 32 px version, so use a square mark that reads at that size. Add it under Theme settings in the theme editor, then Logo or Favicon, depending on your theme version.

Social sharing image. When someone shares a product, collection or blog post, free Shopify themes show that page's featured image, according to Shopify's social media image guide. Pages without one, such as the home page, use the image set in Online Store > Preferences, under Social sharing image and SEO. With none uploaded, Shopify falls back to your theme logo. Shopify gives no size, so follow Meta's link share image guidance: at least 1200 x 630 px, close to 1.91:1, and no more than 8 MB.

Which file format should you upload to Shopify?

Shopify supports JPEG, progressive JPEG, PNG, GIF, HEIC and WebP, and accepts TIFF, BMP and SVG with conditions:

Three things Shopify does after upload matter more than the format:

• No compression on upload. Your original keeps its quality, and Shopify says images don't need compressing before upload, but they may be compressed when the theme serves them. Upload a clean file at the recommended size; if you compress it, keep the quality high.
• Automatic modern formats. Shopify detects which formats each browser supports and serves WebP or AVIF where it can, so there's no need to convert a JPEG library for that reason alone.
• Color profiles are removed. Storefront images lose their embedded profile and are treated as sRGB, so export in sRGB to avoid color shifts.

How do you check the size your theme uses?

1. Open the section or block in the theme editor and note its Height, Image ratio or Aspect ratio setting.
2. Preview the page on a phone and a desktop, and look for crops at the edges.
3. On the live page, right-click the image in a desktop browser, choose Inspect, and read the srcset attribute. The largest width listed is the biggest copy the theme requests, so an original at least that wide stays sharp.
4. For a paid theme, open View documentation from the theme editor menu, as Shopify's theme documentation page describes. For a free Shopify theme, use the Help Center and its Theme Store listing.

Shopify image size checklist

• Featured product images share one aspect ratio that matches the theme's card setting.
• Square product images are 2048 x 2048 px; portrait ones are 2048 x 2560 px.
• Product and collection images stay within 25 MP and 20 MB; other uploads within 20 MP and 20 MB.
• Full-width banners are about 3840 px wide, with no text baked in, and every slide shares one size.
• Banner images have a focal point and have been checked on a phone.
• The logo is at least 512 px wide and twice its display size; the favicon is square and readable at 32 x 32 px.
• A 1200 x 630 px social sharing image is set in Online Store > Preferences.
• Originals are resized to these sizes, not uploaded straight from the camera, and lightly compressed if at all.
• Files are exported in sRGB: JPEG for photos, PNG for graphics that need transparency.

Frequently asked questions

What is the best image size for Shopify?

For square product photos, 2048 x 2048 px, as Shopify recommends. For the rest, full-width banners about 3840 px wide, a logo at least 512 px wide, a 32 x 32 px favicon and a 1200 x 630 px social image suit most stores.

Does Shopify resize images automatically?

Yes. Themes request resized copies from Shopify's CDN, which serves WebP or AVIF to browsers that support them. Shopify can't enlarge an image beyond its original dimensions, so upload a file big enough for the largest place it appears, at the sizes above rather than as an unedited camera file.

Why is my Shopify banner cropped on mobile?

Phones are tall screens, so wide images lose their side edges. Set a focal point, use Adapt to first image if your theme has it, or add a separate mobile image where the section supports one, as Horizon's Hero does.

Why doesn't my new social sharing image show up?

Platforms cache link previews; Shopify notes that Facebook keeps an image for a number of days before checking for updates. Also check whether your theme sets its own social image, which takes priority over the one in Online Store > Preferences.

Sources

• Product media types — Shopify Help Center, accessed 22 October 2026.
• Uploading images — Shopify Help Center, accessed 22 October 2026.
• Improving your online store performance — Shopify Help Center, accessed 28 October 2026.
• Customizing theme settings — Shopify Help Center, accessed 22 October 2026.
• Adding a favicon to your store — Shopify Help Center, accessed 22 October 2026.
• Choosing a social media image — Shopify Help Center, accessed 22 October 2026.
• Setting your online store preferences — Shopify Help Center, accessed 22 October 2026.
• Managing your brand assets — Shopify Help Center, accessed 22 October 2026.
• Using the media editor — Shopify Help Center, accessed 22 October 2026.
• Theme documentation — Shopify Help Center, accessed 22 October 2026.
• Liquid filters: image_url — Shopify developer documentation, accessed 22 October 2026.
• Performance best practices for Shopify themes — Shopify developer documentation, accessed 28 October 2026.
• Horizon theme source code — Shopify on GitHub, version 4.3.0, accessed 22 October 2026.
• Dawn theme source code — Shopify on GitHub, accessed 22 October 2026.
• Horizon — Shopify Theme Store, accessed 22 October 2026.
• Images in Link Shares — Meta for Developers, accessed 22 October 2026.