Постойте, а WebP действительно хороший формат

Дата публикации: 2017-05-26

От автора: когда я работаю над выступлением, я создаю слайды в 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

Давайте конвертируем PNG в JPEG. JPEG-сжатие – сплошная магия, зачастую лучше работает с реалистичными фотографиями.

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

# Converts a directory of PNG files to JPG

# Added this to my .zshrc file (or .bash_profile)

# Install `imagemagick` with `brew install imagemagick`

function batchjpeg() {

for i in *.png

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 this to 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
}

# Converts a directory of image files to WebP

# Added this to my .zshrc file (or .bash_profile)

# Install `cwebp` using `brew install webp`

function batchwebp() {

for file in *

cwebp -q 80 "$file" -o "${file%.*}.webp"

done

}

Постойте, а WebP действительно хороший формат

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

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

Как Эрик Лоуренс в своем твите, теперь и я буду советовать использовать WebP с тегом ! Сбросьте лишние килобайты!

Заметки по реализации

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

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

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

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

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

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

Можно было бы сэкономить на текстовых слайдах, если перевести их на веб-шрифты вместо изображений.

Ленивая загрузка слайдов с помощью JS, реализация которой основана не на самых хороших стандартах. Такой метод потребует нестандартной разметки для изображений, которая будет прятать их от препарсера. Так работает AMP. Хорошо бы придумать, как связать этот способ с тегом picture.

Редакция: Zach Leatherman

Источник: //www.zachleat.com/

Редакция: Команда webformyself.

Метки: сайтостроение