Самые распространенные форматы изображений на web страницах
Форматы изображений: какой из них выбрать?
Предположим, вы только что завершили дизайн-проект, собираетесь сохранить файл, и в этот момент нужно выбрать правильное расширение для файла. Если вы не понимаете разницы между этими форматами, то будет достаточно сложно выбрать из них подходящий, но сегодня мы решили помочь вам, и объяснить одну простую вещь:
Форматов изображений много, но важны лишь некоторые из них
Существует одно главное правило – для каждой задачи предусмотрены свои форматы изображений. Существует множество различных форматов, с которыми вы никогда даже не столкнетесь, особенно если занимаетесь дизайном печатной продукции.
Постараемся выяснить, какие форматы изображений нам могут пригодиться.
Растровые и векторные изображения
Чтобы действительно понять разницу между типами изображений, для начала нужно выяснить, чем отличаются растровые изображения от векторных.
Растровые изображения состоят из пикселей, и могут быть выражены в чем угодно: от простых иллюстраций до комплексных изображений вроде цветных фотоснимков.
Так как растровые изображения состоят из фиксированного набора пикселей, при их масштабировании не избежать потери качества, особенно если их увеличивать. Они зачастую используются в качестве финального продукта, готового к отправке в печать или к публикации на сайте.
Векторные изображения на самом деле являются не совсем изображениями, – это нечто вроде математических формул, напрямую взаимодействующих с компьютером, сообщая ему координаты фигур, которые нужно отобразить. Благодаря этому, векторные изображения можно масштабировать без потери качества, так как формула просто-напросто подстраивается под необходимые размеры конечного рисунка.
Векторные изображения используются для создания текстов и логотипов, и они не способны отобразить комплексные графические продукты вроде фотографий. Обычно они используются как рабочие файлы, которые позже конвертируют в растровые изображения для сайтов. Но с их помощью также можно разрабатывать графику для последующей печати:
Выбираем правильные форматы изображений
Классификация основных типов файлов, используемых в печати и веб-дизайне, подразумевает нечто большее, чем простое разделение на вектор и растр. Как растр, так и вектор – это лишь два крупных семейства, которые насчитывают множество различных форматов изображений с разными преимуществами, недостатками и предназначением.
Растровые форматы
Учитывая все эти преимущества, JPG зарекомендовал себя в качестве «стандартного» формата для всего, что находится за пределами области дизайна. На практике вам наверняка придется столкнуться с клиентами, которые предоставят собственные логотипы в ужасном качестве или с теми, кто предпочитает работать исключительно с этим форматом, потому что знают только его. Сделайте все возможное, чтобы привлечь их внимание к другим, более подходящим, форматам.
Преимущество GIF ( которое также отличает его от остальных веб-форматов для изображений ) в том, что эти картинки можно анимировать.
Кроме того, GIF поддерживает прозрачность, что иногда позволяет существенно снизить вес файлов. Однако понятие маленького веса относительно, так как чем больше цветов используется, тем больше будет весить файл. Также важно учитывать количество кадров, так как каждый кадр также влияет на вес файла и увеличивает время загрузки веб-страницы.
TIFF ( иногда TIF ) – формат файла без сжатия, а это значит, что при сохранении он вообще не подвергается компрессии. TIFF также поддерживает послойную структуру.
Кроме того, TIFF слишком тяжелый формат для веб-дизайна. А размеры файлов могут отпугнуть неопытных клиентов, так что постарайтесь подготовить проекты в более распространенных форматах.
PSD нельзя использовать на страницах сайта, и мы настоятельно не рекомендуем вам высылать клиентам превью дизайнов в этом формате. Однако он отлично подходит для последующей печати или для обмена файлами проектами с другими дизайнерами.
Векторные форматы
EPS – стандартный векторный формат файлов, состоящий из многочисленных формул и чисел, за счет которых генерируется векторная иллюстрация. Это идеальный формат для тех элементов дизайна, которые обычно нужно масштабировать ( например, логотипы ).
Другие форматы
Однако PDF больше подходит для печатных продуктов вроде книг, брошюр или листовок.
Конвертируем разные типы файлов
При помощи Photoshop и Illustrator вы можете сохранять и конвертировать изображения практически в любые форматы. Но стоит отметить, что сохранение картинки с низким разрешением в какой-то специфический формат не поможет вам улучшить его качество. А вот сохранение высококачественного изображения в формат с использованием сжатия приведет к потере качества.
Конвертировать векторное изображение в растровое очень просто – нужно указать желаемый растровый формат при сохранении. Однако такое действие сожмет векторы в пиксели, а это значит, что вы больше не сможете « безболезненно » масштабировать сохраненное изображение, поэтому мы рекомендуем на всякий случай оставить копию исходного файла.
Конвертирование растрового изображения в векторное – это целая наука. Нет простого способа конвертировать пиксели растрового изображения в формулы, генерирующие векторы. Самый проверенный способ – это просто перерисовать картинку при помощи векторов.
Актуальные форматы изображений в вебе
Эта статья — расширенный вариант нашего внутреннего документа о том, как подготавливать изображения для сайтов и веб-приложений. В ней мы описали актуальные форматы и собрали рекомендации, как добавить поддержку WebP и AVIF на сайт и какие инструменты можно использовать. В заключительной части обзора расскажем, как мы внедрили эти форматы на нашем сайте и какие результаты получили.
Меня зовут Алексей, я работаю верстальщиком в компании FunBox. Мы разрабатываем продукты для мобильных операторов: геосервисы, мобильную рекламу, платежи, интерактивные сервисы и разное другое. Вы пользуетесь нашими продуктами каждый день или нет — тут у меня NDA.
В FunBox хороший продукт — это результат развитой инженерной культуры, и наш корпоративный сайт это подтверждает. Для нас это история о сапожнике в сапогах, ведь разрабатывать для веба, но не сделать нормальный сайт для себя как минимум не круто. Дальше расскажу, как делать хорошо.
Зачем использовать актуальные форматы изображений
Основное преимущество современных форматов изображений — это уменьшение объёма передаваемого по сети трафика, когда пользователь взаимодействует с сайтом или веб-приложением. Как следствие, страницы открываются быстрее, что положительно влияет как на впечатление пользователя, так и на позиции в поиске: сайты, которые быстро загружаются, получают более высокие позиции в выдаче Яндекса и Google. При этом качество графических материалов остаётся по-прежнему высоким при минимальных трудозатратах на внедрение. В то же время не рекомендуем использовать только самые модные форматы, так как в отдельных случаях это не принесёт большой пользы.
Краткое сравнение основных форматов изображений для веба
Все форматы изображений, которые используются в вебе, можно разделить на две большие группы: векторные и растровые. Из векторных форматов сейчас используется только SVG. Он отлично подходит для изображений с простыми геометрическими формами, например, пиктограмм или логотипов, и они одинаково хорошо выглядят как на обычных экранах, так и на устройствах с HiDPI-дисплеями, что делает SVG идеальным для адаптивной вёрстки под различные устройства. Но он не годится для изображений с большим количеством деталей, например фотографий, из-за размера файла, плюс браузеру потребуются немалые вычислительные ресурсы CPU для отрисовки.
Для фотографий на сайте лучше всего подходят растровые форматы. Самые известные и проверенные временем — JPEG и PNG. Есть ещё GIF для анимированных изображений, но он теряет актуальность, и всё чаще его рекомендуют заменить на HTML5-видео. С развитием веб-технологий JPEG и PNG всё чаще стали использоваться как фолбеки для браузеров, которые не поддерживают современные форматы растровых изображений, такие как WebP и AVIF. Сейчас в вебе JPEG отходит на второй план и уступает своё место новым форматам, так как они во многих аспектах его превосходят.
В 2010 году Google выпустили формат WebP как альтернативу PNG и JPEG. Он использует алгоритм сжатия ключевых кадров из видеокодека VP8, поэтому искажение исходного изображения выглядит иначе относительно других форматов. Сжатие состоит из двух этапов: на первом этапе предсказывается содержимое блоков по уже декодированным, на втором — кодируется ошибка предсказания (Википедия). WebP оставляет чёткие края фотографии, но сжатие с потерями ухудшает детализацию и текстуру. Также надо учитывать, что его настройки сжатия не соответствуют таковым для JPEG, другими словами, качество 50% для WebP и JPEG будет отличаться. В случае с WebP качество снижается достаточно сильно, поэтому рекомендуется начинать с наибольших значений и постепенно их уменьшать (Хабр).
WebP объединяет все достоинства форматов JPEG, PNG и GIF: сжатие с потерями и без потерь, поддержку прозрачности и анимации. Это позволяет использовать его для разных изображений, что упрощает подготовку и обработку графики на сайте. Кроме того, WebP обладает рядом преимуществ:
сжатие изображения без потерь на 26% лучше, чем у PNG;
сжатие изображения с потерями лучше JPEG на 25-34% при одинаковом индексе структурного сходства (SSIM);
поддержка прозрачности без потерь при увеличении размера всего на 22%.
С недавних пор появилась возможность использовать для изображений в вебе ещё один формат — AVIF. Это свободный формат сжатия с потерями качества, основанный на библиотеке для сжатия кадров AV1 (Википедия). Первая версия спецификации была выпущена в начале 2019 года, а первым браузером, который поддерживает изображения в формате AVIF, стал Google Chrome 85, релиз которого состоялся в конце августа 2020 года. Из основных возможностей этого формата отмечают следующие:
значительное уменьшение размера файла при сохранении визуального качества изображения;
поддержка анимированных изображений;
К недостаткам AVIF относят отсутствие поддержки прогрессивного рендеринга: пока изображение не скачается полностью, на его месте ничего не будет отображаться, тогда как JPEG и WebP могут показывать частично загруженное изображение (видео с наглядной демонстрацией).
Чтобы подробнее ознакомиться с WebP и AVIF и сравнить их с другими известными форматами изображений, рекомендую прочитать исследование Джейка Арчибальда и статью одного из авторов-разработчиков формата AVIF в блоге Netflix.
Выбор формата для изображений на сайте
Помимо преимуществ того или иного формата изображений, важно учитывать, поддерживают ли его браузеры. WebP поддерживается практически везде — его доля составляет более 95%:
AVIF в вебе поддерживают почти 70% браузеров:
Есть основания полагать, что все актуальные браузеры начнут полноценно поддерживать AVIF быстрее, чем это получилось с форматом WebP (формат анонсировали в 2010 году, но до браузера Safari его поддержка добралась только в конце 2020 года (!) с выходом Safari 14 и macOS 11 Big Sur). WebKit уже внедрил декодирование AVIF, но ещё не включил его по умолчанию.
Подготовка изображений в форматах WebP и AVIF
Рассмотрим инструменты для подготовки изображений в новых форматах. Одну-две иллюстрации можно обработать с помощью привычных инструментов: онлайн-сервисов, например Squoosh или avif.io, или графических редакторов. Ещё Google выпустили плагин WebPShop для Фотошопа, который добавляет возможность открывать и сохранять изображения в формате WebP, предварительно оценив качество в окне просмотра.
AVIF пока не так широко поддерживается: пока только в GIMP и Pixelmator Pro. Есть надежда, что по мере роста его популярности больше фоторедакторов научатся с ним работать.
Если не знаете, какую степень сжатия выбрать для начала, в качестве опорных значений можно взять цифры из сравнительной таблицы. Она показывает соответствие различных значений качества JPEG, WebP и AVIF. Стоит отметить, что значения, которые вы подберёте опытным путём на своём материале, могут отличаться от приведённых в этой таблице. Это вполне закономерно, так как для разных изображений может требоваться разная степень сжатия.
Если на сайте несколько десятков изображений, будет нерационально конвертировать их вручную в другой формат с помощью графических инструментов. Здесь на помощь приходят консольные утилиты, которые автоматизируют конвертацию и оптимизацию изображений, в том числе путём встраивания в сборку проекта.
Если стоит задача автоматизировать конвертацию изображений только в WebP, можно воспользоваться утилитой Google cwebp. Пример вызова утилиты из документации Google:
Другим вариантом может быть использование утилит, поддерживающих работу сразу с несколькими форматами изображений. Например, мы в FunBox разработали утилиту optimizt. Она работает с наиболее популярными форматам изображений (PNG, JPEG, GIF, SVG) и конвертирует растровые изображения в WebP и AVIF. Пример вызова утилиты для конвертации всех изображений по переданному пути в WebP:
Аналогично для AVIF:
После автоматической конвертации набора изображений рекомендуем просмотреть их глазами, чтобы в погоне за экономией трафика ненароком не испортить качество графических материалов на сайте.
Как использовать актуальные форматы изображений на сайте
Вот пример такого кода, который размещается в блоке head разметки страницы:
Из кода видно, что если браузер не поддерживает форматы AVIF и WebP, то изображение загружается в формате JPEG.
Благодаря этим доработкам каждый браузер сможет выбрать наилучший из предложенных форматов изображений:
в Google Chrome 85+ и Firefox 93+ загрузится AVIF;
в Safari 14+ на macOS 11+ — WebP;
во всех остальных браузерах — JPEG или PNG.
Что нам дало использование новых форматов изображений
Мы исследовали, как новые форматы изображений влияют на объём трафика и скорость загрузки, на своём корпоративном сайте. Для оптимизации выбирали страницы, на которых есть иллюстрации, и сравнивали показатели до и после.
Начали с главной страницы, так как на неё попадают практически все посетители сайта и скорость её загрузки влияет на общее впечатление о компании. Она содержит два достаточно больших изображения: на первом экране и над футером. После перехода на WebP размер передаваемых данных при загрузке сократился почти на 55% для мобильных устройств и десктопа, а значение Largest Contentful Paint (LCP, время отрисовки самого большого видимого объекта) уменьшилось почти на 25%.
Следующая страница с изображениями — О нас. Она содержит много контентных фотографий, но большинство из них имеют небольшой размер в пикселях. Замена на WebP сэкономила 65-70% трафика в зависимости от устройства. Кстати, эта интересная особенность формата WebP — лучшее сжатие для небольших изображений в сравнении с AVIF — упоминается в статье на Хабре. А вот значение LCP практически не изменилось: стало меньше всего на 5%. Кажется, что такого не может быть, но всё логично: LCP определяется по длительности загрузки самого большого элемента на странице, которым в нашем случае является заглавная фотография, а после конвертации в WebP её размер несильно уменьшился. О причинах этого напишу далее.
И ещё один раздел сайта, в котором есть изображения — Контакты. Здесь находятся схемы проезда к нашим офисам в разных городах, и в качестве иллюстраций для точек на маршрутах мы используем фотографии мест, о которых идёт речь.
Здесь экономия от перехода на WebP уже не так заметна и составляет 17% по сравнению со старым добрым JPEG. И здесь возникает вопрос: почему же в этом случае трафик уменьшился не так значительно, как на других страницах? Всё дело в исходных изображениях, насколько они насыщены мелкими деталями. Для хорошо детализированных изображений, например фотографий на схемах проезда к офисам, пришлось практически вручную подбирать степень сжатия. Нередко она была выше принятых по умолчанию 75%, чтобы изображение после конвертации в WebP сохранило приемлемое качество по сравнению с оригиналом. Из этого можно сделать вывод, что использование WebP для реальных фотографий, насыщенных большим количеством мелких деталей, не всегда приводит к существенной экономии трафика. В отдельных случаях после конвертации изображение может весить даже больше, чем иллюстрация такого же визуального качества в формате JPEG.
Если коротко, внедрение WebP помогло нам сократить размер изображений на сайте:
на главной странице иллюстрации стали весить в 2 раза меньше;
на странице «О нас» удалось достичь почти трёхкратного сокращения общего размера изображений;
в разделе «Контакты» цифры оказались скромнее: всего –17%.
В начале 2021 года мы провели другой эксперимент: решили перевести все изображения в AVIF. Были опасения, что из-за отсутствия поддержки в nginx может ничего не получиться, к тому же AVIF слишком новый формат и при его использовании ещё встречаются некоторые проблемы. Одна из них проявилась спустя несколько месяцев после добавления на сайт AVIF-изображений. Мы заметили, что в одной из dev-версий браузера Firefox перестала отображаться часть иллюстраций. Выяснилось, что эти AVIF-изображения не соответствуют спецификации и содержат технические ошибки (подробное описание можно прочитать на баг-трекерах Chromium и Mozilla). Ошибка закралась в известную библиотеку sharp, которая используется под капотом нашего optimizt. Спустя 4 месяца автор sharp выпустил исправленную версию библиотеки, после чего мы заново переконвертировали изображения.
Тем не менее, результаты внедрения AVIF оказались неоднозначными. Так, на главной странице Retina-изображения показали гораздо лучшую компрессию с сохранением визуального качества (размер файлов уменьшился почти в 2 раза по сравнению с WebP), чем обычные. Надо учитывать, что используемые на странице иллюстрации созданы в графическом редакторе, это не реальные фотографии, а такие изображения, как правило, лучше сжимаются, потому что обычно на них гораздо меньше мелких деталей. А вот на странице «О нас» и на схемах проезда конвертация изображений в AVIF сэкономила всего 5-15% на общем размере файлов по сравнению с WebP. Можно сказать, что в этом случае нет большой разницы между WebP и AVIF. Поэтому если у вас на сайте уже есть WebP-изображения, то вам необязательно их переводить в AVIF — по итогу может оказаться, что результат не оправдает приложенных усилий. Другое дело, если вы ещё не внедрили WebP, в этом случае переход сразу на AVIF может кардинально ускорить загрузку страниц.
В качестве общего вывода отмечу, что всегда нужно делать замеры до и после изменения формата изображений. Это поможет объективно оценить полученные результаты и определить целесообразность перехода на WebP, AVIF или что-то ещё.
Что дальше?
Добавление поддержки WebP и AVIF на нашем сайте сэкономило нам до 50-60% трафика на отдельных страницах. При этом сами форматы привычны и их можно де-факто считать стандартом для изображений в вебе. Да, есть свои минусы (привет, Safari), но в конечном итоге их можно и нужно использовать на сайтах и в веб-приложениях. Посмотрим, что будет дальше. Уже завели таймер на следующий заход, когда появится новый формат изображений для веба, способный потеснить AVIF.
Как выбрать подходящий для web формат изображения
В этой статье речь пойдет о форматах JPEG, GIF и PNG, а также о двух других, более современных форматах. Большинство веб-разработчиков учатся использовать тот или иной формат путем проб и ошибок, зарабатывая при этом ценный опыт. Однако практически никто не понимает, как именно работает каждый из этих форматов.
Материал этой статьи поможет вам сориентироваться в том, какие алгоритмы сжатия использует каждое из этих расширений, и понять, для каких типов изображений подходит каждый из этих форматов.
Этот формат прошел проверку временем, так как появился в далеком 1992 году. Сжатие этого формата происходит следующим образом. Сначала изображение из цветового пространства RGB (от английских “red” – «красный», “green” – «зеленый» и “blue” – «синий») преобразуется в пространство YUV, которое основано на характеристиках яркости и цветности; это пространство наиболее близко к тому, как воспринимает цвета человек. Затем изображение разделяется на пиксельные блоки размером 8х8, и каждый блок раскладывается на составляющие цвета, частота которых затем подсчитывается. Если говорить с точки зрения математики, то получается, что подобное сжатие переносит изображение из пространственной области в частотную область.
В некотором смысле такое сжатие позволяет отказаться от части информации о яркости и цветах. То, какая часть информации будет убрана, напрямую зависит от качества изображения, которое вы хотите получить в итоге.
Из этого можно сделать вывод, что лучше всего данный формат подходит для сжатия полутоновых изображений: изображений с огромным количеством цветов и мягкими переходами между ними. Другими словами, JPEG подразумевает, что ваше изображение будет так или иначе похоже на фотографию.
А вот для изображений с четкими краями и детализированными текстурами JPEG, наоборот, не подходит: четкие грани будут стерты, и изображение в целом получится размытым.
Ниже вы видите пример изображений в формате JPEG:
На заре зарождения интернета, если изображение не было формата JPEG, значит, оно было формата GIF. GIF использует для сжатия алгоритм LZW (Lempel-Ziv-Welch – алгоритм Лемпеля — Зива — Велча), который намного проще, чем технология сжатия JPEG. По сути, этот алгоритм сканирует данные изображения и создает короткий код для тех участков, которые повторяются. Поэтому GIF подходит для сжатия изображений, которые состоят из идентичных или повторяющихся частей. Это изображения с четкими формами, которые имеют всего несколько цветов с резкими границами между ними. Именно такие изображения удастся сжать при помощи GIF наиболее эффективно и без потерь.
Несмотря на то, что GIF достаточно простой формат, у него есть пара интересных характеристик – это прозрачность и анимация.
А вот для сжатия изображений с некоторым разнообразием оттенков GIF не подходит: этот формат поддерживает только 8-битный цвет, то есть максимум 256 цветов на одном изображении. Поэтому если вы решите сжать при помощи GIF изображение с широкой цветовой палитрой, то в итоге можете получить постеризованную картинку со значительным падением глубины цветности, которая будет выглядеть ужасно.
Пример изображений в формате GIF:
Обобщая, можно отметить, что JPEG и GIF имеют свои сильные и слабые стороны. Во время зарождения интернета это были основные используемые форматы. Однако позже некоторые энтузиасты решили попробовать создать новый формат для сжатия изображений без потерь.
Разработка PNG началась в 1995 году, и уже через год его можно было использовать в качестве полноправного сетевого формата.
Так как PNG задумывался в качестве замены формата GIF, он значительно превосходит предшественника по своим возможностям. Например, PNG обладает следующими преимуществами:
Увидеть, как хорошо PNG сжимает разноцветное полупрозрачное изображение, можно ниже:
Так почему PNG лучше сжимает изображения, чем GIF? Это происходит благодаря новым алгоритмам сжатия.
В частности, используя фильтрацию строк, PNG получает гораздо более удобные для сжатия данные: существует 5 разных фильтров-предсказаний, значения каждого из которых подбираются таким образом, чтобы общий вес изображения был наименьшим. PNG предполагает, что рядом расположенные пиксели должны быть похожи, и если это действительно так, то PNG сохраняет данные путем записи разницы между предсказанным и фактическим значениями.
Таким образом, формат PNG, к примеру, позволяет эффективно сжать и вертикальные одноцветные области (в то время как GIF сжимает только горизонтальные области).
Однако, возвращаясь к началу статьи, нужно отметить, что в случае с фотографиями PNG поведет себя лучше, чем GIF, но все же хуже, чем JPEG.
Форматы следующего поколения
JPEG, GIF и PNG – это распространенные и универсальные форматы, которые веб-разработчики могут использовать повсеместно. Однако появляются и новые форматы изображений, которые также обладают интересными особенностями.
Этот формат появился в 2010 году, его созданием занималась корпорация Google. WebP использует архитектуру формата мультимедиа WebM.
Алгоритм сжатия похож на тот, который использует PNG: к каждому блоку применяется одна из шестнадцати существующих стратегий предсказания. Благодаря этому достигается гибкость в сохранении изображений как графического, так и фотографического типа.
Так как этот формат принадлежит Google, то в данный момент он поддерживается только браузерами Chrome и Opera.
JPEG-XR
JPEG-XR был разработан компанией Microsoft. Как и все подобные форматы нового времени, JPEG-XR имеет значительные преимущества сжатия перед традиционным форматом JPEG:
Как и в случае с WebP, JPEG-XR это более сложный, эффективный и менее поддерживаемый формат, чем его предшественники. В данный момент JPEG-XR поддерживается только браузерами Internet Explorer и Edge.
Использование форматов будущего сегодня
Несмотря на то, что новые форматы поддерживаются еще не всеми браузерами, вы можете использовать их на своем сайте уже сейчас.
Новая версия языка разметки позволяет веб-разработчикам размещать одно и то же изображение в нескольких форматах для того, чтобы браузеры самостоятельно решали, какой из них загружать. Код будет выглядеть следующим образом:
Другой способ выводить разные изображения для разных посетителей – сделать так, чтобы за вывод информации отвечала не клиентская, а серверная часть. В этом случае разным пользователям будут показываться разные картинки по одному и тому же адресу.
Форматы изображений для веба
Хороший верстальщик должен уметь правильно выбирать форматы изображений для своей вёрстки, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Давайте разберёмся, какие бывают форматы изображений и в каких ситуациях лучше выбрать тот или иной формат.
Растровые форматы
Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP. Подробнее о растровой графике можно прочитать в статье «Растровая и векторная графика».
Основные характеристики, которые нас будут интересовать при выборе формата — это качество изображения, вес и количество цветов. В вебе тяжёлые изображения непрактичны, поскольку они долго загружаются. Чтобы уменьшить вес файла, используются алгоритмы сжатия. Сжатие может быть с потерями и без потерь. При выборе подходящего формата изображения, нам нужно найти баланс между весом файла и качеством картинки, так как некоторые алгоритмы сжимают изображения с потерей качества. Теперь рассмотрим каждый из форматов подробнее.
GIF (Graphics Interchange Format)
Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.
Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.
Особенностью GIF является поддержка анимации, то есть этот формат может хранить несколько кадров, которые сменяют друг друга с определённой частотой.
Пример изображения в формате GIF (источник изображения: giphy.com)
Таким образом, формат GIF подходит если:
JPEG (Joint Photographic Experts Group)
Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.
Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).
Пример изображения в формате JPEG с неоптимальной степенью сжатия. Качество: 10. Вес: 20 килобайт.
Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.
Пример изображения в формате JPEG с оптимальной степенью сжатия. Качество: 60. Вес: 65 килобайт.
Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.
Пример изображения в формате JPEG с минимальной степенью сжатия. Качество: 95. Вес: 169 килобайт.
Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.
Таким образом, формат JPEG лучше подходит для:
PNG (Portable Network Graphics)
PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.
PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.
Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.
Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.
Пример изображения в формате PNG (источник изображения: Wikimedia Commons)
Итак, формат PNG подходит для:
WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.
Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.
Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.
Иногда WebP сжимает изображение даже лучше, чем заявляет Google.
JPEG: 44 килобайт WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP.
Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.
Векторные форматы
GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Подробнее о векторной графике можно прочитать в статье «Растровая и векторная графика».
SVG (Scalable Vector Graphics)
SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.
Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.
SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.
Формат SVG отлично подходит для малоцветных схем, логотипов и иконок.
Примеры SVG (источники изображений: Roundicons Freebies www.flaticon.com/authors/roundicons-freebies и HTML Academy)
Использование современных графических форматов в веб-проектах
Эдди Османи, в статье «Цена JavaScript в 2018 году», озвучил одну ценную мысль: время, необходимое на обработку скрипта размером 200 Кб, и на обработку изображения, имеющего такой же размер, серьёзно различается. Дело в том, что при обработке кода браузеру нужно проделать более масштабную работу, чем при подготовке к использованию изображений. Вот что об этом говорится в статье:
JPEG-изображение нужно декодировать, растеризовать и вывести на экран. А JS-бандл надо, если рассматривать это упрощённо, загрузить, распарсить, скомпилировать, выполнить. На самом же деле движку приходится решать и другие задачи в процессе обработки JS-кода. В целом, стоит учитывать, что на обработку JavaScript-кода, размеры которого, в байтах, сопоставимы с размерами других материалов, тратится гораздо больше системных ресурсов.
Эти слова были написаны в 2018 году, но они до сих пор более чем справедливы. Правда, учитывая текущую обстановку, высказанная здесь мысль сегодня воспринимается немного иначе.
Принимая во внимание то, что в мире сейчас разразилась пандемия, я заметил, что моё интернет-соединение стало работать нестабильно. К нашему счастью, благодаря тому, что на страже благополучия интернета стоят прекрасные специалисты, не знающие усталости, большая часть Всемирной сети до сих пор работает нормально. Но в интернете, определённо, что-то происходит. Я пользуюсь соединением на 100 Мбит/с, но у меня возникает такое ощущение, будто я сижу на 3G-модеме.
Это вносит некоторые изменения в вышеприведённые рассуждения. Дело в том, что наши устройства могут парсить и компилировать JavaScript с той же скоростью, с которой они могли это делать пару недель назад. Но данные теперь путешествуют по сетям медленнее. В результате в настоящий момент крайне важно то, какой именно объём данных, представляющих некий ресурс, передаётся по сети при загрузке этого ресурса.
А на сайтах обычно имеется гораздо больше, чем 200 Кб изображений. Страница с несколькими мегабайтами картинок — это обычно дело. Многие разработчики (и я тоже!), как правило, совсем не задумываются о размерах медиа-материалов.
Но, что очень хорошо, оптимизировать изображения, используемые на веб-страницах, не так уж и сложно. В этом материале мы поговорим о том, как пользоваться современными графическими форматами вроде WebP. Изображения, сохранённые в таких форматах, часто оказываются в 2-3 раза меньше, чем те, для хранения которых используются всем известные и всеми любимые старые форматы (вроде JPG и PNG). Применение новых форматов может серьёзно изменить ситуацию в лучшую сторону.
Общий обзор современных графических форматов
Для улучшения работы с веб-графикой мы можем воспользоваться следующими тремя форматами:
Много ли можно выиграть, пользуясь альтернативными графическими форматами?
Несколько месяцев назад я использовал в одном материале следующее изображение.
Изображение, использованное в одном материале
Я провёл некоторые эксперименты, рассмотрев использование форматов JPG и PNG для хранения исходного изображения. Я оптимизировал варианты изображения с использованием imagemin для того чтобы узнать о том, что мне может дать применение WebP вместо этих «ретро»-форматов.
Результаты оказались прямо-таки невероятными.
Я проводил подобные эксперименты с множеством изображений. Практически всегда оказывалось, что WebP-файлы были на 30-70% меньше чем даже оптимизированные версии графических файлов других форматов.
Тут может возникнуть вопрос о том, как преобразование в WebP может повлиять на SVG-изображения. Я подобных экспериментов с SVG не проводил. SVG — это векторный формат. Это значит, что изображения в нём строятся на основе математических инструкций, а не на основе сведений о цвете отдельных пикселей. Преобразовать SVG-изображение в WebP — значит отказаться от возможностей по масштабированию SVG-изображений, что, полагаю, недопустимо. К тому же, я подозреваю, что подобное преобразование, в большинстве случаев, приведёт к увеличению размеров файлов.
Браузерная совместимость
Для того чтобы узнать о том, как те или иные графические форматы поддерживаются браузерами, заглянем на caniuse.com.
Формат WebP пользуется поддержкой большинства браузеров.
Поддержка формата WebP браузерами
Хоть уровень поддержки этого формата и весьма высок, очень плохо то, что его не поддерживают Safari и Internet Explorer.
А вот — сведения о поддержке JPEG 2000.
Поддержка формата JPEG 2000 браузерами
Так, теперь Safari на нашей стороне, а вот Internet Explorer опять остался не у дел.
А как насчёт JPEG XR?
Поддержка формата JPEG XR браузерами
А тут отличился именно Internet Explorer. В результате, пользуясь этими тремя форматами, мы перекрываем все существующие браузеры (KaiOS Browser не поддерживает ни один из этих форматов, и я приношу ему свои извинения за то, что обхожу его вниманием, но я даже не знаю о том, что это за браузер).
Поговорим теперь о том, как выбирать разные форматы изображений, предназначенные для разных браузеров.
Элемент picture спешит на помощь
Вот как выглядит HTML-код, в котором применяется элемент picture :
В Chrome, например, после обработки вышеприведённой разметки, браузер придёт к чему-то, более или менее эквивалентному следующему коду:
Использование набора следующих друг за другом элементов source означает, что в каждом браузере подходящим окажется хотя бы один из них. Так, большинство браузеров используют webp-изображение, Safari загрузит jp2-изображение, IE — jxr-изображение.
Упрощённая альтернатива
Вышеприведённый фрагмент кода чрезвычайно хорош тем, что позволяет пользоваться современными графическими форматами во всех актуальных браузерах. Но применение подобного кода основывается на предположении о существовании тех изображений, на которые в нём есть ссылки.
Если создавать такие изображения самостоятельно — придётся вложить в это много ручного труда. Если же генерировать их автоматически — это может значительно увеличить время сборки проекта. Обработка графики, как известно, становится весьма медленным процессом в том случае, если речь идёт о множестве изображений.
Лишь очень немногие посетители моего блога пользуются Internet Explorer (за последние 7 дней его попытались посмотреть лишь 3 человека с IE, что составило 0.02% трафика). Поэтому я решил воспользоваться упрощённым вариантом вышеописанного решения:
Я отдаю компактное webp-изображение тем браузерам, которые поддерживают этот формат (Chrome, Firefox, Edge), а браузерам, которые этого формат не поддерживают (IE, Safari), предлагаю наследие прошлого — jpeg-картинку.
С моей точки зрения это — пример прогрессивного улучшения. Проект остаётся работоспособным на старых браузерах, хотя загрузка изображений и занимает больше времени. Это — компромисс, который меня устраивает. (Правда, я надеюсь, что поддержка WebP скоро появится и в браузерах от Apple).
Проверка работоспособности решения
Преобразование графических файлов в формат WebP
Компания Google создала набор инструментов, направленный на работу с webp-файлами. Один из таких инструментов называется cwebp. Он позволяет преобразовывать в WebP графические файлы других форматов.
Если вы пользуетесь MacOS, установить этот набор инструментов можно с помощью Homebrew:
На других платформах, полагаю, нужно будет загрузить подходящий libwebp-пакет из репозитория.
После установки инструментов пользоваться ими можно так:
Рассмотрим эту команду:
Использование современных графических форматов в React-приложениях
. Я пользуюсь для этого React-компонентами. На мой взгляд, это очень удобно. Вот как это выглядит:
Использование компонента ImgWithFallback очень похоже на работу с обычным тегом img :
Применение современных графических форматов со стилизованными компонентами
Использование пакета gatsby-image
Если этот пакет вам интересен — взгляните на его документацию.
Минусы WebP
Единственным реальным недостатком webp, который мне удалось обнаружить, заключается в том, что с файлами этого формата очень неудобно работать.
Большинство настольных пакетов для работы с изображениями пока его не поддерживают. Например, я не могу открывать webp-файлы в Preview на MacOS. Это значит, скажем, что если я сохраню webp-изображение с веб-страницы, я не смогу просмотреть его на компьютере!
Преобразование webp-файлов в jpeg-файлы — процесс достаточно простой. В интернете можно найти много бесплатных сервисов, выполняющих подобное преобразование. Но, это, опять же, не так удобно, как работа с традиционными графическими форматами. Если ваш сайт предлагает пользователям загружать с него графические файлы — вы, возможно, решите, что переход на webp вам не нужен.
Итоги
Мне очень нравится то, что благодаря использованию webp удалось сократить размер изображений в моём блоге примерно на 50%. Помимо того, что в наше непростое время это улучшает впечатления пользователей от работы с ним, я ещё надеюсь на то, что это позволит мне немного сэкономить на оплате трафика.
Конечно, идея ручного преобразования графических файлов в формат webp выглядит весьма непрактичной. Я уже занимаюсь изучением вопроса о том, как автоматически конвертировать в этот формат jpg- и png-файлы. В идеале этот процесс должен происходить совершенно незаметно для разработчика, во время сборки сайта.
Создатели веб-проектов обычно не особенно интересуются особенностями применения новых графических форматов. Но я полагаю, что разбираться в этом вопросе весьма полезно. Ведь использование WebP — это, вероятно, самый простой способ сократить размеры веб-проекта на сотни килобайт.
Уважаемые читатели! Пользуетесь ли вы форматом WebP?