---
title: What image sizes should I use?
url: https://support.troopthemes.com/faqs/what-image-sizes-should-i-use/
---

# What image sizes should I use?

Whenever you upload an image to the theme editor, Shopify creates different sizes of that image and will serve appropriate size for different devices or browsers to ensure better performance ,  but you'll still have to compress images so they’re not too large to begin with.

When creating images for your store, we recommend the following dimensions:

`2048px` for full width images

`1536px` for three-quarter width images

`1024px` for half width images

`768px` for quarter width images

`400px` for icons images

For mobile-specific images, we recommend the following dimensions:

`828px` for full width images

`414px` for half width images

`200px` for icons images

> **Most common screen sizes**
>
> [Statcounter Global Stats](https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide) (March 2026): most common desktop resolution is **1920 x 1080**.
> [Mobile stats](https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide) (March 2026): common phone resolutions include **414 x 896**, **360 x 800**, and **390 x 844**.

## Product images

We recommend using product images with dimensions from `1024 x 1024px` to `2048 x 2048px` for best results. However the most optimal size and aspect ratio of product images can be dependent on the type of product.
For example, products such as jewelry made need to be saved at a larger size to allow for zoom functionality.

> **Consistency is key! **
>
> To make your product images appear uniform side-by-side, you need to use a consistent aspect ratio, or width-to-height ratio. For more info read Shopify's guide on [image aspect ratios](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/media-editor).

## Text columns or Grid with overlay images

For image blocks in text columns or grid sections, calculate recommended widths based on the number of columns:

- Desktop width = `2048 / desktop columns` (up to 5 columns)
- Mobile width = `828 / mobile columns` (up to 2 columns)

Use the nearest whole pixel when the result is a decimal.

<div style="display: flex; justify-content: center;">
  <table>
    <thead>
      <tr>
        <th>Layout</th>
        <th>Recommended image width</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Desktop, 1 column</td><td><code>2048px</code></td></tr>
      <tr><td>Desktop, 2 columns</td><td><code>1024px</code></td></tr>
      <tr><td>Desktop, 3 columns</td><td><code>683px</code></td></tr>
      <tr><td>Desktop, 4 columns</td><td><code>512px</code></td></tr>
      <tr><td>Desktop, 5 columns</td><td><code>410px</code></td></tr>
      <tr><td>Mobile, 1 column</td><td><code>828px</code></td></tr>
      <tr><td>Mobile, 2 columns</td><td><code>414px</code></td></tr>
    </tbody>
  </table>
</div>

## Aspect ratio settings

> **Compatibility**
>
> Aspect ratio settings are available for the following themes:
>
> - Beyond - versions 2.6.3 and up
> - Blockshop - versions 8.6.3 and up
> - Maker -  versions 7.6.3 and up
> - Emerge - versions 5.6.3 and up

Aspect ratio settings give merchants more control over images compared to height settings. Instead of fixing a height, aspect ratios use the width of the image and the natural dimensions of the image provided.

Our aspect ratio settings range from 24 to 200 in desktop, and 32 to 200 in mobile. This is calculated using:

    aspect ratio = 100 * [ image height ] / [ image width ]

With a fixed image width (eg. 100% of the screen width in mobile), that means that the higher the aspect ratio, the taller the image will be.

> **Overlayed text**
>
> When text is overlayed on an image the aspect ratio can be compromised to prevent the text from overflowing.

As a result, as you move the slider from left to right, your image will start from landscape towards a portrait aspect ratio.

## Slideshow images

> **Compatibility**
>
> The below guide is only valid for themes that don't support aspect ratio settings

Slideshow images will adjust their height based on the dimensions of the image uploaded. Images with wider width-to-height ratios will result in sliders with a smaller height and vice versa.

![slider images 2048x1152](https://support.troopthemes.com/_images/image-size-guide--2048x1152.png)
![slider images 2048x768](https://support.troopthemes.com/_images/image-size-guide--2048x768.png)

### Mobile images

<div style="display: flex; gap: 16px; align-items: flex-start;">
  <img src="/_images/image-size-guide--828x1472.svg" alt="mobile slider images 828x1472" style="width: 66.666%; height: auto;">
  <img src="/_images/image-size-guide--414x736.svg" alt="mobile slider images 414x736" style="width: 33.333%; height: auto;">
</div>