# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/context/general/image-guide/image-sizes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.