# Image swatch ratio

{% hint style="info" %}
This function is to optimize the image displayed in the swatch, if you do not use image swatch, please ignore this setting
{% endhint %}

## **Set up**

{% stepper %}
{% step %}

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

In admin **GLOBO Color Swatch**, navigate to **setting page -> Image swatch**

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FScreZv0AGBqqTsjX4xRE%2Fimage.png?alt=media&#x26;token=e7d02b07-b891-4e6b-a189-6435d0bc261e" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### <mark style="color:blue;">Setting file size image reducer</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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FwRiHvExgWVzTvRL0RYVw%2Fimage.png?alt=media&#x26;token=87380f1b-e1a2-499e-9b42-d872a34b718b" alt=""><figcaption><p>Setting width, height image size </p></figcaption></figure>

{% hint style="info" %}
💡 Tips: You can use the size in **appearance** **-> setup swatch** **-> width and height** as the size for the image swatch.
{% endhint %}

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fd35FPSR8KTnlJBGNMMXD%2Fimage.png?alt=media&#x26;token=a2148e62-fae9-40a3-9f1f-59ac2ced0676" alt=""><figcaption></figcaption></figure>

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

* The image size in the interface is 35px by 35px.
* You can set the image swatch size to 35px by 35px. If the image appears unclear, try increasing the size to around 50-60px.
* By adjusting the image size this way, the loading speed will improve significantly, reducing the load time by more than half compared to the default size of 150px.

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

* The image size in the interface is 300px by 300px.
* You should set the image swatch size to 300px by 300px. If you keep it at 150px, when the image is enlarged from 150px to 300px, it will become blurry and not look good.
  {% endstep %}

{% step %}

### <mark style="color:blue;">Setting image background-size</mark>

* We support you to change the image display style according to cover or contain, to optimize the image display.&#x20;
* You can adjust in **setting page** -> **background size**

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

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FDlHKLJs76ZoIg8dU7dwd%2Fimage.png?alt=media&#x26;token=26d4b390-178c-4934-b4b2-ceaa07e044d7" alt="" width="563"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

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

{% endstep %}
{% endstepper %}