Стривайте, а WebP дійсно хороший формат

17

Від автора: коли я працюю над виступом, я створюю слайди в Keynote. В кінці виступу я викладаю їх на Speakerdeck. Speakerdeck – дуже хороший сервіс. Він працює рівно так, як я хочу, щоб працювало невелике слайдшоу. І я захотів спробувати поліпшити його.

Мені дійсно подобається такий формат виступів, піонером в якому став Maciej Cegłowski (принаймні для мене). Цей формат включає в себе дві колонки: зліва слайди, праворуч нотатки автора. Також я бачив красиві слайдшоу у Scott Jehl на Filament Group lab.

Я порився в архівах Filament Group Slack і знайшов інструмент, з допомогою якого можна генерувати зображення з слайдів в Keynote — Keynote Extractor. Він досить непогано працює. Keynote Extractor витягнув мої слайди в просту папку з файлами HTML, CSS і PNG. Єдина проблема – зображення були величезні. Всього майже 18Мб.

Стривайте, а WebP дійсно хороший формат

IMAGEOPTIM

ОК, може, зображення були погано оптимізовані. Давайте пропустимо їх через ImageOptim.

Стривайте, а WebP дійсно хороший формат

12Мб – вже краще, але мало.

JPEG

Давайте конвертуємо в JPEG PNG. JPEG-стиснення – суцільна магія, часто краще працює з реалістичними фотографіями.

# Converts a directory of PNG files to JPG
# Added to this my .zshrc file (or .bash_profile)
# Install `imagemagick` with `brew install imagemagick`
function batchjpeg() {
for i in *.png
do
convert «$i» «${i%.*}.jpg»
done
}

Читайте докладніше про якість і стандартних налаштуваннях для convert в ImageMagick.

Стривайте, а WebP дійсно хороший формат

Ще краще – 4.5 Мб.

WEBP

Повинен сказати, що я упереджено ставився і WebP і думав, що це дурний формат. В основному з-за обмеженої підтримки в браузерах на той момент часу, яка вимагала JS-рішення або backend служби для правильної роботи з WebP з допомогою фолбеков.

Через пару днів я побачив цей твіт (спасибі, Ерік!) і вирішив переосмислити мою позицію.

Стривайте, а WebP дійсно хороший формат

Моєю першою реакцією була ностальгія за часами до тега , який за цей час набрав досить хорошу підтримку в браузерах. Тег дає нам простий спосіб без JS і backend для роботи з WebP в браузерах з підтримкою. Схоже, проблема виникає тільки в Opera Mini і Android, які підтримують WebP, але не підтримують . У них настільки низька продуктивність, що вони отримають JPG-фолбек.

Важливо відзначити, що я конвертував оригінальний PNG WebP (не JPG) з якістю 80%.

# Converts a directory of image files to WebP
# Added to this my .zshrc file (or .bash_profile)
# Install `cwebp` using `brew install webp`
function batchwebp() {
for file in *
do
cwebp -q 80 «$file» -o «${file%.*}.webp»
done
}

Стривайте, а WebP дійсно хороший формат

Ого. З 17.9 Мб до 1.5 Мб. Стиснення на 91.6%.

Відмінний результат для 52 слайдів зображень. Особливо враховуючи те, що я не зменшував розміри оригіналів. На максимальній ширині візуалізації (496 пікселів найширше) і з натуральної шириною 1024 пікселя зображення мінімум 2.064516129 x-Retina friendly.

Як Ерік Лоуренс у своєму твіті, тепер і я буду радити використовувати WebP з тегом ! Скиньте зайві кілобайти!

Нотатки з реалізації

В кінцевій роботі на моєму сайті я злегка сжульничал. Чотири слайда – це просто відео, предзагружающее метадані. Метадані від відео важать менше, ніж повнорозмірний слайд. Але все це не відноситься до вищеописаного аналізу – скріншоти були створені без відео.

Ще більше можливостей оптимізації

Якщо б у мене з’явився вільний час, я б ще більше оптимізував зображення. Нижче представлені способи. Чисто для цього проекту я не піду далі, але по роботі, можливо, я б і спробував. Однак, можливо, в цьому і полягає небезпека WebP. Ми з легкістю оптимізуємо зображення тільки під Chrome і на цьому зупиняємося, коли в дійсності сторінку потрібно оптимізувати під браузери без підтримки WebP.

Щоб ще сильніше зменшити вагу сторінок зі слайдами, я міг би зменшити максимальний розмір візуалізації слайдів. Можна було б використовувати 1.5 x-Retina замість 2.06 х, як зараз.

Також можна було використовувати srcset разом з тегом picture для завантаження зменшених файлів під менші вьюпорты. Для ретина дисплеїв можна було б зберігати постійний розмір для різних вьюпортов.

Можна було б використовувати стиснення зображень з WebP і супер низькими значеннями перетворення якості.

Можна було б заощадити на текстових слайдах, якщо перевести їх на веб-шрифти замість зображень.

Лінива завантаження слайдів за допомогою JS, реалізація якої заснована не на самих хороших стандартах. Такий метод вимагає нестандартної розмітки для зображень, яка буде ховати їх від препарсера. Так працює AMP. Добре б придумати, як пов’язати цей спосіб з тегом picture.