Від автора: при завантаженні зображень на сайті більша частина людей інстинктивно розуміє, що GIF не можна використовувати для фотографій, JPEG – для графіків. Ледачі користувачі, тобто я, можуть вибрати PNG взагалі для всього і сподіватися на краще.
Чому ми розмежовуємо формати зображень? Все зводиться до кодування, що використовується для створення зображення в певному форматі. JPEG підходить для фотографій (P розшифровується як «Photographic» або фотографічний), так як цей формат розмиває гострі грані і зберігає плавні градієнти. Кодування зображень з допомогою великих, чітких блоків кольору в JPEG призводить до втрати якості та неефективного кодування.
GIF підходить для логотипів і простих блочних графіків, так як у них спостерігається чітка зміна однорідних кольорів. Даний формат практично марний для фотографій, де кольори відрізняються попіксельно.
Як приклад, нижче зображення має формат JPEG і важить 106 Кб:
Однак у форматі GIF зображення важить цілих 517 Кб. Тільки через невідповідного формату вага зображення збільшився майже в 5 разів.
В PNG дане зображення важить 329 Кб. Не так погано, але це все одно більше ніж у 3 рази більше, ніж при використанні відповідного формату.
Як можна з легкістю зауважити, основні формати зображень підходять під різні типи контенту, і неправильний вибір формату викликає значне збільшення ваги файлів.
Щоб не засмічувати сторінку, необхідно перевіряти кожне зображення завантажене на відповідний формат, а не просто дивитися, в якому форматі вони були завантажені.
Підтримка в браузерах
На даний момент ми розглянули три «класичних» формату зображень, які всі знають і люблять. Далі все стає складніше: всі браузери просувають різні формати зображень наступного покоління. У Chrome це WebP, Edge підтримує JPEG XR, Safari це JPEG 2000.
Підтримка форматів наступного покоління в браузерах
В різних сценаріях, наприклад, WebP значно перевершує GIF, PNG і JPEG. Якщо взяти зображення вище, то його вага зменшується до 90.5 Кб – економія щодо JPEG становить 15%. Цей формат на даний час можна використовувати тільки в браузерах Chrome, Opera і Mozilla.
JPEG XR (JPEG eXtended Range) – формат Microsoft з більш високою продуктивністю, ніж JPEG. Цей формат навіть підтримує прозорість (як в PNG і WebP). Тестове зображення у форматі JPEG XR буде важити 104 Кб, що на 2% менше оригіналу. Формат підтримується тільки в IE9+ і Edge. Також з назви випливає, що формат найкраще підходить для фотографій.
Таким чином, вам не тільки потрібно переконатися, що ви використовуєте найбільш відповідний формат під контент зображення, але також необхідно підібрати відповідний формат під пристрій, з якого вона запитується. Можливо, доведеться створити 4 або 5 версій всіх зображень: одне, закодоване в одному з трьох класичних форматів (для всіх пристроїв), і ще за однією версією для всіх нових форматів наступного покоління, заточених під певний браузер (щоб отримати переваги оптимізації нових форматів). На це потрібно багато часу і зусиль.
Майбутні формати зображень
На даний момент ми розібрали «класичні» формати, які працюють в усіх браузерах, а також поринули в нові формати доступні в деяких головних браузерах.
Нерівномірна підтримка в браузерах призводить до того, що для використання нових форматів і всіх їх переваг нам необхідно створити декілька альтернативних версій кожного зображення на сайті.
І тепер постає проблема з ще непідтримуваними форматами зображень. Формати типу FLIF і BPG знаходяться ще в зародковому стані, вони лише набирають обертів. Однак, це лише питання часу, коли один із браузерів почне підтримувати ці формати.
Що це означає для вас? Можливо, доведеться конвертувати всі ваші зображення в новий формат або два формату, що вимагає ще більше часу і сил.
Автоматична конвертація форматів в Cloudinary
На наше щастя, є чудове рішення – автоматична конвертація форматів в Cloudinary. Ви можете завантажити зображення (можливо, навіть в самому невідповідному форматі), і з допомогою одного хитрого параметра
URL надавати користувачам найкращий формат, навіть якщо в майбутньому з’являться нові формати зображень.
При додаванні в URL параметра f_auto формат зображення буде автоматично визначатися в Cloudinary: http://res.cloudinary.com/otomotech/image/upload/w_800,f_auto/kite_xikqxa.jpg
У Chrome цей URL дасть формат WebP, Edge – JPEG XR. У Firefox це буде оригінальний JPEG.
Завдяки цим налаштуванням адресу зображення вам більше не потрібно турбуватися про кросбраузерною підтримки форматів, ні зараз, ні в майбутньому. Дуже потужний інструмент з доробком на майбутнє.
