Image gallery

Component preview#

XS	SM	MD	LG

Dos	Don'ts

Ensure default image shown provides rich visual details, highlights a products unique features and represents it accurately. The best image to display is dependent on the particular product. It need to show multiple angles, inscale image or human model image to immediately see size. Products with accessoires should highlight these. For mobile, images need to be scaled proportionally when switching to landscape mode. For desktop and tablet, thumbnails are in use to show additional images. Dot indicators are in use for mobile devices.	If accessoires are not included in product, mention it very clearly in product description but do not visually show it on image itself to not confuse users. Especially on mobile devices where viewport is small make sure to not overwhelm users with too much additional images.

Dos

Don'ts

Ensure default image shown provides rich visual details, highlights a products unique features and represents it accurately.
The best image to display is dependent on the particular product. It need to show multiple angles, inscale image or human model image to immediately see size. Products with accessoires should highlight these.
For mobile, images need to be scaled proportionally when switching to landscape mode.
For desktop and tablet, thumbnails are in use to show additional images.
Dot indicators are in use for mobile devices.

If accessoires are not included in product, mention it very clearly in product description but do not visually show it on image itself to not confuse users.
Especially on mobile devices where viewport is small make sure to not overwhelm users with too much additional images.

Dos	Don'ts

Ensure that all product images are high resolution and allow users to zoom in enough to see small product details. Make sure to always provide at least 3-5 additional images.	If resolution of images is not high enough, users might discard the product. If not enough additional images are provided, it's harder for the user to decide if the product fits their needs.

Dos

Don'ts

Ensure that all product images are high resolution and allow users to zoom in enough to see small product details.

Make sure to always provide at least 3-5 additional images.

If resolution of images is not high enough, users might discard the product.
If not enough additional images are provided, it's harder for the user to decide if the product fits their needs.

Dos	Don'ts

Bigger is better - show the products as big and as detailed as possible.	Image compositions with any kinds of informations like seals, awards or any other text on the image itself distracts user from making his decision and therefore not allowed on images.

Dos

Don'ts

Bigger is better - show the products as big and as detailed as possible.

Image compositions with any kinds of informations like seals, awards or any other text on the image itself distracts user from making his decision and therefore not allowed on images.