Чи не було б чудово отримати стиснений JPEG і зберегти прозорість у PNG? І це реально. Ось невеликий трюк, який я відкрив, коли працював на новому сайті Sapporo Beer.

Зверніть, що пиво на сайті Sapporo має прозору зону(це важко помітити). У форматі PNG, зображення має розмір 1,2 мб! Отже, як мені вдалося зменшити розмір до 271 кб?

Спочатку я створив два файли. Перший це звичайний JPEG без будь-якої прозорості. Ви можете зжати цей файл, як вам заманеться. Другий- 8-бітний PNG(alpha mask). Це просто чорно-біла картинка, яка представляє прозорі області, які може мати пивна банка. Зверніть увагу на те, що PNG важить усього 11 кб, це все тому, що зображення має мало кольорів та немає прозорості.

Далі я створив маленький уривок з SVG:

    <svg preserveAspectRatio="xMinYMin" version="1.1" viewBox="0 0 560 1388" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xmlns="http://www.w3.org/2000/svg">
    
    <defs>
    
      <mask id="canTopMask">
    
        <image height="1388" width="560" xlink:href="img/can-top-alpha.png"></image>
    
      </mask>
    
    </defs>
    
    <image height="1388" id="canTop" mask="url(#canTopMask)" width="560" xlink:href="can-top.jpg"></image>
    
    </svg>

Тут я завантажив 2 зображення в SVG контейнер. Альфа канальне зображення додається як маска, яка потім застосовується до JPEG, щоб створити прозорі області. І в результаті ми отримали прозоре зображення з стисненим JPEG

Підводні камні

SVG код повинен бути вбудованим. І ви не можете перемістити у зовнішній файл і завантажити за допомогою тегу . Вбудовуючи JPEG i PNG, як data URL, ви можете використовувати HTML тег . Майте на увазі, однак, що data URIs може збільшити розмір файлу на 37%.