Останні кілька місяців в Айри пройшли в напруженому пошуку і відборі кращих рішень для зменшення розміру файлів. Розмір веб-сторінок постійно збільшується. і зображення займають значну частину в сумарному обсязі даних при завантаженні.
Щоб розуміти, як саме зображення для веб-сторінок можуть бути оптимізовані, потрібно розібратися в структурі файлів зображень. Ми почнемо з PNG.
Структура PNG файлів
PNG-файл, в першому наближенні, складається із заголовків (чанкі), що містять службову інформацію (в тому числі, і інформацію про колірній схемі), палітрі (у разі використання індексованих кольорів), фільтрів і колірних даних (перетворюються через фільтри). Це накладає наступні обмеження на можливості оптимізації файлу:
- Можна видалити невикористовувані для відображення файлу на веб-сторінках чанкі.
- Можна зменшити або перетворити палітру файлу для кращого стиснення.
- Можна використовувати іншу комбінацію фільтрів, що дозволяють записати колірну інформацію, використовуючи меншу кількість байт.
- Можна використовувати інші алгоритми стиснення інформації в заголовках, палітрі, фільтрах і колірних даних.
У зв'язку з цим всі інструменти оптимізації PNG розбиваються на 4 групи:
- Для видалення непотрібних чанкі з файлу.
- Для квантування / кластеризації / упорядкування палітри (як реалізувати кластеризацию палітри). Будь-яке зменшення палітри відноситься до технік з втратами якості зображення, але візуально зображення може бути майже не відрізняються від оригіналу. Упорядкування палітри покращує її подальше стиснення, на якість зображення не впливає. Також для оптимізації може бути застосоване переклад Неіндексований зображення (з невеликою кількістю квітів) в индексируемое.
- Для підбору найбільш оптимальних фільтрів для зображення.
- Для максимального стиснення всіх частин файлу.
Якщо орієнтуватися на досить докладний розбір інструментів оптимізації PNG, то можна виділити найбільш ефективні утиліти для виконання тих чи інших операцій з PNG-файлами:
Утиліти для оптимізації PNG
Видалення чанкі з зображення підтримують майже всі утиліти, для цієї мети в рівній мірі підійдуть pngout або TruePNG. Також хороша утиліта для роботи з чанка в графічних файлах - це exiftool.
Для квантування / постерізациі найкраще підійдуть pngquant. pngnq-s9 або TruePNG. Перетворення палітри без втрати якості виконують pngoptimizer. pngrewrite і TruePNG.
В області підбору найкращих алгоритмів фільтрації зображень найкраще справляються TruePNG і pngwolf. Оскільки використовуються різні алгоритми, то кращого ефекту можна домогтися, комбінуючи обидва інструменту.
Нарешті, для максимального стиснення зображення найкраще використовувати PNGZopfli або ZopfliPNG.
Підводячи підсумок, кращою комбінацією інструментів для комплексної оптимізації PNG-файлів на поточний момент є TruePNG. pngwolf і ZopfliPNG.
Для Мака можна використовувати зв'язку ImageAlpha і ImageOptim.
Все в одному
Для використання в робочому процесі зазначених утиліт найкраще підійде пакет Image Catalyst - він автоматизує майже всі описані техніки оптимізацій для роботи над групою файлів.
Для зручності користувачів хмари Айри ми впровадили оптимізацію всіх зображень на постійній основі. Деякі техніки оптимізації небезпечні для фінального результату, тому вони винесені в настройку «Просунута», яка працює з тарифного плану Марс.
В середньому, зменшення розміру зображень дозволяє скоротити розмір зображень на 35-50%. це дуже значне досягнення для швидкості сайту, і може бути виконано повністю автоматично при підключенні сайту до Айри.