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

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

Here is a list, each given in width x height
  1. Commodity group images: 2000 x 500 px (72dpi)
  2. App start image: 640 x 720 px (72dpi)
  3. Favicon: 16 x 16 px
  4. Product image: 500 x 350 px (72dpi)
  5. Logo for receipt printing: at least 250 x 250 px (72dpi) (but can be larger, as the upload must be carried out by SIDES afterwards and can be scaled accordingly by us)

SOT (Self-order terminal)

  1. Image for the start page: 1920 x 1080 px
  2. Product images: 500 x 350 px

Webshop Version 1

  1. Banner - mobile: 415 x 130 px
  2. Banner - desktop: 1920 x 340 px
  3. Product images: 500 x 350 px

Webshop Version 2 - Upload of product images in our eCommerce solutions (webshop, SOT, POS & 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.

Webshop Version 2

  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 - web: 1920 x 640 px
  3. Banner start page with content in tile layout - mobile: 600 x 670 px

Detailed explanation for product images

Image format & 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.


Short tutorial on creating and saving product images

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







    • Related Articles

    • Webshop settings

      What Your own webshop can be customized and personalized in a certain way. Where Admin: Store > Webshop settings. In the webshop settings, your own webshop can be customized and adapted to a certain extent. This includes, for example, the name, URL, ...

    • SendGrid setup with new account

      What SendGrid is a cloud-based service for email marketing and transactional emails. This service can be used to send bulk emails for marketing campaigns, track email open rates and clicks, manage subscriber lists and ensure that emails are not ...

    • Switch to the new cash register interface

      What There is a new graphical interface for the cash register, which can be switched. Where POS + Admin: Dashboard > Activate new cash register. Admin: Store > Global store setting > Other settings > Call center and POS settings > 
Representation of ...

    • Commodity groups

      What Commodity groups are the groups of individual sales items, e.g. pasta, pizza, burgers, drinks, are organized similar to a category. Where Admin: Item > Commodity group > Add product group. Use of the commodity group The commodity groups are used ...

    • Item (edit)

      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 > Item. Item When creating a new item, ...