Welcome to PotatoCommerce - Top Quality Magento Extensions Store

Home > Blog > Combining images of Mage_ConfigurableSwatches into Sprites

Combining images of Mage_ConfigurableSwatches into Sprites

Posted on 26 May 2016


Configurable Swatches module is included into Magento since 1.9.1.0 CE and 1.14.1.0 EE. This module helps users to select product configuration easier.
Unfortunately, this module negatively impacts loading speed of category page.

Let's see how to combine images into sprites so that to improve page loading speed.




What’s wrong with Configurable Swatches module?

Configurable Swatches module replace products options with small images (“swatches”) on a product page and in the layered navigation. It also can add swatches to a product listing.
Swatches really make your website looking a little bit more pretty. The problem is a browser need to download each of this swatch images.

Combining images of Mage_ConfigurableSwatches into Sprites

Take a look at the screenshot above. Each of those colorful icons is an image file. Configurable product has 6 product options. It means that a browser need to establish 12 connections to server (6 images for product options and 6 for filter options at sidebar) in order to download the images.




Combining swatches into sprite at product listing

  1. Find the following template and create a backup of the file:
    app/design/frontend/{package}/{theme}/template/configurableswatches/catalog/product/list/swatches.phtml
    In our case, package is “rwd” and theme is “default”.

  2. Find this line in the file:
    <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_optionLabel; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
    Replace this line with:
    <div class="colorswatch-img-category-container <?php echo $_optionCode; ?>" alt="<?php echo $_optionLabel; ?>"></div>

  3. Create a sprite from all swatches used on the website. You can find all the images at:
    media/catalog/swatches/{store id}/{width}x{height}/
    In our case it is 25x25 for product listing.
    To create a sprite you can use some service, for example, http://instantsprite.com/.

    Combining images of Mage_ConfigurableSwatches into Sprites



  4. Save the created sprite and optimize the image with some online-service like https://tinypng.com/. This step is needed to reduce sprite file size.

    Combining images of Mage_ConfigurableSwatches into Sprites



  5. Save optimized sprite at the following folder on your webserver:
    skin/frontend/{package}/{theme}/images/

  6. Create stylesheet file:
    skin/frontend/{package}/{theme}/css/colorswatch.css
    Then save styles here generated at Step 3.

    You also need to set a path to the sprite.
    Replace
    background: url('colorswatch-img-category-container.png')
    with
    background: url('../images/colors_spite_for_category.png')

  7. Find a layout and create a backup of the file:
    app/design/frontend/{package}/{theme}/layout/configurableswatches.xml

  8. Open the file and replace:
    <action method="addItem"><type>skin_js</type><name>js/configurableswatches/swatches-list.js</name></action>
    with
    <action method="addItem"><type>skin_css</type><name>css/colorswatch.css</name></action>



Combining swatches into sprite for filter at layered navigation

  1. Find the following template and create a backup of the file:
    app/design/frontend/{package}/{theme}/template/configurableswatches/catalog/layer/filter/swatches.phtml
    In our case, package is “rwd” and theme is “default”.

  2. Find this line in the file:
    <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_label; ?>" title="<?php echo $_label ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
    Replace this line with:
    <div class="colorswatch-img-filter-container <?php echo $_optionCode; ?>" alt="<?php echo $_label; ?>"></div>

  3. Find this line the template:
    $_label = $_item->getLabel();
    And paste the following code after that line:
    $_optionCode = Mage::helper('configurableswatches')->getHyphenatedString($_label);

  4. Find the following template and create a backup of the file:
    app/design/frontend/{package}/{theme}/template/configurableswatches/catalog/layer/state/swatch.phtml

  5. Find this line the template:
    <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_label; ?>" title="<?php echo $_label ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
    And replace this line with the following code:
    <div class="colorswatch-img-filter-container <?php echo $_optionCode; ?>" alt="<?php echo $_label; ?>"></div>

  6. Find this line the template:
    $_label = $_item->getLabel();
    And paste the following code after that line:
    $_optionCode = Mage::helper('configurableswatches')->getHyphenatedString($_label);

  7. Create a sprite from all swatches used on the website. You can find all the images at:
    media/catalog/swatches/{store id}/{width}x{height}/
    In our case it is 21x21 for the filter.
    To create a sprite you can use some service, for example, http://instantsprite.com/.

  8. Save the created sprite and optimize the image with some online service like https://tinypng.com/.

  9. Save optimized sprite into the following file at your webserver:
    skin/frontend/{package}/{theme}/images/

  10. Create stylesheet file:
    skin/frontend/{package}/{theme}/css/colorswatch.css
    Then save styles here generated at Step 7.

    You also need to set a path to the sprite.
    Replace
    background: url('colorswatch-img-filter-container.png'
    with
    background: url('../images/colors_spite_for_filter.png')

  11. Find a layout and create a backup of the file:
    app/design/frontend/{package}/{theme}/layout/configurableswatches.xml

  12. Open the file and replace:
    <action method="addItem"><type>skin_js</type><name>js/configurableswatches/swatches-list.js</name></action>
    with
    <action method="addItem"><type>skin_css</type><name>css/colorswatch.css</name></action>




The result

Combining images of Mage_ConfigurableSwatches into Sprites

 

Now browser sends 11 requests less. In our case, page total page loading time improved on 10%. This result can be even more impressive if there are dozens of swatches at your website.
The only disadvantage of this solution is that you would need to regenerate sprite file each time you update your sprites. Nevertheless, it is not so difficult to do while website speed is a crucial thing in online business today.

Please share this article if you like it.