How magento 2.3 generates swatch images?

Question

I want to resize default generated swatch images but upon doing that swatch images get blurred. So my question is, how to resize Magento swatch so that it will look nice? I have tried modifying background-size in swatch-renderer.js from initial to 50% 50% !important. Here is the code for your reference from swatch-renderer.js

if (type === 2) {
      // Image
      $image.css({
           'background': 'url("' + thumb + '") no-repeat center', 
            //Background case
            // changed background-size from initial to 50% 50% !important
           'background-size': '50% 50% !important'
     });
    $image.show();
}

Can anyone help me how can I do that?

Any help would be appreciated.

Thanks In advance..!

Answer 1

vendor/magento/module-swatches/etc/view.xml

path to override

app/design/frontend/{Package}/{themename}/etc/view.xml

example :

<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="swatch_image" type="swatch_image">
                <width>30</width>
                <height>20</height>
            </image>
            <image id="swatch_thumb" type="swatch_thumb">
                <width>110</width>
                <height>90</height>
            </image>
            <image id="swatch_image_base" type="swatch_image">
                <width>30</width>
                <height>20</height>
            </image>
            <image id="swatch_thumb_base" type="swatch_thumb">
                <width>110</width>
                <height>90</height>
            </image>
        </images>
    </media>
</view>

Now applying changes you have to clear cache and var folder.