Images

This document covers best practices for using images in Limio — explaining how your images are used in published pages, preferred file formats, recommended image ratios and sizes for each component.

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.