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

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

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

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

IMAGEOPTIM

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

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.

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

WEBP

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

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

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

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

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

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

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

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