Shopify Image Sizes 2026: Detailed Instructions for Each Type

It is not uncommon for a Shopify store to feature a refined design and a premium theme, yet still suffer from sluggish page loading that drives visitors away before the content fully renders. In many cases, the root cause is oversized images causing unnecessary loading delays. 

Thus, without being obvious, image size becomes one of the most silent performance killers, contributing to higher bounce rates, reduced engagement, and ultimately lower conversion potential. Shoppers never notice the extra pixels, but they do notice the delay.

This guide is built to stop that damage. In this page, you’ll get precise Shopify image dimensions for every major use case to choose the right Shopify image sizes, avoiding any potential UX and performance issues.

Recommended Shopify Image Sizes for 2026 

Before diving in, it is necessary to always check your specific theme’s recommended sizes. Some premium themes use custom layouts that require slightly different dimensions.

Image type	Recommended dimensions	Aspect ratio	Recommended file size
Product images	2048 × 2048 px (ideal) 1600 × 2000 pxMin: 800 × 800 px (for zoom)	1:1 (square)4:5 (portrait)	100–300 KB
Collection images	1024 × 1024 px (800 × 800 px if performance-first)	1:1 (square)	100–250 KB
Hero / homepage banner (desktop)	1920 × 1080 px Alt: 1280–2500 × 720–900 px	16:9	200–500 KB
Hero/homepage banner (mobile)	800 × 1000 px	4:5 (tall)	200–400 KB
Standard/promo banner	1200 × 400 px	3:1	150–300 KB
Slideshow banners (carousel)	1920 × 1080 px or ultra-wide layouts	16:9 / 2:1 / 3:1 / 16:10	200–500 KB per slide
Blog featured image	1200 × 800 px (up to 1800 × 1000 px for full-width themes)	3:2 or ~16:9	150–300 KB
In-content blog images	1024 × 683 px (or ~1000 × 350 px if wide)	3:2 or wide	100–250 KB
Logo (header)	400 × 100 px (display) Upload at 800 × 200 px for retina	4:1 or 1:1	20–100 KB
Square logo / social logo	512 × 512 px	1:1	50–150 KB
Favicon/icons	16 × 16 px 32 × 32 px 48 × 48 px	1:1	< 20 KB

Product images

For most Shopify stores in 2026, the ideal product image size recommendation is: 2048 × 2048 px of 1:1 aspect ratio (square). This size hits the sweet spot, providing sharp visuals across devices while enabling zoom functionality without unnecessary bloat. 

The square format is particularly effective for industries where products are compact, symmetrical, or detail-focused, such as electronics, beauty products, home accessories, and small lifestyle goods.

However, more brands are intentionally adopting portrait aspect ratios, especially 4:5 (1600 × 2000 px) or 2:3, to align with social-first visual strategies. 

Portrait images allow products to be displayed more naturally and with stronger visual storytelling. They are best suited to industries with vertically oriented products or lifestyle-driven presentations, especially for fashion and apparel brands.

Platforms such as Instagram have decisively shifted toward the 4:5 feed format, setting a new visual standard that dominates attention and reshapes how content performs across the platform.

To enable effective zoom on product detail pages, images should be at least: 800 × 800 px

Images smaller than this often result in blurry or pixelated zoom results, hurting perceived quality and trust. Shopify creates multiple smaller versions of your uploaded image automatically, but starting with a minimum of 800 px ensures zoom and retina displays are supported properly. 

A consistent 1:1 aspect ratio is generally best for product galleries because:

• It prevents awkward cropping and uneven grid layouts on collection pages.
• It ensures predictable alignment and spacing across devices.
• It makes your store look more professional and visually organized.

Collection images

Unlike product detail pages (where large, zoomable images make sense), collection images act more like thumbnails or previews of groups of products. Because of that, they should be sized and optimized differently.

For most Shopify themes and layouts, the widely recommended size for collection images is:

• 1024 × 1024 pixels
• 1:1 square aspect ratio

It provides enough resolution to look crisp across devices while keeping file sizes reasonable, so pages don’t drag.Some guides also note that 800 × 800 pixels works well if performance is a priority, especially when collections are displayed in tight grids.

There are several notices that you must take into account:

• Collection images should be optimized for preview efficiency rather than detail depth like product images. Their primary role is to represent a category at relatively small grid sizes, where ultra-high resolution adds little visual value. Using appropriately sized images reduces unnecessary file weight while preserving clarity.
• Performance becomes a critical factor at scale. Because collection pages display multiple images simultaneously, oversized files compound loading time and increase total page weight. Optimized collection imagery supports faster rendering, smoother scrolling, and stronger Core Web Vitals outcomes.
• Consistency in aspect ratio underpins both layout stability and visual quality. Uniform ratios ensure grid alignment, prevent uneven image heights, and reduce layout shifts. Since Shopify themes often crop images dynamically, consistent proportions also protect key visual elements from being clipped, resulting in a cleaner, more predictable, and professional storefront presentation.

Some themes offer alternative layouts (e.g., banner-style collection headers), in which case you should follow that layout’s recommended dimensions but still maintain consistency within that layout.

Banner and hero images

Banner and hero images are the most prominent visuals on your Shopify homepage and also the easiest place to create performance problems if sized incorrectly. These images usually sit above the fold, meaning they load first and heavily influence both first impressions and page speed. 

For most modern Shopify themes, a safe and widely recommended starting point for homepage banner or hero images is:

• Desktop hero banner: 1920 × 1080 px (16∶9) for sharp, full-screen clarity
• Alternative recommended desktop sizes: 1280–2500 px width × 720–900 px height, depending on layout
• Mobile hero banner: about 800 × 1000 px (4:5) or similar tall format to prevent important image parts from being cropped out
• Typical website banner or standard header: around 1200 × 400 px (3∶1) for slim promotional banners

Besides, slideshow banners (carousel-style) typically follow widescreen ratios to align with the full-width layout of modern homepages. Their common aspect ratios include:

• 16∶9 – the dominant format for full-screen hero or slideshow banners.
• 2∶1 or 3∶1 – ultra-wide panoramic layouts suitable for promo strips or thin banners.
• 9∶5 or 16∶10 – supported by some Shopify themes (e.g., Sense, Dawn)

In fact, there is no single “perfect” Shopify hero banner size because themes control display behavior, not raw image dimensions. Specifically,

• Theme height settings directly affect the visible area. Most typical Shopify themes, like Dawn, allow banner height options such as small, medium, or large. These settings change the effective aspect ratio, often cropping the top and bottom of wide images rather than displaying them fully.
  
• Different themes prioritize different compositions. For example, Dawn emphasizes centered content and aggressive responsive cropping, while Impulse may expand hero sections closer to full-viewport height, especially when promotional overlays or parallax effects are enabled.

As a result, composition matters more than resolution. That’s why Shopify and theme developers advise keeping core visual content within a safe “center zone” and following the theme-specific image guidelines whenever available

Blog and featured images

Blog and featured images play a different role from commerce visuals on a Shopify store. Rather than influencing purchase decisions directly, they are designed to enhance content engagement, improve readability, and increase shareability across channels.

The most reliable, widely referenced dimensions for blog visuals in Shopify stores are:

• Featured blog post (cover) images: 1200 × 800 px – A common and theme-friendly default size with a 3:2 aspect ratio that scales well across desktop and mobile.

Some themes may prefer slightly wider featured images around 1800 × 1000 px, still in a 16:9–1.8:1 range, especially where the image spans full width.

• In-content blog images: 1024 × 683 px (3:2) ideal for inline images within blog posts, balancing readability and performance.

Smaller inline images (e.g., 1000 × 350 px) can also work depending on layout needs.

• Mobile-specific sizes: For responsive design, Shopify’s image system automatically downsizes, but using the sizes above ensures sharp visuals on mobile screens. 

Many merchants, including yourself, may be unclear whether to use landscape images or square images.

• Landscape images: Best for featured banners and in-post headers because they span wider content areas, avoiding awkward whitespace above or below the image. They are especially useful for visual storytelling, infographics, and long screenshots.
• Square images: May be more appropriate for thumbnails or visual elements paired with text blocks within the article. However, square images can look too rigid or too tall when used as header images.

Compared to product images, blog images should be smaller in both dimensions and file size because:

• Content-heavy articles load text faster when images are lightweight, reducing delays and lowering bounce rates.
• Illustrative and contextual visuals do not require large pixel dimensions to remain effective.
• Smaller images adapt smoothly across screen sizes without forcing browsers to download and then downscale large files.
• Optimized blog images improve Core Web Vitals, supporting better search rankings.

Follow the Avada’ Shopify blog featured image size to learn how to create and optimize a balanced, mobile-friendly blog featured image.

Logo image size

Shopify doesn’t enforce a rigid logo size, but both Shopify’s official guidance and recent expert sources highlight a range of effective logo dimensions you can use depending on layout and format: 

• Standard header logo: 250 × 250 px (1:1), well-suited for compact or square logo designs, 400 × 100 px (4:1) works for longer horizontal logos and site headers.
• Creating your source logo at about 2× the recommended display size (e.g., 800 × 200 px for a 400 × 100 px displayed logo) and letting the theme downscale it can result in sharper visuals on retina screens. This technique is especially useful if you cannot use SVG. 
• Favicon and app icons: 16 × 16 px for standard favicon size, 32 × 32 px for retina favicon size, 48 × 48 px for higher-density favicon option.

Avada’s guide on optimizing Shopify logo size highlights how proper logo dimensions and theme customizer settings help improve your store’s visual identity and loading speed.

File Size, Format, and Upload Limits on Shopify

Even perfectly sized images can underperform if they are poorly formatted or compressed. So, take care of file optimization, which is the decisive factor in real-world performance.

Shopify image upload limits

Shopify allows images up to:

• 20 megapixels (total pixel count), and
• 20 megabytes (MB) in file size per image.

This means an image that is very wide and tall (e.g., more than roughly 5000 × 5000 px) will be rejected even if the file size is under 20 MB. Likewise, a high-resolution image with too many pixels can trigger an “exceeds limits” error even if the actual MB size is acceptable

Just because Shopify permits a file up to 20 MB or almost 25 million pixels does not mean you should use that size:

• Large files slow down your store. Even if the CDN serves resized versions, the original heavy source still needs to be uploaded, processed, cached, and sometimes delivered.
• Performance and SEO matter. Images that approach the upload limit often load slowly, hurting metrics and overall UX. 
• Different contexts require different sizes. A product image and a banner have very different performance expectations despite having the same upload limits. 

Recommended file size for performance

Most optimized e-commerce stores follow practical targets based on image role. These aren’t hard rules, but they reflect performance best practices where visual quality meets speed.

• Product photos: ~100–300 KB each
• Collection thumbnails: ~100–250 KB
• Homepage banners & slideshows: ~200–500 KB
• Blog featured images: ~150–300 KB
• Logos and icons: ~20–100 KB

It is true that file weight often matters more than pixel dimensions

• Network speed variance: Many visitors are on mobile or slower connections. Heavy images lead to longer load times and higher bounce rates. 
• Responsive image delivery: Shopify’s CDN serves different sizes to different devices but it still needs to fetch and process the original source. Smaller originals mean faster CDN delivery.
• SEO and performance scores: Third-party tools penalize large files regardless of dimensions, especially if they delay LCP. 

Image formats to use

JPEG vs PNG: when to use each

Shopify supports JPEG, PNG, GIF, HEIC, and WebP, with the platform automatically detecting the best output format for a visitor’s browser.

JPEG (.jpg/.jpeg)

• Best choice for photographs and complex images (products, banners, lifestyle shots).
• Uses lossy compression to reduce file size significantly while preserving acceptable quality.
• Ideal for most e-commerce image needs where transparency is not required.

PNG (.png)

• Best for graphics, logos, icons, and images with transparency.
• Uses lossless compression, which preserves pixels perfectly but leads to larger file sizes.
• Should be used sparingly on performance-critical pages.

WebP is a modern image format that offers significant file size reductions compared with PNG or JPEG, often ~25–35% smaller without noticeable quality loss. 

• Shopify automatically delivers WebP to browsers that support it. 
• WebP can be used as your source upload format in Shopify, but ensure fallback quality for browsers that don’t support it (older Safari versions, rare legacy browsers). 
• WebP with alpha transparency can replace PNGs in many cases with much smaller file sizes.

WebP is increasingly recommended as the default format for product and page visuals because of its efficiency.

Significantly, transparency becomes a requirement when the image must visually integrate with its surrounding layout rather than sit on a fixed background, such as:

• Your logo or icon needs to float over backgrounds (e.g., header with color overlays).
• UI elements (buttons, badges, icons) require no visible background block. 
• Overlays or layered visuals are part of the design.

In these cases, PNG or WebP with alpha transparency is appropriate. Otherwise, avoid PNG for large images, as it increases file weight and hurts performance.

How to Choose the Right Image Size for Shopify

Your store will look sharper and load faster when images are sized thoughtfully, depending on where they appear and how users interact with them.

• Consider where the image is used: Different parts of your store serve different visual goals. Define each image role clearly and follow the suitable dimensions or file size.
• Decide whether the image needs zoom: If users need to zoom (e.g., on product detail pages), you need images that support it. Shopify’s recommended sizes for zoomable product images ensure detail without distortion when users pinch or hover to inspect product features. 
• Check if the image appears above the fold: Hero banners, primary product visuals, and collection headers shape first impressions. Because these images load before any interaction, they directly affect perceived speed and engagement. Optimize them for efficient file size rather than maximum resolution.
• Account for mobile-first viewing: Mobile traffic dominates Shopify stores. Images that look sharp on a desktop may load slowly or crop poorly on smaller screens. Use responsive images or mobile-appropriate dimensions to maintain quality without sacrificing speed.
• Avoid using one image size everywhere: Reusing the same large image across banners, thumbnails, blogs, and icons increases page weight and degrades performance. Convenience here leads to slower loads and inconsistent visual quality.

Instead, follow a strategic sizing framework:

• Use large, sharp images where users interact or zoom (products, hero visuals).
• Use moderate sizes for content images that don’t need detail.
• Use small, compressed images for thumbnails and icons.

Common Shopify Image Size Mistakes Merchants Still Make

Even experienced Shopify merchants often fall into predictable image sizing pitfalls that hurt performance and user experience. 

• Uploading camera-original images: Modern digital single-lens reflex or smartphone cameras produce extremely high-resolution images (often 4000 – 6000+ pixels wide), which are vastly larger than what most Shopify layouts require. These originals add unnecessary file weight, slow page loads, and drag down Core Web Vitals. 

• Treating all images the same: Product photos often need great detail for zoom and clarity, but hero banners, slideshows, and promotional headers have different requirements. Falling in matching their size leads to oversized files that are slow to load and can be awkwardly cropped. 
• Mixing aspect ratios across the store: Inconsistent aspect ratios can leave category grids looking misaligned and unprofessional. When images in the same frame have differing shapes, Shopify’s theme may stretch or center-crop them unpredictably, leading to uneven rows and awkward whitespace. 
• Relying entirely on Shopify to fix image issues: Shopify’s CDN automatically resizes and serves images to different screen sizes, but it doesn’t fix poorly prepared originals. If you upload a massive, unoptimized photo, the CDN may still serve large file versions before scaling down, and themes may crop or compress unpredictably. 

Relying on Shopify alone often results in slower pages and unnecessarily large downloads for visitors. Merchants should proactively optimize by resizing to correct dimensions, compressing formats, previewing in the theme editor, etc., to ensure both performance and visual quality.

How to Check and Fix Image Size Issues in an Existing Shopify Store

If your Shopify store already feels slow or inconsistent, image sizing is one of the fastest areas to audit and improve. The key is knowing what to fix first and how, without breaking your layout.

1. How to identify oversized images on live pages: 

Start with your live storefront, not the admin. Use browser tools like Chrome DevTools by clicking Inspect → Network → Img or PageSpeed Insights to see the actual file size and dimensions being downloaded. Red flags include:

• Images are loading at 2000+ px wide but displaying at only a few hundred pixels
• Individual images weighing 1 MB+, especially above the fold

These tools show you which images are silently hurting load time.

2. Which images to fix first for maximum impact: Not all images are equal. Prioritize in this order:

• Above-the-fold images (hero banners, main product images, collection headers)
• Product images used across many pages (featured products, related products)
• Homepage slideshows or carousels

Optimizing just a few high-visibility images often delivers bigger speed gains than fixing everything at once.

3. When resizing is better than compression

Compression reduces file weight, but it doesn’t fix excessive dimensions. If an image is uploaded at 5000×5000 px and displayed at 800×800 px, compression alone isn’t enough. 

In these cases, resize the image to the maximum size it’s actually used, then compress. Resizing removes unnecessary pixels. Compression fine-tunes quality.

4. When to re-upload images instead of reusing old ones: Re-upload images when:

• The original file is far larger than needed
• The aspect ratio doesn’t match your theme layout
• An image is reused in multiple contexts (e.g., product + banner)

Shopify’s CDN can optimize delivery, but it can’t fix poor source images. Clean inputs produce clean outputs.

To recap

The difference between a fast, polished store and a sluggish one often comes down to whether images are chosen with intent: correct dimensions, consistent ratios, and file weights that respect how modern shoppers browse.

The good news is that optimizing image size for Shopify is no longer a groundless effort. When you size Shopify photo for purpose, prioritize above-the-fold visuals, and fix legacy uploads rather than piling on new ones, speed and clarity work together. Do this well, and your store will feel faster, more trustworthy, and easier to buy from.

That’s the kind of improvement customers notice immediately, even if they never see a single extra pixel.

FAQ