Майже завжди зображення є найбільшими файлами на сайті, які можуть значно уповільнювати завантаження сайту, особливо на мобільних пристроях. Тому, вибір формату зображень дуже важливий. Але це не простий вибір, адже не можна сказати, що якийсь формат завжди буде кращим за інший. Усім форматам є місце на сучасному сайті, якщо розуміти їх особливості і застосовувати там, де це потрібно. В той же час, використання навіть найсучаснішого формату наосліп може зашкодити вашому сайту.
В цій статті ми розберемо особливості форматів, проведемо дослідження з порівнянням форматів і дамо практичні поради по використанню зображень.
Для того, щоб зрозуміти сенс і особливості сучасних форматів, треба спочатку зрозуміти особливості класичних форматів.
GIF (Graphics Interchange Format)
GIF - це перший формат, який можна назвати саме web-форматом. Адже з’явився він у далекому 1987 році як прорив, дозволяючий передавати кольорові зображення по дуже повільних телефонних лініях.
Цей формат в середині містить палітру усього з 256 кольорів. GIF підтримує прозорість, але не напівпрозорість, тобто піксель або зафарбований (і зафарбований в один з 256 кольорів, без градієнтів), або ні, що призводить до піксилізованих країв округлих елементів зображення.
Формат використовує ефективний (на свій час) алгоритм стиснення без втрат, який дуже добре працює з великими однотонними областями.
Тому, цей формат гарно підходив для простих пласких іконок та логотипів для сайту. Підтримка анімації в нього з’явилась пізніше.
Сьогодні цей формат використовують, здебільшого, для анімованих зображень. Але час цього формату пішов і сьогодні навіть повноцінне відео може займати менше місця, ніж та ж анімація в форматі GIF. Тому, використовувати цей формат на сайті можна тільки в дуже специфічних ситуаях, коли альтернатива з якихось причин буде не прийнятною.
Чому GIF досі живий?
Все дуже просто, це формат який піде навіть на вашій пральній машині, завдяки цьому, він став ідеальним носієм мемів.
JPEG (Joint Photographic Experts Group)
Якщо GIF був створений для штучної графіки, то JPEG створили у 1992 році спеціально для фотографій.
Основною особливістю формату стало стиснення з втратами. Автори формату вирішили викинути все зайве, враховуючи особливості людського ока і того, як наш мозок обробляє зображення. Наше око набагато чіткіше бачить різницю в яскравості, ніж у відтінках кольорів. Ідея в тому, щоб буквально викинути дрібні нюанси кольорів, які ми все одно не здатні розрізнити, залишаючи основу картинки чіткою.
Алгоритм стиснення використовує дискретне косинусне перетворення. Зображення розбивається на блоки 8х8 пікселів і алгоритм аналізує ці блоки та вирішує, які деталі є шумом, а які важливими об’єктами.
JPEG не любить текст та логотипи, оскільки JPEG розмиває різкі колірні переходи, щоб зробити фото плавним.
Кожне збереження файлу JPEG призводить до втрат, оскільки запускається процес оптимізації. Навіть, якщо ви обираєте якість збереження вище, ніж була у вихідного файлу. Зображення від цього не тільки не стане краще, воно неодмінно втратить трохи в якості.
Чи актуальний зараз JPEG?
Однозначно - так. Незважаючи на те, що вже давно є більш ефективні формати, JPEG має максимальну підтримку, існує безліч інструментів для різнопланової роботи з JPEG, цей формат надійний і передбачуваний. Він майже безальтернативний для проектів з великим масивом зображень, що потребують пакетної обробки.
PNG (Portable Network Graphics)
Якщо JPEG - це про компроміси заради ваги, то PNG, що з’явився у 1996 році, став йому повною протилежністю. Його створили як вільну від патентів відповідь формату GIF, але він швидко перевершив свого попередника.
Головна риса PNG - стиснення без втрат. Коли ви зберігаєте картинку в PNG, ви можете бути впевнені: кожен піксель залишиться на своєму місці, а кольори не зміняться.
Ключовою особливістю формату стала підтримка альфа-каналу (напівпрозорості). Це дозволяє створювати м’які тіні, ефекти скла та ідеально гладкі краї об’єктів, які плавно зливаються з будь-яким фоном сайту. Жодних зубчастих країв чи білої бахрами, як це було у GIF.
PNG не боїться тексту, тонких ліній та логотипів. Там де JPEG створює брудні пікселі навколо літер, PNG залишає картинку кришталево чистою. Але за таку якість доводиться платити розміром файлу. І у випадку із застосуванням на сайті, треба усвідомлено приймати рішення про використання PNG на сайті.
Де і коли використовувати PNG?
Історично, цей формат часто використовували для логотипів і іконок. Але з появою формату SVG, PNG для цього застосовують рідко. Оскільки SVG погано працює з градієнтами, то буде доречно використовувати PNG в таких випадках.
Також, доречно використовувати PNG там, де ви хочете зберегти максимальну чіткість і передачу кольору. Наприклад, для зображень ювелірних товарів, чи портфоліо фотографа.
Трохи познайомившись із класичними форматами ми можемо перейти до огляду форматів цього тисячоліття.
SVG (Scalable Vector Graphics)
SVG стоїть осторонь від усіх інших форматів. Якщо JPEG та PNG - це сітка з кольорових точок, то SVG - це мова геометрії, що описує лінії та криві.
Перша версія формату SVG з’явилась у 2001 році як спроба об’єднати напрацювання Microsoft та Adobe у відкритий стандарт. Проте, формат ледь не загинув в тіні популярного тоді Flash. Тільки після того як iPhone поховав Flash, та випустив Retina-дисплеї у 2010-х роках SVG став застосовуватись на більшості сайтів.
Головна особливість формату - векторність, а значить нескінченна масштабованість. Оскільки SVG не знає, що таке піксель, ви можете розтягнути іконку до будь-якого розміру, і вона залишиться ідеально чіткою. При цьому, файл важитиме лише кілька кілобайт, бо для математики не важливо, якого розміру коло - вона просто описує його радіус та центр.
Також, код цього формату можна вставляти прямо в html-документ, що позбавляє браузер необхідності робити зайві запити до сервера. А також, на такі іконки можна впливати через css, змінюючи колір при наведенні, або налаштовуючи анімацію.
WebP (Web Picture)
У 2010 році формат WebP став першою серйозною спробою Google переосмислити стандарти інтернету, що не змінювались десятиліттями. Мета була в тому, щоб замінити JPEG, PNG та GIF одним універсальним форматом.
Google не створив формат з нуля. Вони купили компанію On2 Technologies, яка розробляла відеокодеки. В основі WebP лежить технологія внутрішньокадрового стиснення з відеокодека VP8.
Фактично, зображення WebP - це один кадр із відео. Оскільки відеокодеки набагато ефективніші за фотоформати, цей підхід дав приголомшливий результат у вазі файлів.
На відміну від JPEG, який просто викидає деталі, WebP використовує предиктивне стиснення. Алгоритм аналізує сусідні блоки пікселів і намагається вгадати, що буде далі. Він записує не сам піксель, а лише різницю між реальним зображенням і своїм прогнозом. Оскільки ця різниця зазвичай дуже мала, дані стискаються набагато щільніше.
Тож, що ми маємо? WebP підтримує анімацію і при цьому на 64% ефективніший за GIF. WebP підтримує стиснення без втрат і при цьому на 26% ефективніший за PNG. WebP підтримує стиснення з втратами і при цьому на 25-34% ефективніший за JPG.
Але є і мінуси. Алгоритм VP8 іноді занадто агресивно згладжує текстури. Там де в JPEG ви бачили зернистість шкіри або тканини, WebP може зробити “пластикову” поверхню.
AVIF (AV1 Image File Format)
AVIF - це найсучасніший формат, представлений у 2019 році. Він використовує надпотужний відеокодек AV1, над яким працювали Google, Apple, Netflix та Amazon.
Як і WebP, AVIF - це один кадр із відео. Він так само підтримує анімацію, стиснення без втрат і з втратами. Але робить він це значно ефективніше за WebP.
AVIF може бути на 50% легшим за JPEG і на 20-30% легшим за WebP при візуально однаковій якості. Це формат для тих, хто бореться за кожний кілобайт заради ідеальних показників LCP.
На відміну від JPEG, який підтримує лише 8-бітний колір, AVIF може передавати мільярди відтінків. Це означає, що складні градієнти виглядатимуть ідеально гладкими, без жодних “сходинок” кольорів.
AVIF набагато розумніший у складних зонах. Там, де WebP може “замилити” текстуру шкіри чи тканини, AVIF зберігає природну деталізацію навіть при сильному стисненні.
Але за такий прогрес доводиться платити. Стиснення картинки в AVIF вимагає значно більшого часу та потужності сервера або вашого ПК.
Підводні камені використання нових форматів
Коли знайомишся з теорією нових форматів, то все виглядає настільки добре, що хочеться негайно перейти на них, але чи дійсно ви отримаєте всі ці переваги?
В першу чергу треба мати на увазі, що зазначена ефективність є актуальною при конвертації із якісного вихідного файлу. Якщо ви будете конвертувати вже стиснутий файл, то ваш новий файл може займати більше місця ніж вихідний або втратити в якості.
Чому таке можливо?
Відсутність розвинутих інструментів для роботи з WebP та AVIF.
Нові формати слабко підтримуються на рівні графічних редакторів і інструментів сайту. В переважній більшості випадків, у вас буде вихідне зображення в класичному форматі. Вам його надасть фотограф або дизайнер, або постачальник, або придбаєте на фотостоках і вам треба буде конвертувати ці зображення. Навіть якщо вам нададуть одразу потрібний формат, то ймовірно вже конвертований з класичного формату.
В цьому випадку в нас з’являється купа питань до конвертору, бо у більшості конверторів немає жодних налаштувань. А ми пам’ятаємо, що формат підтримує стискання як із втратами, так і без. Тож з якими налаштуваннями стискання нам видасть зображення конвертер? І це ми говоримо тільки про стискання, а якщо подивитись на інструменти, в яких є налаштування формату, то ми побачимо щонайменше з десяток налаштувань, які треба розуміти.
Тож, при неконтрольованій конвертації ми можемо отримати або збільшені файли або погіршені, але оптимальна конвертація вкрай малоймовірна.
Суть стиснення з втратами
Стиснення із втратами передбачає те, що файл буде містити меньше інформації про піксель, чи групу пікселів. Це не обов’язково пов’язано із тим, як виглядає ваше зображення. Наприклад, якщо ви збережете зображення на 20% якості і воно стане розмитим, а потім перезберегти (з конвертацією чи без) на 100% якості, то зображення залишиться таким самим розмитим, але буде займати більше місця. Просто файл буде містити багато інформації про розмиті пікселі.
Демонстрація варіантів стиснення і конвертації
Для наочного розуміння давайте спробуємо порівняти ефективність обробки зображень різними інструментами. Для цього я візьму три якісні зображення і конвертую їх у фотошопі, кількох простих web-конверторах і інструментом squoosh.app.
Скачати архів з усіма результатами
Скачати архів з усіма результатами
Скачати архів з усіма результатами
А тепер давайте проведемо ту ж саму процедуру, але вихідним файлом для нас буде jpg, збережений із 60% якості.
Скачати архів з усіма результатами
Скачати архів з усіма результатами
Скачати архів з усіма результатами
На основі проведених тестів можна зробити ключовий висновок: сучасні формати не є магічною таблеткою, а їхня ефективність критично залежить від вхідного зображення і налаштувань. Найбільшою помилкою є конвертація вже стиснутих файлів у режимі “без втрат” (Lossless) - у такому разі алгоритми намагаються ідеально зберегти артефакти попереднього стиснення, що призводить до парадоксального росту ваги файлу до 700%.
Також варто відмітити, що JPEG, хоч і програє в більшості випадків, він все ще виглядає щонайменше прийнятним, або навіть конкурентоспроможним. Головний інсайт полягає в тому, що контроль над стисненням і вибір ефективного інструменту важливіші за назву формату. Автоматичні плагіни, особливо на стороні CMS, програють ручному контрольованому стисненню. Тому, сліпе бажання відповідати рекомендаціям Google та інтернет маркетологів може збільшити вам файли, і це може бути ще не найгірша побічна дія.
Як на практиці використовувати сучасні формати AVIF та WebP?
Для використання нових форматів треба в першу чергу подумати про підтримку цих форматів.
Підтримка форматів пристроями користувачів
Чи можуть пристрої користувачів відтворювати нові формати?
Так, сучасні пристрої і браузери вже вміють із ними працювати, але iPhone з ios 15 та старіші не можуть відтворити AVIF. Хоч таких користувачів і не багато, якщо ви розраховуєте на цю аудиторію, то не використовуйте цей формат.
Підтримка форматів на стороні CMS
Що означає підтримка формату двигуном сайту?
Щоб не чіпати код, ми можемо звести підтримку до трьох функцій CMS:
- Файл-менеджер двигуна знає ці формати, він може показати їх на сервері і вірно вставити на сайт.
- Текстовий редактор сайту не повинен сприймати ці формати як помилкові або небезпечні файли та має відтворювати їх безпосередньо у вікні редагування.
- Якщо двигун робить ресайзи зображень (наприклад зображень товарів), то він має вміти працювати з алгоритмом цього формату.
Якщо ваш двигун має таку підтримку, то ви можете підготувати файли в нових форматах і завантажити їх на сайт. Якщо ж ви будете готувати зображення в інших форматах, то формат зображення на сайті має відповідати тому, який ви завантажили.
Якщо ваш двигун не підтримує роботу з новим форматом, то можна встановити інструменти конвертації. Тобто, ваш двигун буде фактично працювати із класичними форматами, але сторонній плагін буде створювати копію зображення в новому форматі і відображати його на сайті.
Де саме на сайті варто застосовувати нові формати зображень (WebP та AVIF)
Банери
Банери — це зазвичай найбільші зображення на сторінці, які сильно впливають на показник LCP. Оскільки вони готуються вручну, це одне з найкращих місць для використання AVIF або WebP. Тут можна досягти суттєвого зменшення ваги при збереженні високої якості.
Фонові зображення
Великі фонові зображення часто важать найбільше. Їх теж варто переводити в нові формати, але робити це потрібно обережно. Не конвертуйте «в лоб» вже сильно стиснуті JPEG-файли — іноді після конвертації розмір тільки зростає. Завжди перевіряйте результат: новий файл має бути помітно легшим.
Зображення для статей і новин
У статтях і новинах кількість зображень зазвичай невелика, і на їх підготовку є час. Тут добре працює використання AVIF. Навіть якщо на сторінці 5–10 ілюстрацій, при правильній оптимізації сторінка все одно завантажуватиметься швидко.
Зображення товарів в інтернет-магазинах
Для товарних зображень нові формати часто виявляються найменш ефективними. Причин кілька:
- Більшість фото приходить від постачальників уже в стисненому JPEG. Повторна конвертація в WebP або AVIF у багатьох випадках не дає виграшу в розмірі, а іноді навіть збільшує вагу файлу.
- При тисячах товарів дуже важко контролювати якість конвертації кожного зображення.
- Якщо у вас є власна студійна зйомка у високій якості (добрий JPEG або PNG), тоді має сенс налаштовувати масову конвертацію в сучасні формати.
Ризики автоматичної конвертації зображень на сайті
Ризик збільшення файлів
Навіть якщо ви перевірите вручну кілька файлів і побачите, що конвертовані зображення в нових форматах займають менше місця, не з усіма зображеннями може вийти так само і в загальному розмір може значно збільшитись.
Ризик втрати візуальної якості
З одними і тими ж налаштуваннями конвертація може видати файли як в гарному візуальному стані, так і з сильними артефактами. При автоматичній конвертації великої кількості файлів, ви втрачаєте над цим контроль.
Збільшення об'єму файлів на диску
Зазвичай, при конвертації файлів на сайті, зберігається і вихідний файл в класичному форматі. В результаті, ви щонайменше вдвічі збільшуєте об’єм файлів на сервері.
Ліміти inode
Якщо ви використовуєте shared hosting, то у вас є ліміти inode. Inode - це як ячейка пам’яті. Навіть якщо файл займає 0 байт, або у вас є порожня папка, вони займають 1 inode. Якщо ви збільшили кількість файлів за рахунок конвертованих, то ризикуєте перевищити свої ліміти.
Ефективність проти навантаження
Для конвертації зображень прямо на сайті необхідні обчислювальні ресурси процесора. Чим ефективніше буде стиснення, тим більше навантаження на процесор. Тож, по суті, ви стоїте перед вибором: або не ефективне стиснення, або ризикнути покласти сайт.
Що у висновку?
Будь яка оптимізація має дійсно щось оптимізувати, а не просто змінювати назву файлу.
Як і з класичними форматами треба розуміти коли і де їх використовувати, так і з новими. Але з новими треба значно більше уваги бо вони значно більш складні і гнучкі. AVIF і WebP дають нам неймовірні можливості, але їми треба вміти скористатись.