Оптимизация. Автоматическое создание спрайтов

Написал модуль для автоматической генерации спрайтов. 
Пока не выкладывал, сделаю это завтра, на свежую голову, тем более там все равно модерация несколько недель идет. 

А сейчас хочу показать как можно будет использовать этот модуль и что он дает. 
Итак, у нас есть страница с разделами каталога, каждый представлен картинкой и текстом - в сумме около 40 картинок, 
sprite_1[1].png

Соответственно процесс загрузки страницы выглядит примерно так:
sprite_2[1].png

Это ооочень много запросов и всегда очень хотелось изменить эту ситуацию. 
И вот день настал, вот так выглядит загрузка сейчас (страница выглядит абсолютно также):sprite_3[1].png

Не смотря на то, что страница выросла в размере, кол-во запрашиваемых ресурсов резко сократилось и мне кажется, что это хорошо. 

Для такого результата дорабатывается result_modifier.php и template.php шаблона компонента:
// result_modifier.php:

// Собираем PNG картинки разделов
$arImages = Array();
foreach($arResult['SECTIONS'] as $keySection => &$arSection) {
   if($arSection["PICTURE"] && $arSection["PICTURE"]["CONTENT_TYPE"] == "image/png") {
      $arImages[$keySection]   = $arSection["PICTURE"];
   }
}

// Создаем спрайт и раскидываем результат по массиву $arResult
if($arImages) {
   CModule::IncludeModule("top10.sprite");

   $arSpriteImages = CTOP10Sprite::getSpriteImage(
      $arImages,
      "/images/catalog-main-sprite.png"
   );

   $arResult['SECTIONS_SPRITE'] = $arSpriteImages["SPRITE"];
   foreach($arSpriteImages["IMAGES"] as $keySection=>$arImage) {
      $arResult['SECTIONS'][$keySection]["PICTURE_SPRITE"] = $arImage;
   }
}

// template.php

<?if($arResult['SECTIONS_SPRITE'] && $arSection["PICTURE_SPRITE"]):?>
   <span st yle="<?=implode("; ", $arSection["PICTURE_SPRITE"]["STYLE"]);?>" alt="<?=$arSection['NAME']?>"></span>

<?elseif($arSection['PICTURE']['SRC']):?>
   <img src="<?=$arSection['PICTURE']['SRC']?>" height="<?=$arSection['PICTURE']['HEIGHT']?>" width="<?=$arSection['PICTURE']['WIDTH']?>" alt="<?=$arSection['NAME']?>" />

<?else:?>
   <img src="//opt-560835.ssl.1c-bitrix-cdn.ru/images/no-photo-section-101.jpg" height="101" width="101" alt="" />

<?endif;?>

P.S. Подключал к модулю сжатие png с помощью tinypng.org, но качество картинки не понравилось :(