От автора: при загрузке изображений на сайт большая часть людей инстинктивно понимает, что GIF нельзя использовать для фотографий, а JPEG – для графиков. Ленивые пользователи, т.е. я, могут выбрать PNG вообще для всего и надеяться на лучшее.
Почему мы разграничиваем форматы изображений? Все сводится к кодировке, используемой для создания изображения в определенном формате. JPEG подходит для фотографий (P расшифровывается как «Photographic» или фотографический), так как этот формат размывает острые грани и сохраняет плавные градиенты. Кодирование изображений с помощью больших, четких блоков цвета в JPEG приводит к потере качества и неэффективному кодированию.
GIF подходит для логотипов и простых блочных графиков, так как в них наблюдается четкое изменение однородных цветов. Данный формат практически бесполезен для фотографий, где цвета отличаются попиксельно.
Как пример, изображение ниже имеет формат JPEG и весит 106 Кб:
Однако в формате GIF изображение весит целых 517 Кб. Только из-за неподходящего формата вес изображения увеличился почти в 5 раз.
В PNG данное изображение весит 329 Кб. Не так плохо, но это все равно более чем в 3 раза больше, чем при использовании подходящего формата.
Как можно с легкостью заметить, основные форматы изображений подходят под разные типы контента, и неправильный выбор формата вызывает значительное увеличение веса файлов.
Чтобы не засорять страницу, необходимо проверять каждое загруженное изображение на подходящий формат, а не просто смотреть, в каком формате они были загружены.
Поддержка в браузерах
На данный момент мы рассмотрели три «классических» формата изображений, которые все знают и любят. Дальше все становится сложнее: все браузеры продвигают разные форматы изображений следующего поколения. В Chrome это WebP, Edge поддерживает JPEG XR, в Safari это JPEG 2000.
Поддержка форматов следующего поколения в браузерах
В различных сценариях, например, WebP значительно превосходит GIF, PNG и JPEG. Если взять изображение выше, то его вес уменьшается до 90.5 Кб – экономия относительно JPEG составляет 15%. Данный формат в настоящее время можно использовать только в браузерах Chrome, Opera и Android Browser.
JPEG XR (JPEG eXtended Range) – формат Microsoft с более высокой производительностью, чем JPEG. Данный формат даже поддерживает прозрачность (как в PNG и WebP). Тестовое изображение в формате JPEG XR будет весить 104 Кб, что на 2% меньше оригинала. Формат поддерживается только в IE9+ и Edge. Также из названия следует, что формат лучше всего подходит для фотографий.
Таким образом, вам не только нужно убедиться, что вы используете наиболее подходящий формат под контент изображения, но также необходимо подобрать подходящий формат под устройство, с которого оно запрашивается. Возможно, придется создать 4 или 5 версий всех изображений: одно, закодированное в одном из трех классических форматов (для всех устройств), и еще по одной версии для всех новых форматов следующего поколения, заточенных под определенный браузер (чтобы получить преимущества оптимизации новых форматов). На это требуется много времени и усилий.
Будущие форматы изображений
На данный момент мы разобрали «классические» форматы, работающие во всех браузерах, а также окунулись в новые форматы, доступные в некоторых главных браузерах.
Неравномерная поддержка в браузерах приводит к тому, что для использования новых форматов и всех их преимуществ нам необходимо создать несколько альтернативных версий каждого изображения на сайте.
И теперь встает проблема с еще неподдерживаемыми форматами изображений. Форматы типа FLIF и BPG находятся еще в зачаточном состоянии, они только набирают обороты. Однако это лишь вопрос времени, когда один из браузеров начнет поддерживать эти форматы.
Что это значит для вас? Возможно, придется конвертировать все ваши изображения в новый формат или два формата, что требует еще больше времени и сил.
Автоматическая конвертация форматов в Cloudinary
К нашему счастью, есть замечательное решение – автоматическая конвертация форматов в Cloudinary. Вы можете загрузить одно изображение (возможно, даже в самом неподходящем формате), и с помощью одного хитрого параметра в URL предоставлять пользователям самый подходящий формат, даже если в будущем появятся новые форматы изображений.
При добавлении в URL параметра f_auto формат изображения будет автоматически определяться в Cloudinary: //res.cloudinary.com/otomotech/image/upload/w_800,f_auto/kite_xikqxa.jpg
В Chrome этот URL даст формат WebP, в Edge – JPEG XR. В Firefox это будет оригинальный JPEG.
Благодаря этим настройкам в адресе изображения вам больше не нужно беспокоиться о кроссбраузерной поддержке форматов, ни сейчас, ни в будущем. Очень мощный инструмент с заделом на будущее.
Автор: Robin Osborne
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
