> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/context/general/image-guide/image-sizes.md).

# 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](/context/readme/theme-retirement.md).
{% 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).

![](/files/MZV5n5Mouu4N6znYrWXh)

**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](/context/general/image-guide/web-ready-photography.md)\
> [Image file formats](/context/general/image-guide/file-formats.md)\
> [Theme image settings](/context/general/image-guide/theme-image-settings.md)