Shopify image sizes: 2025 guide [all images & expert tips]

Reading Time: 8 minutes

Shopify image sizes can feel like a minefield. If you get them wrong, it can affect your load speed, search engine performance, conversion rates, and more. If you get them right, you’ll have a site that looks great, ranks high, and performs well on all devices.

Fortunately, figuring out these sizes is easier than you might think. It’s simply a case of staying up to date with the correct size for each type of image on Shopify. Below, we’ll explain why image size matters and which dimensions work best for all image types on your Shopify site.

Why image size matters for Shopify

There are several reasons why image sizes matter for your Shopify store:

• Page load speed: Optimized images help your store load faster, reducing bounce rates and improving SEO rankings
• Mobile performance: Properly sized images ensure responsiveness and smooth browsing on smartphones and tablets
• Conversion rates: Optimized images can increase sales, with 90% of shoppers saying a good-quality photo is the most important factor in online sales
• Visual consistency: Consistent image sizes give your Shopify store a professional, cohesive look
• SEO ranking: As we touched upon above, Google considers page speed in rankings, making optimized images crucial for visibility

Shopify image sizes

Image type	Desktop dimensions	Mobile dimensions	Aspect ratio	Examples
Hero image	2800 x 1200 px	1200 x 800 px	– 21:9 (desktop) – 3:2 (mobile)	Homepage main banner, collection page headers
Website banner	1920 x 400 px	800 x 300 px	– 4.8:1 (desktop) – 2.7:1 (mobile)	Top promotional banners, announcement bars
Collection card	1600 x 1600 px	800 x 800 px	1:1	Category thumbnails on homepage
Product image	2048 x 2048 px	1024 x 1024 px	1:1	Main product image on product pages
Product gallery images	2048 x 2048 px	1024 x 1024 px	1:1	Additional product views, detail shots
Product thumbnails	400 x 400 px	200 x 200 px	1:1	Small product previews in cart
Brand logo	400 x 200 px	200 x 100 px	2:1	Header logo, footer logo
Social media share image	1200 x 630 px	1200 x 630 px	1.91:1	Image shown when sharing on social media
Blog post featured image	1800 x 1000 px	900 x 500 px	16:9	Blog post header images

While the sizes in this chart are widely used, you should always double-check them on your site, as different Shopify themes and responsive designs may have their own requirements.

Hero image

Typically appearing at the top of your homepage, a hero image is the main visual statement for your store. It’s the first impression of your brand for many customers, so you’ll want to showcase your brand’s personality. Ensure important elements are centered so they remain visible on all devices.

• Use high-resolution images (2800 x 1200 px minimum)
• Test text overlay readability on both light and dark areas
• Compress the final image to under 500KB for fast loading
• Create seasonal variants for different campaigns
• Avoid cluttered compositions that don’t scale well

Website banner

Website banners are slim, horizontal images used for announcements, promotions, or sales. They keep text minimal and legible to encourage click-throughs. Contrasting colors can be used for better visibility.

• Keep the height under 400 px to avoid pushing content down
• Use bold, simple fonts that stay readable when scaled
• Create separate versions for mobile and desktop
• Include a clear call to action with a button in a contrasting color

Collection card

Collection cards display your different product categories, allowing customers to explore your range in more depth. Images should represent the category’s content for quick, simple navigation.

• The general rule is to maintain a 1:1 aspect ratio for a consistent grid layout, but exceptions may apply depending on your store theme
• Use lifestyle images that accurately represent category themes
• Keep file sizes under 200KB each
• Create templates for consistent text placement
• Use depth of field to draw attention to key products

Product image

Your main product images are crucial for conversions, showing customers the product they’re buying in the simplest way possible. Shoot products straight on against a clean, white background. You can show them in situ on other images — just focus on the product to start with.

• Use a true white background (RGD: 255, 255, 255)
• Maintain consistent positioning across products
• Enable hover zoom on the desktop for customers to have a closer look
• Include a size reference object when relevant (such as handheld devices)
• Use soft, even lighting to minimize shadows

Product gallery images

Gallery images are often used in a carousel after the main product image or elsewhere on the product page. They show additional angles, details, and usage context for your products. Some ideas include lifestyle shots, detail close-ups, and size-reference images.

• Include at least five images per product
• Show all color variations
• Demonstrate your product being used
• Highlight unique features in close-ups
• Include packaging shots if relevant

Product thumbnails

Thumbnails are scaled-down product images that appear in search results, cart views, and related product suggestions. They’re designed to be instantly recognizable, even in small sizes, so simplicity and clarity are vital.

• Keep file sizes under 50KB
• Test visibility at 400 x 400 px and smaller
• Use center-weighted composition
• Avoid busy backgrounds
• Ensure the product fills 80% of the frame
• Implement lazy loading to improve performance
• Create sharp edges for better distinction

Brand logo

Your logo is a recognizable icon that’s familiar to customers. It needs to work across multiple placements on your site — and multiple sizes, too. Ensure it’s legible at both large and small scales to strengthen brand recognition across your site.

• Save as SVG whenever possible
• Create versions with and without your tagline
• Include white, black, and color versions
• Test favicon compatibility
• Maintain clear space around your logo
• Create square and horizontal variants
• Save PNG versions with transparent backgrounds 

Social media share image

These images appear when your products are shared on social platforms like Facebook and Twitter. The image appears as part of a clickable link, which can entice customers in. You should design them with platform-specific dimensions in mind.

• Create templates for consistent branding
• Keep text minimal and large
• Test on multiple platforms
• Include clear branding elements

Blog post featured image

Featured images typically appear at the top of blog posts, with a smaller preview on your blog page. They should be visually striking while relating to the content — or even backing it up. Use consistent styling across all blog posts for stronger brand cohesion.

• Use consistent color schemes
• Keep file sizes under 300KB
• Maintain 16:9 aspect ratio
• Use relevant imagery rather than generic stock photos
• Add alt text for SEO, which describes the content or meaning of an image

Best formats for Shopify images

As well as Shopify image sizes and dimensions, it’s worth noting the different types of formats you can use for your ecommerce store:

• JPEG/JPG: Universal format for photographs — use 80-85% quality for a good balance
• WebP: A modern format with the best compression, ideal for product photos and banners (with JPEG fallback)
• SVG: Infinitely scalable and the smallest in terms of file size — perfect for logos and icons
• PNG: Ideal for images that need transparency, such as logos (when SVG isn’t possible)

Tools to resize images for Shopify

Need to resize images for your Shopify store? Here are three tools that are built for Shopify and work seamlessly from your Shopify admin:

Image Resizer from Shopify

First on our list is Shopify’s own image resizer tool. There’s nothing to download or install. Simply upload your images with a maximum of six at a time, then select the platforms you’re using them on.

The tool allows you to export images in the correct sizes for different social media platforms, such as Instagram, Facebook, YouTube, and Twitter. There’s also a 1:1 square option and several standard rectangle sizes, such as 2:3 and 16:9. It’s completely free, and you can use it as much as you want.

Avada SEO Speed Image Optimizer

Avada’s image optimizer tool does more than just resize your images so they look the part. It compresses images and implements lazy loading to enhance page speed across your site. The tool includes an SEO audit to check for details like alt text on images and many other SEO factors elsewhere on your site.

You can set up a monthly scan, which optimizes your images automatically and reports any issues identified on your site. There’s a free plan with limited functionality, Pro for $34.95/month, or Enterprise for $99/month.

Tiny SEO Speed Image Optimizer

TinyIMG is a similar image optimization tool for Shopify stores. It covers the same functions as Avada’s tool, such as SEO audits, image compression, and lazy loading. Images are compressed as much as possible without reducing their quality.

The tool also has in-built AI, allowing you to optimize alt text and file names automatically. With the free plan, you’ll need to pay for anything beyond 50 optimizations. There’s also Beginner (1,500 images/month for $14/month), Advanced (5,000 images/month for $24/month), and Yearly (10,000 images/year for $96/year, billed annually).

Summary

Shopify image sizes are vital for the appearance and performance of your site. You should check the latest recommended sizes for all the image types, from hero images and website banners to product gallery images and thumbnails. Bear in mind that some themes and designs may have their own requirements.

Alongside sizes, there are a range of image formats you can use to improve the performance of your site, including JPEG, WebP, SVG, and PNG. You can use Shopify’s free tool to resize images for free or install plugins like Avada and TinyIMG to optimize page speed in a number of ways, including image compression.