> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling/general/product-images.md).

# Product images

### Predefined aspect ratios

The theme supports determining the aspect ratio of your product images. The aspect ratio can either be selected from a predefined list using the **Product image aspect ratios** . In the "Calculated aspect ratio" section below, you can also have the theme determine the aspect ratio - useful if the predefined aspect ratios do not apply or if you do not know the aspect ratio of your product images.

### Calculated aspect ratio

The theme supports determining the aspect ratio of your product images. The aspect ratio can either be selected from a predefined list using the **Product image aspect ratios** field or defined precisely by entering the image dimensions in the **Width product image (1)** and **Height product image (2)** fields.

As soon as exact image dimensions are entered in the **Width product image** and **Height product image** fields, these values take precedence over the **Aspect ratio product images** setting.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FT2vAUcj6D9KICOsl6vVX%2Fdocs-storefront-theme-general-aspect-ratio.webp?alt=media&amp;token=310b9066-d5b8-48c8-adaf-0fb775585b9f" alt=""><figcaption></figcaption></figure>

By specifying the correct aspect ratio, product images can be displayed optimally. We therefore recommend using product images with consistent dimensions and aspect ratios.

If the configured aspect ratio does not match the actual product images, the result may look undesirable depending on the selected display mode.

When the display mode is set to **"Cropped"**, the images are cropped either at the top and bottom or on the left and right.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FRJA5IPS9MVqhGRoLGEhK%2Fdocs-storefront-theme-general-aspect-ratio-cover.webp?alt=media&amp;token=296e9cc6-a056-4c84-b65f-1dfd8729845c" alt=""><figcaption></figcaption></figure>

When the display mode is set to **"Original"**, the images are fitted into the available area. Depending on the aspect ratio of the original image, this can result in empty space at the top and bottom or on the left and right.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FtShgk2kweY4rcHGOWkZp%2Fdocs-storefront-theme-general-aspect-ratio-contain.webp?alt=media&amp;token=a88cccec-dd85-43b4-8029-0a2be15c46ec" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The display mode for product images is configured directly in Shopware within the respective CMS element, such as the product listing or product slider.
{% endhint %}

{% hint style="success" %}
Why and especially how you determine the optimal image format of your product images, we have you in the article under CONTENTS > Product images > [Imageformat](/en/content/product-images/aspect-ratio.md) summarized in detail.
{% endhint %}

{% content-ref url="/pages/-ME2h0uY0L1Pn6tVDFmw" %}
[Aspect ratio](/en/content/product-images/aspect-ratio.md)
{% endcontent-ref %}

### Product image background

Use **Background** to define a background color for your product images.

For non-transparent product images, such as JPG files with a white background, you can additionally enable **Background overlay**. This applies a subtle tint of the selected background color over the image. Use **Background overlay strength** to control the intensity in percent.

This allows product images to blend into a colored background without editing the image files themselves.

You can find more details in the documentation about [product image backgrounds](https://themedocs.zenit.design/content/produktbilder/produktbilder-hintergrund).

{% content-ref url="/pages/-MHX7-AyREKKxS1QTb\_r" %}
[Product image background](/en/content/product-images/product-image-background.md)
{% endcontent-ref %}