# Images

#### How your images are used in published pages

* Upload **one high-quality master image** for each place you need an image.
* When you publish, Limio **automatically creates several smaller, optimized versions** from that single master so the page loads quickly on phones, tablets and desktops.
* We keep a tiny, blurred preview so the page looks polished immediately while the full image loads.
* Pages reserve the correct amount of space for images so content does not jump around as images load.
* The visitor’s device receives the best-sized version for that screen to improve load time and reduce data use.

#### File formats

* **Preferred:** **WebP** (best compression and quality for photos).
* **Also fine:** **JPEG** (photographs) or **PNG** (when you need transparency).
* **Logos & icons:** **SVG** is ideal because it stays sharp at any size.
* Use the **sRGB** color profile and export with reasonable compression so files aren’t unnecessarily large.

#### Image ratios

* Supply the master image in the **same aspect ratio** the design uses so automatic resizing and cropping look natural.
* Typical ratios by use:
  * **Hero / full-width banners:** commonly **16:9** (or your template’s ratio).
  * **Offer / product images:** often **square (1:1)** or **4:3**.
  * **Thumbnails / cards:** usually **square** or the card’s defined ratio.
  * **Background / decorative:** match the layout ratio (wide formats are common).
* **Tip:** keep the subject comfortably inside the frame (not right at the edge) so automatic resizing doesn’t cut it off.

#### Recommended image sizes for components

> **You only need to provide one master image per placement.** Below are recommended minimum widths for that single master image.

* **Hero / full-width banner**
  * **Master width:** **≥ 1920 px**
  * Use a wide, strong composition that looks good on large screens.
* **Offer / product images**
  * **Master width:** **≥ 1200 px**
  * Good for product detail and gallery displays.
* **Thumbnails / card images**
  * **Master width:** **≥ 640 px**
  * Simpler compositions work best here.
* **Logos / brand marks**
  * **Format:** **SVG preferred**
  * If only raster is available, supply **≥ 640 px** width (PNG if transparency is needed).
* **Icons / UI graphics**
  * **Format:** **SVG** if possible; if raster, keep small (< 64 px).
* **Background textures / decorative images**
  * **Master width:** **≥ 1920 px**
  * Can be compressed more heavily but check for banding at full width.


---

# 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://docs.limio.com/product/settings/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.