Є у мене проекти сайтів, де багато важких графічних файлів, які використовуються в оформлення сторінок. Я проводжу оптимізацію таких файлів засобами Photoshop, якщо це JPG, а по PNG файлів проходжу ImageOptim. але все одно, графіка важить багато. Після всіх оптимізацій зображень, вони продовжували поглинати 3.67 мегабайта. Вирішив спробувати новий формат зображень WebP. Підсумковий вага графічних файлів, після переходу на WebP 1.4 мегабайта.
Що за звір, цей 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 в Adobe Photoshop
Ось два файли alice.zip [143,12 Kb] (cкачиваний: 21) в форматі PNG (104 кілобайт) і WebP (38 кілобайт) для порівняння.
P.S: Використання WebP, зажадає більше дискового простору для зберігання файлів, але я не вважаю це мінусом в нашій терабайтной життя.