Использование WebP на практике, а также модуль для Adobe Photoshop
Есть у меня проекты сайтов, где много тяжелых графических файлов, которые используются в оформление страниц. Я провожу оптимизацию таких файлов средствами Photoshop, если это JPG, а по PNG файлам прохожусь ImageOptim, но все равно, графика весит много. После всех оптимизаций изображений, они продолжали поглощать 3.67 мегабайта. Решил попробовать новый формат изображений WebP. Итоговый вес графических файлов, после перехода на WebP 1.4 мегабайта.
Что за зверь, этот WebP. Возьму строчку из Вики:
WebP (произносится как англ. weppy) — формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc. в 2010 году. Основан на алгоритме сжатия неподвижных изображений (ключевых кадров) из видеокодека VP8. Использует контейнер RIFF.
Подробней про сам формат на https://ru.wikipedia.org/wiki/WebP
Главный плюс формата WebP, это уменьшение размера изображений. Я смог добиться экономии в 50% без потери качества в случае с некоторыми изображениями PNG и JPG.
Главный минус, это поддержка браузерами. Данный формат понимает: Opera 27+, Chrome 31+, Opera Mini 8, Android browser 4.3, Chrome for Android 42. А вот Firefox, IE и Safari дружить с новым форматом не хотят.
Для создания кросс-браузерного выбора оптимальных изображений, я использовал modernizr.js, который собрал с флагом img-webp. Modernizr добавляет классы к тегу body(.webp и .no-webp), после определения поддержки браузером формата webp.
Получается такой CSS:
.webp #start{background-image: url('/resources/images/bg-1-0.webp');}
Если у нас используется <img src=”…” >
<source srcset="/images/banner/actionVk.webp" type="image/webp">
<img src="/images/banner/actionVk.jpg" >
</picture>
Поддержка WebP в Adobe Photoshop
Чтобы привычные PNG и JPG превратить в WebP, я использую плагин AdobeWebM для Adobe Photoshop CC. Он доступен для Windowsи MacOS, скачать можно тут и или по ссылке https://github.com/fnordware/AdobeWebM . После его установки в меню «Сохранить как», появится вариант WebP, а после его выбора вам предложат параметры сохранения (качество, прозрачность и т.д.).
Вот два файла в формате PNG (104 килобайта) и WebP (38 килобайт) для сравнения.
P.S: Использование WebP, потребует больше дискового пространства для хранения файлов, но я не считаю это минусом в нашей терабайтной жизни.