# Images

{% embed url="<https://www.youtube.com/embed/YkjLrsFDE6Q?si=dvt8fFQWbHbnmoAk>" %}

When building fast, responsive Shopify themes, image sizing plays a crucial role in performance, consistency, and design quality. In this post, we’ll break down how to properly size images for the Flexi Theme Library, and share tools to help you optimize your images for retina screens and faster load times.

### Key Tools for Image Optimization

Before jumping into sizes, here are two tools we recommend using in your workflow:

* TinyPNG – An online compression tool that dramatically reduces file sizes without noticeable quality loss.
* Figma WebP Plugin – Export images directly in the modern WebP format using a Figma plugin. WebP offers superior compression over JPEG and PNG.

### Recommended Aspect Ratios & Sizes

We recommend preparing images in multiple sizes depending on context (retina, standard, lightweight, mobile). Below are the most common aspect ratios used in Shopify and suggested dimensions:

#### 1:1 Square

<figure><img src="/files/kxgtgLspiyd432YohN1S" alt=""><figcaption></figcaption></figure>

| Retina (2x) | 2160 × 2160 px |
| ----------- | -------------- |
| Standard    | 1080 × 1080 px |
| Lightweight | 800 × 800 px   |
| Mobile      | 540 × 540 px   |

#### 16:9 Banner

<figure><img src="/files/eKr40XZzjtr3Kj48KRY8" alt=""><figcaption></figcaption></figure>

| Retina (2x) | 3840 × 2160 px |
| ----------- | -------------- |
| Standard    | 1920 × 1080 px |
| Lightweight | 1280 × 720 px  |
| Mobile      | 960 × 540 px   |

#### 4:9 Landscape

<figure><img src="/files/wPXVezBITfH41u2JjxA2" alt=""><figcaption></figcaption></figure>

| Retina (2x) | 2400 × 1800 px |
| ----------- | -------------- |
| Standard    | 1200 × 900 px  |
| Lightweight | 1000 × 750 px  |
| Mobile      | 720 × 540 px   |

#### 3:4 Portrait

<figure><img src="/files/xmz54XkBSa62Zcdfh9Uj" alt=""><figcaption></figcaption></figure>

| Use         | Dimensions     |
| ----------- | -------------- |
| Retina (2x) | 1800 × 2400 px |
| Standard    | 900 × 1200 px  |
| Lightweight | 750 × 1000 px  |
| Mobile      | 540 × 720 px   |


---

# 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://flexi-library.gitbook.io/flexi-slider-sections/docs/images.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.