Погодите, а WebP вообще-то ничего!

Перевод «Wait, WebP is actually worth it» Зака Лезермана.

Я решил поступить немного по-другому со слайдами к своему предыдущему выступлению — я решил разместить их у себя.

Когда я готовлюсь к выступлению, я делаю слайды в Keynote. После того, как выступление закончилось, я публикую их на Speaker Deck. Speaker Deck очень хорош. Он работает так, как я и ожидаю от простого динамического слайд-шоу. Но я хотел это немного улучшить.

Мне определенно нравится формат, возможно впервые открытый (по крайней мере, насколько я знаю) Мацей Чеговски. Он представляет собой большой двухколоночный вид с картинками слайдов слева и заметками докладчика справа. Я также видел этот формат в прекрасном исполнении у Скотта Йелла из Filament Group.

Итак, я перерыл Slack-архивы Filament Group и нашел утилиту для генерации картинок из слайдов Keynote, которая называется Keynote Extractor. Она работает достаточно хорошо. Утилита распаковала мои слайды Keynote в папку с HTML, CSS и картинками в формате PNG. Единственная проблема была в том, что эти картинки весили очень много — суммарно почти 18 МБ, если быть точным.

На скриншоте из DevTools видно, что суммарный вес картинок почти 18 МБ.

ImageOptim

Хорошо, может эти картинки просто недостаточно оптимизированы. Давайте прогоним их через ImageOptim и посмотрим, насколько это может помочь.

На скриншоте из DevTools видно, что суммарный вес картинок стал 12 МБ.

Окей, 12 МБ — это прогресс, но очевидно, что этого недостаточно.

JPG

Давайте сконвертируем эти картинки из PNG в JPG. Сжатие у JPG просто волшебное и часто оно лучше подходит для реалистичных фото.

# Конвертация папки с PNG файлами в JPG
# Добавил этот код мой файл .zshrc (или можно в .bash_profile)
# Установите `imagemagick` комадной `brew install imagemagick`
function batchjpeg() {
    for i in *.png
    do
        convert "$i" "${i%.*}.jpg"
    done
}

Читайте подробнее про -quality и настройках по умолчанию для конвертации в ImageMagick.

На скриншоте из DevTools видно, что суммарный вес картинок стал 4,5 МБ.

Уже лучше — 4,5 МБ.

WebP

Должен признать, что у меня было предвзятое отношение к WebP и я думал, что использовать его было немного глупо, главным образом потому, что у WebP была ограниченная браузерная поддержка, что потребовало бы решения на JavaScript или бэкенд-сервис, чтобы правильно отображать WebP с фолбэком.

Затем, я натолкнулся на этот твит (спасибо, Эрик!) несколько дней спустя и решил пересмотреть свои взгляды.

Моей первой реакцией было остаточное беспокойство по отношению к тегу <picture>, которое появилось еще до момента прекрасной браузерной поддержки. <picture> дает нам простое, не использующее JavaScript и бэкенд решение, позволяющее отображать WebP в тех браузерах, которые его поддерживают. Похоже на то, что осталась лишь небольшая проблема с Opera Mini и Android Browser, которые поддерживают WebP, но не поддерживают <picture>—но они лишь немного пострадают в плане производительности и получат JPG-фолбэк.

Важно отметить, что я сконвертировал оригинальные PNG (а не JPG) файлы в WebP с качеством 80%.

# Конвертация папки с файлами в WebP
# Добавил этот код мой файл .zshrc (или можно в .bash_profile)
# Установил `cwebp` комадной `brew install webp`
function batchwebp() {
    for file in *
    do
        cwebp -q 80 "$file" -o "${file%.*}.webp"
    done
}

Читайте подробнее о -q и настройках по умолчанию для cwebp.

На скриншоте из DevTools видно, что суммарный вес картинок стал 1,5 МБ

Ух ты! В целом вес уменьшился с 17,9 МБ до 1,5 МБ. Это на 91,6% меньше.

Для 52 разных картинок слайдов — это потрясающий результат. Особенно учитывая то, что я даже не менял размер у исходных картинок. При максимально ширине изображения (496 пикселей в самом широком случае) и с реальной шириной изображение 1024 пикселя, каждая картинка масштабируется в 2,064516129 раза и прилично выглядит на ретине.

Как и Эрик Лоуренс в своем твите, теперь я призываю вас попробовать WebP c <picture>. Сбрейте свои килобайты, народ!

Примечание к реализации

В конечном результате, который вы видите на моем сайте, я немного сжульничал: четыре слайда — это видео, которые предварительно подгружают метаданные. Метаданные видео, вероятно, будут весить меньше, чем картинки слайдов в полном разрешении. Однако, это никак не влияет на анализ выше — скриншоты были созданы без видео.

Больше возможностей по оптимизации

Вот ещё несколько вещей, которые я мог бы сделать для улучшения, если бы я хотел потратить на это больше времени. Для этого проекта я этого не делаю, но в своей профессиональной работе, вероятно, буду. Но, возможно, в этом и заключается опасность WebP. Мы делаем эту простую оптимизацию для Chrome и Chrome-подобных браузеров и заканчиваем на этом, когда на самом деле этой странице нужно больше оптимизации для браузеров, которые не поддерживают WebP.

• Для того, что бы уменьшить вес страницы со слайд-шоу, я мог бы просто сделать меньше максимальный размер слайдов. Я мог бы даже использовать минимальный множитель 1,5 для ретины, вместо 2,06, который я использую сейчас.
• Я мог бы также использовать srcset вместе с <picture> для того, что бы отдавать мелкие файлы на маленьких размерах вьюпорта.
• Взгляните и на подход к сжатию изображений с WebP и супернизким значением качества при сжатии.
• Я также мог бы рассмотреть возможную экономию за счет конвертации текстовых слайдов с использованием веб-шрифтов вместо картинок
• Ленивая подгрузка слайдов с помощью JavaScript, что на самом деле не имеет хорошого стандартного способа реализации. Может потребоваться нестандартная разметка для картинок, чтобы спрятать их от препарсера. Насколько я знаю, так работает AMP. Также было бы неплохо подумать о том, как это могло бы работать вместе с <picture>.

Перевод Игоря Лесневского, редактура Вадима Макеева.