# Image sizes

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

When it comes to image size, there are really two questions: **how many pixels wide** and **how many megabytes**? Answering these questions will help make sure that your images look great and load fast.

But the answer isn't about exact measurements: what matters is that your images are **above a minimum pixel width** and **below a maximum file size**. Shopify and Context will handle the rest and automatically optimize and re-size your images for your visitor's screen or device.

## Two guidelines

For optimal image sizes, you can follow these two simple guidelines:

1. Use a **minimum pixel width** of **`2500 px`** for optimal quality on all screens.

   > You don't need very large pixel widths for high quality images. In fact, larger pixel widths rarely makes a noticeable difference in quality.
2. Use a **maximum file size** of around **`2 mb`** for optimal loading speed.

   > You don't need to worry if images are a bit over or under the maximum file size.

## Theme image recommendations

The best image size, shape, and orientation will depend on how it's used: background and hero images will need different dimensions than a logo or icon.

In general, Context handles all image orientations and will adapt accordingly, whether your images are **Square (1:1)** (equal width and height), **Landscape (3:2)** (width greater than height), or **Portrait (2:3)** (height greater than width).

![](https://3096289102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvbp0IBkqpivnJ0UBSwsh%2Fuploads%2Fgit-blob-4b553979128e26fbb5349d6e2c41a85abcf6bab7%2Faspect-ratio-product.jpeg?alt=media)

**That said, here's a few recommendations for your uploaded images**:

For **product images**, often the best orientation to use is square (1:1) or portrait (2:3). But above all else, consistency is key: select one orientation or shape for your product photography to keep product grids looking uniform and professional.

For **feature images**, often the best images are landscape (3:2) or square (1:1). We recommend avoiding portrait images for sections that span across the page, such as the **Slideshow** and **Full width image** sections. Portrait images in these areas may look stretched, oversized, and force customers scroll down to see the whole image.

With exception, you will find recommended orientations for the following features:

| Feature              | Image recommendation                                          |
| -------------------- | ------------------------------------------------------------- |
| Collage              | Landscape (3:2) for Small blockPortrait (2:3) for Large block |
| Full width image     | Landscape (3:2)                                               |
| Slideshow            | Landscape (3:2) or Square (1:1)                               |
| Popup background     | Landscape (3:2)                                               |
| Video featured image | Landscape (3:2)                                               |

<br>

***

> **Related links**
>
> [Web-ready photography](https://help.fluorescent.co/context/general/image-guide/web-ready-photography)\
> [Image file formats](https://help.fluorescent.co/context/general/image-guide/file-formats)\
> [Theme image settings](https://help.fluorescent.co/context/general/image-guide/theme-image-settings)