I would like to add new images - what are the standard sizes?

I would like to add new images - what are the standard sizes?

Webshop, SOT, POS and portals

These recommendations are intended to ensure that product images look professional on all platforms and at the same time guarantee a high loading speed.

Dimensions are listed as width x height:
  1. Recommended resolution product images: 1920 x 1080 px (Pixel).
    1. Picture format product images: 16:9
    2. Main content centered to remain visible in square tiles on mobile devices.
    3. File formats: JPG, WEBP, PNG (with transparency).
    4. Maximum file size: Under 500 KB, maximum 1 MB for PNG.
    5. Photoshop template for product images is attached for easy customization and saving the images in the optimal format.

  2. Banner start page with content in tile layout
    1. Web: 1920 x 640 px
    2. Mobile: 600 x 670 px
  1. App launch screen: 640 x 720 px (72 dpi)

  2. Favicon: 16 x 16 px or 32 x 32 px



Detailed explanation for product images

Image format and ratio

We recommend the following guidelines for uploading product images to the webshop:
  1. Recommended resolution product images: 1920 x 1080 pixels (this image size ensures that your products are displayed in high quality on all end devices)
  2. Recommended image ratio product images: 16:9 (widescreen format)



Central image content

  1. The main content of the image should be in the center.
  2. In various layouts, especially in the mobile webshop, the item images are displayed in square tiles.
  3. This means that the sides of the image may be cut off in these layouts.
  4. A centered main content ensures that the product remains clearly visible, even if a square section is used.
The horizontal image format with product focus in the center of the image ensures that your product image works in both a horizontal and square image section (varies depending on the selected layout).




Example:

Example of square image section
Example horizontal image section





File formats

We offer the following file formats for uploading images:
  1. JPG (JPEG)
    1. Standard format for images without transparency.
    2. Ideal for high-resolution images with good compression without losing too much quality.

  2. WEBP
    1. A more modern format that enables smaller file sizes with consistently high image quality.
    2. This format can be used when transparency is required in the image (e.g. cropped product images).
    3. Supports both lossless and lossy compression, and should be preferred for optimal loading times.

  3. PNG
    1. This format is used when transparency is required in the image (e.g. cropped product images).
    2. Note: PNG files are generally larger, which is why they should only be used if required (e.g. transparencies).



File size

The optimum file size for a product image should strike a balance between image quality and loading speed.
  1. Recommended file size: Less than 500 KB per image.
  2. When using JPG or WEBP, the file size should be optimized to ensure a fast page load time.
  3. PNG files can be larger in some cases, especially if transparency is required. However, a maximum file size of 1 MB should not be exceeded.



Photoshop template

For simple and correct formatting of the images, we offer a Photoshop template (PSD) that contains the following parameters:
  1. Preset image format: 1920 x 1080 pixels (16:9)
  2. A centrally placed guideline for optimal positioning of the product.
This template helps you to quickly and easily crop your images to the correct format and save them in the optimum quality for the web store.
 
You can find the Photoshop template at the bottom in the attachment.



Tutorial on creating and saving product images

The video clearly shows that it is important to center the image content.








    • Related Articles

    • Enable commodity group images in the POS

      What Commodity groups can be displayed with images in the POS. Where POS: Three-dot menu > Settings > View commodity group images. Overview With the "View commodity group images" option, commodity groups can be displayed with images in the item view ...

    • New shopping cart in Webshop

      What The new shopping cart in Webshop provides a more modern and clearer ordering experience with features such as a permanently visible order button, loyalty programs, product recommendations, and highlighting of the minimum order value. Where ...

    • Store settings ("edit"/"add store")

      What In the store settings, you can adjust all system-relevant basics such as tax, POS, employee, delivery, and pickup settings to tailor your POS system to your specific requirements. Where Admin: Store management > Stores > Edit. (Previously under: ...

    • How do I create a new item?

      Please note that this FAQ is using the new navigation. Want to learn more? Click here! Short answer Open “Add Item”, fill in the required fields (number, name, product group, price) and click “Save”. Steps Log in to SIDES Administration and select ...

    • Item (edit), toppings, menus, ingredients, and credit

      What Items can be used to create and edit products, such as sales items, toppings, menus, raw materials, credits or packaging, as well as to store specific details for each individual product. Where Admin: Item management > Item. Item When creating a ...