Image Sizes: A Complete Guide for Shopify Stores

Image dimensions have a direct impact on both the visual appearance and loading speed of your Shopify store. However, there is no single image size that works perfectly for every type of content. Background images, banners, product images, and logos all require different dimensions and specifications.

According to statistics from analytics platforms such as Statcounter, mobile devices are now used to access the internet more frequently than desktop computers. This makes it essential to design your store so that content displays correctly and maintains high visual quality across screens of all sizes.

If an image is too small, it may appear blurry or pixelated. On the other hand, an unnecessarily large image file can increase page load times, making users wait longer for content to appear.

That is why, when preparing images for a Shopify store, you should consider three key factors: pixel dimensions, file size, and responsive design.

Optimal Image Size for a Website

The recommended image dimensions depend on where the image will be used. Large banners typically require greater width, while thumbnails and smaller interface elements can use significantly lower resolutions.

As a general guideline, you can use the following dimensions: approximately 1920 px wide for large banners, around 1200 px for primary content, and 300–800 px for thumbnails. For web images, compressed formats such as WebP are also recommended to maintain good visual quality without unnecessarily increasing website loading time.

It is important to distinguish between an image's pixel dimensions and its file size. An image can have large dimensions while taking up relatively little storage space after proper optimization and compression.

Files larger than 20 MB can have a noticeable impact on website performance. In most cases, it is better to aim for a smaller file size — up to 1 MB, and for many images, around 500 KB. However, these are practical recommendations rather than Shopify-imposed limits.

Another important parameter is the alt attribute. It does not increase the image file size and has virtually no impact on page performance, but it is used by screen readers and plays an important role in website accessibility. ALT text should be concise, but most importantly, it should accurately describe the image and be relevant to the context of the page. A common best practice is to keep it to approximately 125 characters, including spaces, although Google does not impose an official character limit. Avoid keyword stuffing and focus on writing clear, useful descriptions.

Recommended Image Dimensions for Desktop and Mobile Devices

These are not strict requirements. Final dimensions should be adjusted based on the specific design and responsive design principles.

There is one important rule to keep in mind: the actual display dimensions of an image on the page should ideally be smaller than the dimensions of the original uploaded file. This provides enough resolution for different screen sizes without forcing the browser to load unnecessarily large files.

Main Image Sizes for a Website

Most websites use several main categories of images, including background images, hero sections, banners, blog post images, and logos. Each category has its own specific requirements.

Background Image Size

Background images are typically among the largest images on a page. They can cover almost the entire screen and are commonly used, for example, in the above-the-fold section of a homepage or on a landing page.

If an image needs to cover a large area of the screen, it should have sufficient width to maintain good visual quality on larger monitors.

Recommended guidelines:

• Recommended width: 2560 px

• Recommended height: 1440 px

• Aspect ratio: 16:9

• Recommended maximum file size: 1–2 MB

Whenever possible, the actual file size should be reduced through image compression and the use of modern image formats.

Lois Jeans

Hero Image Size

A hero image serves a similar purpose, but it typically takes up less vertical space than a full-screen background. This approach is useful when you want to display both an image and text above the fold without requiring users to scroll immediately.

If you would like to learn more about how to choose a hero image, where to use it, and how it can affect an eCommerce website, we also recommend reading our guide, “Hero Image for Websites: Types and How to Use Them in eCommerce”.

For a hero section, an image with a width of 1280–2500 px and a height of approximately 720–900 px will generally work well. The 16:9 aspect ratio remains a good baseline.

A recommended file size is up to 3 MB, although for faster page loading, it is preferable to keep the file as lightweight as possible.

Pure Peptides

💡 For above-the-fold images, it is important to consider not only the file size but also how the image is loaded. If the hero image is the Largest Contentful Paint (LCP) element, Shopify recommends not using loading="lazy" for it and instead loading the image immediately. The fetchpriority="high" attribute can also be used for an LCP image.

Banner Image Size

The ideal banner dimensions depend primarily on its purpose and placement. For example, advertising banners must comply with the requirements of the specific advertising platform, so there is no single universal size. One of the most widely used platforms for banner advertising is Google Ads.

For standard rectangular banners that are not advertisements, compact horizontal formats are generally a good choice. The exact dimensions may vary depending on where the banner is displayed on the page.

For advertising images, use the requirements of the relevant advertising platform as your primary reference:

• Width: depends on the advertising platform.

• Height: depends on the advertising platform.

• Aspect ratio: varies by placement and platform.

• File size: around 150 KB, if this is within the platform's requirements.

If a banner is used within the website itself rather than as part of an advertising campaign, its dimensions should be selected based on the actual display area.

Google Ads provides recommendations for the optimal sizes of display ads,
including ad formats designed for mobile devices.

Google's recommendations for image sizes
for display ads in desktop browsers

Blog Image Size

Images used in blog posts can come in various sizes, but it is useful to maintain a consistent format for featured images. This is especially important for article covers, as using consistent proportions helps create a clean and cohesive look across the blog.

For example, the original file may be 1800 × 1200 px, while the image is displayed at a significantly smaller size on the page. This is perfectly normal: the larger source file provides additional resolution for quality, while the website controls the actual display dimensions.

For a blog post's featured image, you can use the following guidelines:

• Width: 1200 px

• Height: 800 px

• Aspect ratio: 3:2

• Recommended file size: up to 3 MB

It is best to use a consistent size and aspect ratio for featured images, especially when they appear both in blog cards and on individual article pages.

Logo Size

A logo usually occupies a relatively small area of a website, so it rarely requires the same resolution as a large hero image.

The ideal format depends on the logo itself. A 1:1 aspect ratio works well for compact graphic marks and icons, while a horizontal format is more suitable for long brand names or wordmarks.

It is generally recommended to keep the file size around 500 KB or less.

For logos that need to remain sharp at different sizes, it is also worth considering the advantages of vector graphics. You can learn more about logo formats in our guide, “What Is a Vector Logo? A Complete Guide to Vector File Types”.

Image Sizes for Mobile Devices

Mobile screens are significantly smaller than desktop displays, so preparing images for mobile requires finding the right balance between visual quality and file size.

An image that is too small may look poor when enlarged, while an unnecessarily large image can place additional load on page performance.

High-quality images are particularly important for eCommerce stores, where customers may need to zoom in and examine products in detail. At the same time, images of the same type should ideally use consistent aspect ratios. This helps maintain a clean and uniform appearance throughout the product catalog.

For example, square images can work well for product cards. They are easier to scale and position on smaller screens. Square and portrait-oriented images also make efficient use of smartphone screen space, allowing more product details to be displayed without requiring users to scroll constantly.

Image Sizes in Shopify

For product and collection images, Shopify supports images up to 5000 × 5000 px (25 MP) and under 20 MB.

For square product images, 2048 × 2048 px is a practical recommendation. This provides sufficient resolution for viewing and zooming while avoiding unnecessarily large files.

If your store uses image zoom functionality, Shopify recommends using images larger than 800 × 800 px.

However, the maximum supported dimensions do not mean that every product image should be uploaded at the maximum resolution. The larger the file, the more data the browser needs to download.

Shopify automatically optimizes images when serving them to the storefront. Its CDN can resize and transform images based on the context in which they are displayed and the capabilities of the user's browser.

Therefore, the goal for a store owner is not to manually create a separate image file for every screen size. Instead, upload a high-quality source image with appropriate dimensions and a consistent aspect ratio, and let Shopify handle image delivery and optimization for different devices and contexts.

Why File Size Matters

Image dimensions in pixels are only part of the equation. The actual file size is equally important.

This becomes especially noticeable on smartphones and when users have an unstable or slow internet connection. A high-resolution photo may be several megabytes in size even though it is displayed at a fraction of its original dimensions on the screen. If your source images are unnecessarily large, you can compress them or convert them to a more efficient format using dedicated image optimization tools.

Preparing Images for Mobile Screens

Shopify automatically optimizes images through its CDN and can deliver different image sizes and formats depending on how the image is requested by the theme and what capabilities are supported by the user's browser.

However, automatic optimization does not eliminate the need to prepare your source files properly. A large source image can still require additional resources, particularly if the system does not serve the most efficient version for a specific context.

Screen orientation is another important consideration. Desktop displays typically provide a wide horizontal viewing area, while smartphones have a much narrower viewport and are often used in portrait orientation.

For this reason, avoid uploading unnecessarily large images. Excessive compression can also reduce image quality, but using the largest possible file is not the solution either. The goal is to find the smallest file size that still preserves the level of detail and visual quality required for the image.

Why Image Size Matters for Your Website

Properly optimized images affect several aspects of a website. Most importantly, they can improve the user experience, contribute to faster page loads, and support the website's overall search performance.

User Experience

When images are appropriately sized, content is easier for visitors to consume. Product and editorial images should not be so small that important details are difficult to see, but they should also not be unnecessarily large or take up excessive space on the screen.

For example, fashion brand Aje has placed a strong emphasis on the mobile-first experience. After migrating to Shopify Plus, the company redesigned its mobile storefront to improve visual presentation, navigation, and product interactions. This approach makes it possible to showcase products in sufficient detail without overwhelming the limited screen space available on mobile devices.

Aje

Website Loading Speed

The larger the file, the more data the browser needs to download before it can display the image. As a result, large image files can increase page load times on both desktop and mobile devices.

The speed at which content loads and becomes visible is measured using performance metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP). These metrics can be evaluated using Google PageSpeed Insights.

If you would like to learn more about how website speed affects SEO, sales, and user retention, we recommend reading our guide, “Why Website Loading Speed Is Critical for a Shopify Store”.

Image optimization helps reduce the amount of data that needs to be transferred and lowers the risk of users leaving the page because they have to wait too long for content to load.

In this example, the server took 1.8 seconds to load the first image
and 1.9 seconds to load the largest image. PageSpeed Insights

Search Engine Optimization

A website's position in search results depends on many different factors. User experience also plays an important role, so page speed and the proper rendering of content cannot be completely separated from SEO.

Optimized images can help pages load faster and make the overall browsing experience more comfortable. This is particularly important for pages where images make up a significant portion of the content.

For eCommerce stores, images are also an important part of product page optimization. To learn more about a comprehensive approach to product page SEO, see our guide, “How to Improve Product Page SEO in a Shopify Store”.

Which Image Format Should You Choose for Your Website?

The choice of image format affects both visual quality and file size. Different formats are better suited to different use cases.

WebP

WebP is a modern image format developed by Google for use on the web. It supports both lossy and lossless compression.

WebP can significantly reduce image file sizes compared with JPEG and PNG while maintaining comparable visual quality. The actual results depend on the source image and compression settings.

For this reason, WebP is widely used for website images when the goal is to maintain good visual quality while keeping file sizes under control.

JPEG

JPEG is one of the most widely used formats for photographs and complex images containing a large number of colors.

Its main advantage is the good balance between image quality and file size. However, JPEG typically uses lossy compression, which means that some image data is discarded as the file is compressed.

PNG

PNG uses lossless compression, allowing the image to retain its original visual information after compression. It also supports transparency.

PNG is often a good choice for graphics, logos, and other images where sharp details or a transparent background are important. However, PNG files can often be larger than their JPEG or WebP counterparts.

SVG

SVG is a vector image format in which graphics are described using mathematical shapes and paths rather than a fixed grid of pixels. This allows SVG images to be scaled to different sizes without losing quality.

SVG is particularly well suited to logos, icons, and other graphics that need to remain sharp at different display sizes.

SVG files can also be relatively lightweight, helping reduce the amount of data that needs to be downloaded by the browser.

AVIF

AVIF is a modern image format designed for efficient delivery on the web.

It provides highly efficient compression and can produce small files while maintaining high visual quality. In many cases, AVIF files can be significantly smaller than equivalent WebP or JPEG files.

AVIF can offer excellent compression and often produce smaller files than WebP or JPEG. However, WebP remains a more broadly supported and practical option in many workflows. The best format should ultimately be selected based on browser support, the characteristics of the image, and the capabilities of the platform being used.

GIF

GIF is a raster image format that supports simple animation. It uses lossless compression but is limited to a maximum of 256 colors.

GIF is still used for simple animations, but video and modern image formats can be significantly more efficient for more complex animations in terms of file size and visual quality.

For static images, GIF is generally less efficient than modern formats. However, it remains useful for short, simple, looping animations.

How to Check an Image's Dimensions on a Website

You can check the actual dimensions of an image directly in your browser without downloading the file to your computer. To do this, use the browser's built-in Inspect tool.

How to Check Image Dimensions

Open the page containing the image you want to check and move your cursor over the image. Then right-click and select “Inspect” from the context menu.

A panel containing the page's HTML code will open. At first glance, the code may look complicated, but there is no need to search through the markup manually.

Once the element is selected, the browser will highlight the corresponding section of the code. Hovering over it will also highlight the image directly on the page.

In the browser's element information, you can see how many pixels the image occupies in its current display size. If you resize the browser window, the displayed dimensions may change.

If you need to check the dimensions of the original image file, you can find its source URL and open the image directly to view its file information.

Image Optimization Tools

You do not need complex software to resize and compress images. A variety of online tools and Shopify apps can help you quickly prepare image files for your website.

Some options include Shopify Image Resizer, Image Optimizer by Squirai, and LoyaltyHarbour Image Optimizer.

Shopify Image Resizer

Shopify offers a free online image resizing tool that can be used to prepare files for websites, marketing materials, and social media.

The tool provides preset dimensions for different types of content, including Instagram posts and Stories, YouTube thumbnails, and other visual formats.

Image Optimizer by Squirai

Squirai provides an image optimization tool designed to automatically optimize images with performance and SEO in mind.

The app can process images already uploaded to your store and automatically handle new images added later.

It also provides an option to add watermarks to product images, helping protect your photography without requiring manual code changes.

LoyaltyHarbour Image Optimizer

LoyaltyHarbour Image Optimizer also automates image compression across your store.

From the app's dashboard, you can configure automatic ALT text generation and image format conversion. This allows you to address file size, SEO, and page speed as part of the same optimization workflow.

For more advanced manual image editing, you can use software such as Photoshop. However, this approach generally requires more time and technical expertise.

It is important to note that most Shopify stores do not necessarily need a dedicated image conversion or optimization app. Shopify's CDN automatically optimizes images when they are delivered to visitors. Third-party apps can still be useful for bulk-compressing existing images, managing ALT text, or automating additional optimization tasks.

How to Fix Common Image Issues

Image-related problems can occur even after the initial optimization process. In most cases, they are caused by incorrect dimensions, excessive file sizes, quality loss, or broken image URLs.

The Image Has the Wrong Dimensions

Problem: The image appears too large or too small, disrupting the layout of the page.

Solution: Check the recommendations provided by your theme or template and determine the appropriate dimensions for the specific section. If the platform allows you to control the displayed image size, make sure the image is not being rendered at its full original dimensions when this is unnecessary.

The Image Loads Too Slowly

Problem: The image appears significantly later than other page elements or fails to load altogether.

Solution: Check the image format and file size. Images that are unnecessarily large should be compressed or converted to a more suitable format. SVG can be a good option for logos and simple graphics, while WebP is generally well suited to photographs and other raster images.

The Image Looks Blurry

Problem: The image appears pixelated or lacks sufficient sharpness.

Solution: Use a higher-resolution source image. It is important, however, to understand the difference between image dimensions and resolution.

Image dimensions refer to the width and height of an image in pixels. For web pages, the number of pixels determines how large an image can be displayed before noticeable loss of detail occurs. A higher-resolution image contains more visual detail at the same physical display size.

If an image has become noticeably worse after compression, try reducing the compression level or using a lossless format such as PNG.

The Image Does Not Display at All

Problem: A blank area or a missing-image icon appears instead of the image.

Solution: Check the image URL. It should point directly to the correct file. Also verify the file name and extension included in the URL.

For example, if the original file uses the .webp extension, the URL should not point to a .jpg version. The file name and extension must match the actual file being requested.

How to Properly Optimize Images for Your Website

Images are an essential part of modern websites, especially for eCommerce stores and content-driven projects. They help showcase products, communicate information, and make interfaces easier to understand and navigate.

At the same time, images can also become a source of performance issues. Files that are too large can increase page load times, while images that are too small can result in noticeable quality loss.

When preparing images, it is therefore important to consider more than just pixel dimensions. You should also take into account the actual file size, image format, aspect ratio, and the size at which the image will be displayed on the page.

Image optimization is only one part of the technical work involved in maintaining a Shopify store. If you need a more comprehensive review of your store's performance and other technical aspects, you can also read our guide, “Basic Shopify Store SEO Optimization: A Step-by-Step Guide”.

The optimal approach is to use an appropriate resolution for each specific section, compress images without noticeable quality loss, and choose a modern image format whenever it is suitable for the use case.

It is also important to understand that a separate mobile image is not always necessary. When only the resolution needs to change, responsive images using srcset and sizes allow the browser to select the most appropriate image size for the device and viewport. A separate mobile image is particularly useful when the mobile layout requires a different crop, composition, or aspect ratio.