Zyro templates are responsive - it means that images will stretch or shrink depending on your website visitor's screen size and its resolution. At the same time, Zyro builder automatically compresses all the images for the best website speed.

It means that there is no one set of dimensions for perfect image size, as it always depends on the device screen size, its resolution, and even internet speed. Even though there is no optimal image size for image elements nor for section background images, you can try resizing image elements or changing section height.

You can also edit (e.g. resize or crop) the picture outside the Zyro website builder and then re-upload it, or try another visual.

Product images

You can upload as many images per product, as you like. It is also possible to embed images (and videos) into product descriptions to provide even more details to your customers. You can set the image size and orientation of product thumbnails in your store with the help of several preset design options in the Store manager > Design.

You can upload product images of any size up to 20 MB. If you add large and heavy product images, they are automatically compressed, so your products load fast and fit well on both desktop and mobile. We recommend using JPG, PNG, and GIF images for your products.

Product images look best when they appear to be the same size: use a consistent aspect ratio (height-to-width ratio) and orientation for all the product images that you add to a product gallery. This way images display better side by side because they all display the same size.

difference of the images in the gallery

Show the various perspectives of the product such as front, side, underneath, close-up, etc., so customers can see what they are buying in detail. You can showcase your product in motion using GIFs or adding a 360° product view with the Imajize app - find it in Store manager > Apps > App Market.

When you add multiple images to a product, the first uploaded image is considered the main — it shows as a product thumbnail on a category page and that's the first image shown on the product page. To change the main image, drag a different image to the first place. You can also sort the other images by dragging them.

Specific parameters

There are some actual numbers you could have in mind regarding visuals on your Zyro website:

  • The recommended aspect ratio for a blog post cover image is 5:3.

  • The recommended link preview image size is 1200 x 630 px. The minimum is 600 x 315 px, thus if your image is smaller than that, it will still display in the link page post, but the size will be much smaller.

  • The recommended favicon size is 16 x 16 or 32 x 32 px.

  • It is recommended to upload a logo in .png or .svg formats, as logos are usually transparent.

  • An image may fail to get uploaded if its extension is in the capital letters: for example, use .jpg instead of .JPG

Additional resources

Did this answer your question?