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