От автора: на март 2017 изображения составляют свыше 65% веб-контента. И это не удивительно: изображения придают красоту, передают сообщения, рассказывают истории и налаживают контакт с посетителями вашего сайта. Обратная сторона вопроса – при неправильном использовании изображения зачастую являются главной причиной замедления сайта и плохого пользовательского опыта.
Правильное использование изображений в интернете подразумевает две вещи:
выбор правильного формата изображений;
оптимизация изображений.
В этой статье я раскрою первый пункт, в частности я расскажу вам про форматы изображений, которые больше других подходят для веба, а также для каких изображений нужно использовать эти форматы.
Но прежде давайте кратко пробежимся по терминологии.
Растровые или векторные изображения
В основе растровых изображений лежит двумерная сетка пикселей. В каждом пикселе хранится цвет и значение прозрачности.
Растровые изображения плохо масштабируются: если увеличить растровое изображение, оно потеряет четкость и качество. Популярные растровые форматы изображений для веб – JPEG, JPG, GIF и PNG.
Ниже представлено два растровых изображения (JPG) с яблоком. Первое изображение в натуральную величину. Второе показывает увеличенную часть первого изображения.
Пример растрового изображения в натуральном размере.
Увеличенная часть растрового изображения.
Обратите внимание на потерю качества в увеличенной версии изображения.
В отличие от растровых изображений векторная графика состоит из линий, фигур, точек маршрутов. Информация о векторных изображениях не хранится в пикселях, она хранится в математический инструкциях по отрисовке, которые никак не связаны с пикселями. Alex Walker очень понятно объяснил разницу на примере SVG – самого популярного формата векторных изображений в сети:
«SVG – это не формат изображения, это больше рецепт изображения.» — Почему JPEG-изображения похожи на яблочный пирог из McDonalds (а SVG нет)
Одно из следствий независимости от разрешения экрана – векторные изображения можно масштабировать под размер контента. Изображения будут четкими, идеально подходят для ретина экранов.
SVG-графика в маленьком масштабе.
Часть увеличенного SVG-изображения.
Оба изображения сверху представляют собой пример одного векторного изображения, однако второе изображение увеличено более чем в два раза по сравнению с первым. Потерь качества нет.
С потерей качества или без потерь (lossy и lossless)
Оба термина lossy и lossless отсылают к техникам сжатия медиа файлов, т.е. изображений, аудио и видео.
Lossy-сжатие: «не восстанавливает цифровые данные до 100% от оригинала. Методы с потерей качества отличаются высокой степенью сжатия, что позволяет уменьшить вес сжатых файлов. Однако часть оригинальных пикселей, звуковых волн и кадров видео удаляются навсегда.» — PCMag.com Encyclopedia
Что это значит на практике: чем сильнее вы сжимаете файл с потерей качества, тем меньше он будет. Получая меньший вес файла, вы необратимо теряете качество. При lossy-сжатии нужно балансировать между маленьким весом файла и качеством.
Вам очень часто встречается формат изображений с потерей качества, это JPEG.
В отличие от изображений с потерей качества lossless-сжатие сохраняет все данные, как в оригинале. Такое сжатие не приводит к падению качества файлов. Из-за этого lossless форматы файлов зачастую имеют больший вес по сравнению с lossy.
В сети легко можно найти lossless-форматы изображений, это GIF и PNG.
Представленная информация полезна при выборе лучшего формата изображений для вашего контента.
Первые три формата изображений я опишу ниже (JPG, GIF и PNG), они уже на протяжении долгого времени используются на сайтах. Последние два формата, SVG и webP, не совсем новые, они пока что не популярны. Тем не менее, они как нельзя лучше подходят под требования адаптивности и быстрозагружаемых сайтов, и их популярность значительно выросла.
JPEG
JPEG или JPG – lossy-формат, разработанный Joint Photographic Experts Group. JPG-изображения занимают почти 3% от всех типов контента на сайтах. Почему этот формат так популярен:
формат JPG умеет отображать миллионы цветов, что делает его идеальным кандидатом для отображения фотографий в интернете;
так как это lossy-формат, то вы можете использовать сжатие для значительного уменьшения размера файла. В JPG-файлах есть множество уровней сжатия: примерно 60% будет достаточно для изображений в интернете, что-либо выше 75% ухудшает качество изображения;
все устройства с интернетом поддерживают формат JPG, что упрощает использование формата в интернете.
Один заметный недостаток JPG – файлы этого формата не поддерживают прозрачность. Если вы хотите использовать прозрачный фон для наложения изображения на фоновый цвет или текстуру страницы, JPG-изображения не подойдут. Выберите один из вариантов, про которые я расскажу ниже.
GIF
GIF или Graphics Interchange Format – это 8-битный lossless-формат с максимальным количеством цветов, равным 256. Цветовые ограничения делают GIF неподходящим вариантом для отображения фотографий и изображений с широким диапазоном цветов.
Факторы, повлиявшие на такое долгосрочное использование в интернете:
из-за ограничения в 256 цветов размер файлов довольно низкий;
поддерживает прозрачность;
поддерживает анимацию, что позволяет использовать формат для отображения зацикленных изображений, например, иконок, смайликов, баннеров и т.д;
хорошо подходит для простых изображений с однотонными цветами, но не подходит для фотографий.
PNG
PNG или Portable Network Graphics – это альтернатива GIF. Формат разработан W3C. Как и GIF, формат использует алгоритм сжатия без потери качества, доступны варианты 8-бит и 24-бит. Оба варианта поддерживают прозрачность. Однако в 24-битном PNG-изображении прозрачность работает на альфа канале, а также красном, зеленом и синем каналах. Поэтому, несмотря на то, что GIF и 8-бит PNG изображения могут быть либо полностью непрозрачными, либо полностью прозрачными, в PNG каждый пиксель изображения предлагает 256 уровней прозрачности.
24-битный вариант PNG можно использовать для:
веб-изображений с различным уровнем прозрачности;
сложных фотографий и графики;
графики, которую требуется часто редактировать и экспортировать: lessless-формат сохранит качество.
В отличие от GIF формат PNG не поддерживает анимацию, а вес файлов может быть довольно большим.
SVG
SVG или Scalable Vector Graphics (масштабируемая векторная графика) – это тип векторных файлов на основе XML. Формат появился в 2001, однако популярность среди веб-разработчиков он получил только недавно. Причина такой запоздалой любви – плохая поддержка SVG в браузерах на протяжении многих лет. С радостью хочу сообщить, что на момент написания статьи SVG поддерживается во всех основных браузерах, но не без различий и багов.
В SVG есть масса функций, которые делают этот формат рекомендуемым для веба, особенно если SVG используется для простых изображений типа логотипов, карт, иконок и т.д.
Плюсы формата SVG
SVG зачастую весят меньше растровых изображений, особенно после оптимизации под веб и сжатия через gzip;
формат масштабируемый, что обеспечивает четкость на любом разрешении экрана;
SVG-код можно поместить в HTML и сэкономить на HTTP-запросах;
SVG-код можно настраивать через CSS;
SVG-изображения можно анимировать, в том числе отдельные части, как с помощью CSS, так и JS, что очень круто.
Избегайте слишком сложных SVG-изображений, это слегка увеличивает размер файла. И наконец, SVG не применим к фотографиям, здесь лучше подойдут форматы JPG и webP.
WebP
Несмотря на то, что формат появился в 2010, я не ошибусь, если скажу, что webP все еще очень новый формат, который не так известен, как JPG и PNG. Тем не менее, веб у этого формата в крови: он был специально спроектирован для интернета, что делает его крайне интересным.
WebP – формат изображений с открытым исходным кодом, разработанный Google. Ключевые особенности: «WebP – современный формат изображений в интернете, обеспечивающий превосходное сжатие как с потерями, так и без потерь качества… lossless-версии webP изображений весят на 26% меньше PNG. Lossy-версии webP весят на 25-34% меньше сравнимых JPEG изображений… Lossless webP поддерживает прозрачность… за счет 22% дополнительных байт. В случаях, где применимо lossy RGB-сжатие, lossy webP также поддерживает прозрачность, предоставляя 3х меньший размер файла по сравнению с PNG.» — WebP сайт
Крастота webP в том, что он совмещает преимущества JPG и PNG без увеличения размера файла.
На данный момент поддержка формата довольно хорошая: Blink-браузеры поддерживали формат с самого релиза, все-таки webP – создание Google. Для обратной совместимости с браузерами без поддержки, т.е. IE/Edge, Firefox и Safari, народные умельцы придумали обходные решения.
Заключение
В этой статье я рассказал вам про форматы изображений для веба, а также кратко прошелся по типам изображений, наиболее подходящих для интернета.
JPG, GIF и PNG очень популярные форматы, которые используются уже очень долгое время. SVG и webP более новые, интересные альтернативы. SVG отлично подходит для иллюстраций и простых изображений, webP заменяет все ниши применения JPG и PNG.
Вы уже использовали SVG и webP в разработке? Какие сложности у вас возникли? Добились ли вы каких-либо заметных приростов производительности? Пишите в комментариях!
Автор: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
