Эта статья была спонсирована Cloudinary . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
При добавлении изображений на веб-сайт большинство из нас инстинктивно узнает, что следует избегать использования GIF для фотографии и избегать использования JPEG для графика. Ленивые из нас — то есть я — могут просто выбрать PNG для всего и надеяться на лучшее.
Так почему мы это делаем? Все сводится к кодировке, используемой для создания изображения в определенном формате файла. JPEG подходит для фотографии («P» означает «Фотография»), поскольку он размывает острые края, но сохраняет плавные градиенты. Кодирование изображения большими четкими цветными блоками с использованием JPEG приводит к потере четкости и неэффективному кодированию.
И наоборот, GIF подходит для логотипов или простых блок-графиков, поскольку он фокусируется на изменениях между однородными областями цвета. Это очевидно довольно бесполезно для фотографий, где цвета различаются почти попиксельно.
Например, это изображение размером 106 КБ в формате JPEG:
Тем не менее, он достигает колоссального 517Kb в кодировке GIF. Это почти в 5 раз больше, если использовать неподходящий формат изображения. О, Боже.
Ему удается поразить 329kb, закодированный как PNG. Хотя это и не так плохо, это все же более чем в 3 раза больше, чем при использовании наиболее подходящего формата содержимого изображения.
Как мы можем легко увидеть здесь, основные форматы изображений лучше всего подходят для различных типов контента, и выбор неправильного формата изображения вызывает потенциально значительный, ненужный раздув.
Вы должны убедиться, что каждое изображение, поступающее на ваш сайт, закодировано в наиболее подходящем формате, а не только в том формате, в котором вы его получили, чтобы избежать ненужного раздувания страницы.
Поддержка браузера
Итак, мы только что рассмотрели три «классических» формата файлов изображений — оригинальные ароматы, которые все знают и любят. Вот где это начинает усложняться: все браузеры используют разные форматы изображений следующего поколения. Chrome имеет фантастический WebP, Edge поддерживает JPEG XR, а Safari имеет JPEG 2000.
Браузерная поддержка форматов изображений следующего поколения
| WebP | JPEG XR | JPEG 2000 | |
|---|---|---|---|
| Хром | да | Икс | Икс |
| край | Икс | да | Икс |
| Сафари | Икс | Икс | да |
| Fire Fox | Икс | Икс | Икс |
Например, WebP может давать значительно лучшие результаты, чем GIF, PNG и JPEG в различных сценариях. Для тестового изображения, которое мы использовали выше, оно составляет 90,5 Кбайт — экономия около 15% от JPEG. Однако в настоящее время вы можете использовать этот тип изображения только в том случае, если устройством, запрашивающим изображение, является Chrome, Opera или браузер Android.
JPEG XR является собственным форматом Microsoft — JPEG eXtended Range — и улучшает базовое кодирование JPEG, даже поддерживая прозрачность (например, PNG и WebP). Тестовое изображение в формате JPEG XR весит 104 Кб : примерно на 2% меньше оригинального изображения JPEG. Естественно, это только для IE9 + и Edge, и, как следует из названия, это наиболее подходит для фотографических изображений.
Поэтому вам нужно не только убедиться, что вы используете наиболее подходящий формат для содержимого изображения, вы также должны рассмотреть наиболее подходящий формат для устройства, запрашивающего изображение. Возможно, вам даже понадобится создать четыре или пять версий каждого изображения: одну, закодированную в одном из трех классических форматов (для всех устройств), и одну для каждого из новых, специфичных для браузера, форматов следующего поколения (чтобы насладиться оптимизацией) Преимущества нового формата). Это много времени и усилий.
Предстоящие форматы изображений
До сих пор мы рассмотрели «классические» форматы, которые вы можете использовать во всех браузерах, и впечатляющие новые форматы, доступные в некоторых основных браузерах.
Неравномерная поддержка браузеров означает, что если мы хотим использовать преимущества новых форматов, нам необходимо создать несколько альтернативных версий каждого изображения на нашем сайте.
Теперь вот кривая: пока не поддерживаемые форматы изображений. Форматы, такие как FLIF и BPG, набирают обороты, и это только вопрос времени, когда один из браузеров развернет поддержку.
Что это значит для тебя? Возможно, вам придется восстановить все ваши существующие изображения в новом формате или два, что потребует еще больше времени и усилий.
Автоформат от Cloudinary
К счастью, есть одно отличное решение: функция автоматического форматирования Cloudinary позволяет загружать одно оригинальное изображение — потенциально даже в наименее подходящем формате для контента — и с помощью одного умного параметра URL вы можете доставить его в наиболее подходящем формате. для конечного пользователя, даже если в будущем появится новый формат.
Если мы добавим параметр f_auto в URL изображения, формат изображения теперь автоматически определяется Cloudinary :
http://res.cloudinary.com/otomotech/image/upload/w_800,f_auto/kite_xikqxa.jpg
Просмотр этого URL в Chrome даст ответ WebP; в Edge это будет изображение JPEG XR. В Firefox это будет оригинальный аромат JPEG.
С этим параметром в ссылках на изображения вам никогда не придется беспокоиться о поддержке кроссбраузерного формата изображений — ни сейчас, ни в будущем. Чрезвычайно мощный, перспективный материал.
Если вы этого еще не сделали, зайдите в Cloudinary и получите бесплатный аккаунт .
Ссылки
- Поддержка формата изображения
- FLIF
- БПГ
- Предстоящая поддержка будущих форматов, пример .
Этот контент спонсируется через Синдикат рекламы.