> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md).

# Image & video size recommendations

Avante is responsive, so there's no single fixed pixel size — images scale to the screen. Following the guidelines below keeps your store sharp on every device and fast to load. Two rules apply everywhere:

1. **Upload high-resolution images, then compress** before uploading (tools like TinyPNG or Squoosh). Export at roughly **2× the display size** so images stay crisp on high-density (Retina) screens.
2. **Use separate desktop and mobile images** wherever a section offers a Mobile image field — otherwise the desktop image is center-cropped on mobile.

***

### How Avante sections handle image size

Different sections control images in one of four ways. Each section below tells you which one it uses.

* **Image ratio** — you pick an aspect ratio from a dropdown; the image is cropped to it.
* **Desktop + Mobile image** — the section suggests a ratio ("Looks best with…") and has a separate Mobile image field.
* **Height-based / background** — the image fills the section; you control the height, not a fixed ratio. Use a large, high-res image.
* **From Shopify** — product and collection images come from your Shopify products/collections; the ratio is set per section.

#### Standard image ratios (used by most sections)

Whenever a section has an **Image ratio** dropdown, these are the options and recommended sizes:

<table data-search="false"><thead><tr><th>Image ratio</th><th>Recommended size</th></tr></thead><tbody><tr><td>Original</td><td>keep the source ratio; upload ≥1600px on the long side</td></tr><tr><td>Square (1:1)</td><td>1200 × 1200px</td></tr><tr><td>Portrait (4:5)</td><td>1200 × 1500px</td></tr><tr><td>Narrow portrait (2:3)</td><td>1200 × 1800px</td></tr><tr><td>Traditional (4:3)</td><td>1600 × 1200px</td></tr><tr><td>Landscape (3:2)</td><td>1800 × 1200px</td></tr><tr><td>Wide (16:9)</td><td>1920 × 1080px</td></tr></tbody></table>

***

### Banners

#### Slideshow with media / Image with hotspots

Separate **Image** and **Mobile image** fields. The theme suggests: desktop **landscape (3:2) or wide (16:9)**, mobile **portrait (4:5) or square (1:1)**. Recommended: desktop 1920×1080 (16:9) or 1800×1200 (3:2); mobile 1000×1250 (4:5) or 1000×1000 (1:1).

<figure><img src="/files/1gd4lfcydfG1CSxJP4PR" alt=""><figcaption></figcaption></figure>

#### Image banner

Full-width **background** banner. Uses **Height mode** (Adapt to first image / Percents / Pixels) and Height — no fixed ratio. Upload a large, wide, high-res image; on mobile only the first image shows.

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

#### Banner grid

Each image block has a **Banner size**: Square (1:1) → 1200×1200, Big square (2:2, larger square) → 2000×2000, Horizontal (2:1) → 1600×800, Wide (4:2, larger 2:1) → 2400×1200. Keep ratios consistent across the grid.

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

#### Banner gallery

One **Image ratio** for the whole gallery (standard ratios table above). Grid type controls how many show per row.

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

#### Horizontal scrolling banners

Full-height scrolling panels — **height-based**, no fixed ratio. Use tall **portrait** high-res images. Desktop size (Big/Medium/Small) and Mobile height control display.

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

#### Fullscreen banner with product

Full-screen **background** (separate desktop + Mobile background image, no fixed ratio — use a large landscape desktop image and a portrait mobile image) plus a **product card** (standard ratios table).

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

***

### Media

#### Shoppable media slider

Vertical/reels slides — **Media ratio**: Portrait (4:5) → 1200×1500, Narrow portrait (2:3) → 1200×1800, Vertical (9:16) → 1080×1920. The product card uses the standard ratios table.

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

#### Stories slideshow

Story covers display as **circles** — upload roughly square images (\~1000×1000), keep the subject centered. The product card uses the standard ratios table.

<figure><img src="/files/1lvHuXUJHU2asf3U9gxg" alt=""><figcaption></figcaption></figure>

#### Media with text / Media with side tabs

Standard **Media ratio** for the main media and the context image (standard ratios table). Media size (Large/50%/Small) only changes display size.

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

#### Image grid, Image comparison & Multicolumn

* **Multicolumn** and **Image grid**: standard **Image ratio**; keep one ratio across all columns. (Image grid pulls images from the page's `custom.gallery` metafield.)
* **Image comparison**: separate desktop + Mobile image per side (desktop landscape 3:2/16:9, mobile portrait 4:5/1:1). **Before and After images must be the same size**, or the slider won't line up.

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

#### Image with hotspots

Separate **Image** and **Mobile image** (desktop landscape 3:2/16:9, mobile portrait 4:5/1:1). Keep key subjects away from the edges so hotspots sit cleanly.

***

### Content, collections & trust

#### Blog posts

Standard **Image ratio**. Post images come from each post's **Featured image** (Shopify Admin → Online Store → Blog posts).

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

#### Link list with popover image

Standard **Image ratio** per link; the image shows as a popover on hover. Portrait works well.

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

#### Events

Standard **Image ratio** per event. The date sits as a badge over the image — keep that corner clear.

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

#### Collections (Featured collections, Collection grid, Collection list, etc.)

These show your products and collections, so images come from **Shopify** (product images and the collection image). Each section sets its own **Image ratio** (standard ratios table) — there's no global ratio in Theme settings → Product card. Upload product and collection images at high resolution; pick one ratio per section for a consistent grid. You can set a **Placeholder** image in Theme settings → Product card for products without a photo.

#### Collection with sticky image

Product cards use the standard ratios table; the sticky side image is a large **portrait** visual (high-res).

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

#### Logo slider

**Looks best with square (1:1)** — upload square, transparent PNG logos (\~500×500), sized consistently.

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

#### Icons with text

Use the built-in icon library, or upload a custom icon **image** — square, transparent PNG/SVG, about 2× the Icon size (e.g. 320×320 for a 160px icon).

<figure><img src="/files/62N2ZaD1m0ziBQziLKfo" alt=""><figcaption></figcaption></figure>

***

### Video

* Keep videos **short and light** — a large file (30MB+) noticeably slows page load. Compress and trim before uploading.
* Match the video's aspect ratio to the section to avoid cropping.
* Background/loop videos in banners are always **muted and autoplay** — this is a browser policy, not a theme setting.

***

### Best practices

* Use separate desktop and mobile images wherever offered — one image for both gets center-cropped on mobile.
* Keep sizes and ratios consistent within a section; mixing ratios creates an uneven layout.
* If a section is set to "adapt to first image," the first image sets the ratio for the rest.
* Export at \~2× the display size for high-density screens, then compress.
* Keep key content centered so it isn't cropped on smaller screens.

***

### Why do images look blurry or low quality?

1. **The uploaded image is smaller than the space it fills** — use a higher-resolution source.
2. **No Mobile image set on a banner** — the wide desktop image is cropped or scaled on mobile. Add a portrait Mobile image.
3. **Swatch, logo, or thumbnail too small** — re-upload at a larger size.

### Related

* [Store speed & PageSpeed optimization](/docs/avante-themes/faq/performance/store-speed-and-pagespeed-optimization.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/faq/performance/image-and-video-size-recommendations.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.