Shopify Banner Size Guide: Every Image Dimension You Need for a Pixel-Perfect Store

Wrong image sizes are the silent conversion killer on Shopify stores. Blurry hero banners, stretched logos, and oversized product photos that take five seconds to load. Every pixel that is off costs you trust, speed, and sales. This guide covers every Shopify image dimension you need to get right in 2026.

Whether you are uploading your first hero banner or optimizing an entire product catalog, this is the complete reference. We cover recommended pixel dimensions, aspect ratios, file formats, compression strategies, and how different Shopify themes handle images differently. Bookmark this page. You will come back to it.

Quick Reference: Every Shopify Image Size at a Glance

Before we dive deep into each image type, here is the cheat sheet. Save this table and reference it every time you upload an image to your store.

Now let us break down each image type in detail so you know exactly what to upload and why these dimensions matter.

Shopify Hero Banner and Slideshow Image Size

Your hero banner is the largest, most prominent image on your entire store. It is the first thing visitors see, and it sets the visual tone for everything that follows. Getting the size wrong here is immediately noticeable.

Recommended size: 2560 x 1440 pixels for full-width hero banners. This covers 2K displays and scales down cleanly to smaller screens. If you want to go with a standard HD resolution, 1920 x 1080 pixels works well too and results in smaller file sizes.

The aspect ratio should be 16:9 for most themes. This is the standard widescreen ratio that looks natural on desktop monitors and laptops. Some themes crop the hero banner to different heights, so always place your most important content (text, product shots, key visuals) in the center of the image where it will not get clipped.

For slideshow sections, the same dimensions apply to each slide. However, there is an important performance consideration: each additional slide adds to your page weight. Three slides at 400KB each means 1.2MB of images loading before your visitor can interact with your store. Keep slideshows to three slides maximum, and consider replacing them entirely with a single strong hero image. Studies consistently show that only the first slide gets meaningful engagement.

If your theme supports video heroes, a looping video (under 5 seconds, compressed to under 2MB) can be more engaging than a static banner. Just make sure you set a poster image as a fallback for slow connections.

Mobile Banner Considerations

Over 72% of e-commerce traffic comes from mobile devices, which means more people will see your mobile banner than your desktop one. Yet most store owners design the desktop version first and treat mobile as an afterthought.

Recommended mobile banner size: 1080 x 1920 pixels (9:16 portrait ratio). This gives you a tall, vertical format that fills a phone screen beautifully. Many modern Shopify themes let you upload separate mobile and desktop hero images. Always use this feature.

When you cannot upload a separate mobile image, your 16:9 desktop banner will get cropped on mobile. The theme usually crops from the sides, keeping the center. This is why it is critical to keep all important content centered in your hero image. Text overlaid near the left or right edges will get cut off on phones.

Keep mobile banner file sizes under 250KB. Mobile users are often on cellular connections, and every kilobyte counts. A hero image that takes three seconds to load on mobile can increase bounce rates by 32%.

Shopify Product Image Size

Product images are arguably the most important images on your entire store. They are doing the job that physical touch and in-person inspection do in a brick-and-mortar shop. Get these wrong, and no amount of copywriting will save your conversion rate.

Recommended size: 2048 x 2048 pixels (square, 1:1 ratio). Shopify's maximum upload limit is 4472 x 4472 pixels, but 2048 x 2048 is the sweet spot. It is large enough for the zoom feature to reveal sharp details without creating unnecessarily heavy file sizes.

Why square? Consistency. When all your product images share the same aspect ratio, your collection grids look clean and professional. Mixed aspect ratios create an uneven, chaotic grid that looks unpolished. Even if your product is not square (a tall bottle, a wide mat), place it on a square canvas with appropriate padding.

Use a consistent background across all product photos. White or light gray backgrounds are standard for most stores, but lifestyle-oriented brands can use contextual backgrounds as long as they are consistent. The key is uniformity across your entire catalog.

Upload five to eight images per product. Include flat-lay shots, lifestyle images showing the product in use, close-up detail shots, and at least one image with a scale reference. Products with more images consistently convert at higher rates because they reduce buyer uncertainty.

Shopify Collection Image Size

Collection images appear at the top of your collection pages and in collection list sections on your homepage. They are the visual gateway to each product category and play a bigger role in navigation than most store owners realize.

Recommended size: 1920 x 1080 pixels (16:9 ratio). This works well for full-width collection headers. If your theme displays collections in a grid of cards, you may also want square versions at 1080 x 1080 pixels.

Choose images that represent the entire collection, not just one product. A lifestyle shot showing multiple products from the collection in context works better than a single product photo. Add text overlays with the collection name directly in your image editor for cleaner rendering than relying on your theme's text overlay, which can be unpredictable across devices.

Shopify Logo Size

Your logo appears in your header, your favicon, your emails, and your social profiles. It needs to be sharp at every size.

Recommended size: 200 x 200 pixels for square logos, or 400 x 100 pixels for horizontal logos. The best approach is to upload an SVG file if your theme supports it. SVGs are vector-based, which means they scale perfectly to any size without losing quality and have extremely small file sizes (usually under 10KB).

If you must use a raster format (PNG or JPEG), make sure the image is at least 2x the display size. If your header displays the logo at 100 x 100 pixels, upload a 200 x 200 pixel version. This ensures your logo stays crisp on high-density (Retina) displays.

Always use a transparent background (PNG or SVG) for your logo. A white box around your logo on a colored header background screams amateur.

Blog Featured Image Size

If you are running a Shopify blog (and you should be for SEO), each post needs a featured image that looks good on your blog listing page, inside the article, and when shared on social media.

Recommended size: 1920 x 1080 pixels (16:9 ratio). This aspect ratio works well as a blog card thumbnail when cropped and as a full-width image at the top of your article. Keep file sizes under 300KB by compressing with tools like TinyPNG or Squoosh before uploading.

Favicon Size

The favicon is the tiny icon that appears in browser tabs, bookmark bars, and mobile home screens. It is small, but it reinforces brand recognition every time someone has your site open.

Recommended size: 32 x 32 pixels. Use a simplified version of your logo or a single letter/icon. Upload as a PNG with a transparent background. Shopify will automatically generate the different sizes needed for various devices and contexts. Keep it simple. Intricate designs become unrecognizable at 16 x 16 pixels.

Social Sharing and OG Image Size

When someone shares your product page or blog post on Facebook, Twitter, LinkedIn, or iMessage, the platform pulls an Open Graph (OG) image to display as a preview. If you have not set one, the platform picks a random image from your page. The result is almost always ugly.

Recommended size: 1200 x 630 pixels (1.91:1 ratio). This is the standard across all major platforms. Facebook, Twitter, LinkedIn, Pinterest, and Slack all display this size correctly.

Create a branded OG image template with your logo, product name, and a clean background. This takes 10 minutes to set up and dramatically improves how your links look when shared. Some Shopify apps and SEO plugins let you auto-generate OG images for every product page.

Image File Format Guide: WebP vs. PNG vs. JPEG

The format you choose for your images affects quality, file size, and loading speed. Here is when to use each one.

• WebP: The modern standard. WebP delivers 25-35% smaller file sizes compared to JPEG and PNG at equivalent quality. Shopify's CDN automatically serves WebP to browsers that support it (which is now all major browsers). If you are uploading new images in 2026, WebP is the best default choice.
• JPEG: Best for photographs and images with complex color gradations. Use JPEG when WebP is not an option or when you need maximum compatibility. Quality setting of 80-85% gives you the best balance of visual quality and file size.
• PNG: Use for images that require transparency (logos, icons, product images on transparent backgrounds). PNG files are larger than JPEG or WebP, so only use this format when transparency is actually needed. For non-transparent images, PNG is almost always the wrong choice.
• SVG: Perfect for logos, icons, and simple illustrations. SVGs are vector-based, infinitely scalable, and incredibly lightweight. If your graphic is made of shapes and text (not photographs), SVG is the best format.
• GIF: Avoid GIFs for anything other than simple animations. They have terrible compression, limited color palettes, and are far too heavy for the quality they deliver. For short animations, use a looping video (MP4) instead.

Image Compression Tips for Shopify

Uploading uncompressed images is the single biggest performance mistake on Shopify stores. A 5MB hero image might look identical to a 400KB version of the same image after compression. The difference is invisible to your customers but brutal for your load times.

• Compress before uploading. Use free tools like Squoosh, TinyPNG, or ShortPixel to compress every image before you upload it to Shopify. Do not rely on Shopify's built-in optimization alone.
• Target file sizes, not just dimensions. A 2048 x 2048 product image should be under 300KB. A 2560 x 1440 hero banner should be under 400KB. If your images are larger, compress them further.
• Enable lazy loading. Most modern Shopify themes support lazy loading out of the box. This means images below the fold only load when the visitor scrolls to them, dramatically improving initial page load time.
• Use Shopify's image CDN. Shopify automatically resizes and serves images through its CDN. You can use URL parameters to request specific sizes (for example, adding _200x to a filename). This is handled automatically by most themes.
• Audit regularly. Run your store through Google PageSpeed Insights or GTmetrix every month. Image issues are flagged clearly, and these tools tell you exactly which images need optimization.

How Different Shopify Themes Handle Images

Not all Shopify themes treat images the same way. The theme you choose determines how your images get cropped, scaled, and displayed across different devices.

Dawn (Shopify's default free theme) uses an "Adapt to image" option that preserves your original aspect ratio. This means your 16:9 hero will display at 16:9 without cropping. However, if you switch to a fixed-height hero section, the sides of your image will get cropped on narrower screens.

Premium themes like Prestige, Impulse, and Symmetry often have built-in focal point selectors. You click the area of your image that matters most, and the theme intelligently crops around that point on different screen sizes. This feature is worth paying for if your hero images contain off-center subjects.

Custom themes can handle images in any way the developer chooses. If you are working with a developer, provide your images at the maximum recommended sizes from this guide and ask them to implement responsive image loading with proper srcset attributes.

The lesson: always preview your images on desktop, tablet, and phone after uploading. What looks perfect on your 27-inch monitor might be unrecognizable on a 6-inch phone screen.

Common Shopify Image Mistakes (and How to Fix Them)

These are the image problems we see on Shopify stores every single day. Each one hurts your store's performance, credibility, or both.

• Blurry hero banners. This happens when you upload an image that is too small and the theme stretches it to fill the section. Fix: always upload at least 1920px wide for any full-width image. For Retina displays, 2560px is safer.
• Wrong aspect ratios. When you upload a square image into a 16:9 hero slot, the theme either stretches it (looks terrible) or crops it aggressively (cuts off your content). Fix: always match the aspect ratio your theme expects for each section.
• Massive file sizes. Uploading a 10MB product photo straight from your camera is the fastest way to destroy your page speed. Fix: compress every image to under 400KB before uploading. Use WebP format where possible.
• Inconsistent product photo dimensions. When your product images are different sizes and aspect ratios, your collection grid looks like a patchwork quilt. Fix: use a consistent 2048 x 2048 square canvas for every product image.
• Ignoring mobile cropping. Your desktop banner looks great, but on mobile the key text and product shots are chopped off. Fix: upload separate mobile images when your theme supports it, and always center critical content.
• White logos on white backgrounds. If your logo has no transparency and a white background, it will look broken on themes with white headers. Fix: always use a transparent PNG or SVG for your logo.
• Missing alt text. Every image on your store should have descriptive alt text for accessibility and SEO. Fix: describe what the image shows in plain language. "Black leather crossbody bag with gold hardware" not "IMG_4829".
• No OG image set. When your product links get shared on social media, they show no preview image or a random one. Fix: set a 1200 x 630 OG image for your homepage and use your product featured image as the OG image for product pages.

A Note on Shopify's Image Upload Limits

Shopify allows images up to 20 megapixels and 20MB per file. However, just because you can upload a 20MB image does not mean you should. Shopify will process and serve the image through its CDN, but the original upload time will be slow, and the processing is not always optimal.

Best practice: optimize every image before you upload it. This gives you full control over quality and compression, and it means your images are ready to serve fast from the moment they hit Shopify's servers.