> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/product-variant-swatch/control-image-swatch-dimensions.md).

# Control image swatch dimensions

By adjusting the ratio, you can make image swatches appear as squares, portraits, landscapes, or match the aspect ratio.

***

## **Set up**

{% stepper %}
{% step %}

### <mark style="color:blue;">Navigate to the settings page</mark>

In the **GLO Color Swatch**, navigate to the **Settings page > Image swatch**

<figure><img src="/files/xY0MvOy5Jf4hWUYlHCuX" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### <mark style="color:blue;">Default size for image file</mark>

* The smaller the width and height, the faster the image loads.
* On the contrary, the larger the width and height of the image, the slower its display speed.
* By default, we set it to **150px**; you can adjust it to suit your needs.

<figure><img src="/files/DPOjpHSIajgXkpIdEHeE" alt=""><figcaption><p>Setting default width &#x26; height of image </p></figcaption></figure>

<mark style="color:purple;">Example 1:</mark>

If your image swatches are displayed at **35 × 35 px** on the storefront:

* Set the image swatch size to **35 × 35 px**.
* If the image appears blurry, try increasing it to **50 - 60 px**.

Using a size close to the displayed dimensions can significantly improve page performance, reducing image load time compared to using the default size of 150 px.

<mark style="color:purple;">Example 2:</mark>

If your image swatches are displayed at **300 × 300 px** on the storefront:

* Set the image swatch size to **300 × 300 px**.

If you keep the image size at **150 px**, the image will be stretched to fill the larger display area, which may result in a blurry or pixelated appearance.
{% endstep %}

{% step %}

### <mark style="color:blue;">Background size options</mark>

You can control how images fit within the swatch area by adjusting the **Background Size** setting.

#### Cover

The image fills the entire swatch area.

* May crop parts of the image.
* Best for creating a uniform appearance.

#### Contain

The entire image is displayed within the swatch area.

* No cropping occurs.
* May leave empty space around the image.

Choose the option that best matches your image style and store design.

<mark style="color:purple;">Example image background-size:</mark>

<figure><img src="/files/YclNcYtsHOj9fpnjRh5G" alt="" width="563"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### <mark style="color:blue;">Save your work</mark>

{% endstep %}
{% endstepper %}

***

**💬 Need help?**

Email us at **📧 <contact@globo.io>** - we’re happy to assist!