[Перевод] Вы используете правильный формат изображения?

внешний интерфейс SVG Ресурсы изображений WebP

Оригинальная ссылка:What is the Right Image Format for Your Website
автор:Maria Antonietta Perna
Переводчик:Лю Кайли

По состоянию на март 2017 года более 65% веб-контента состоит из изображений.
Это неудивительно: изображения — прекрасный и заразительный носитель информации, который интуитивно связывает и рассказывает историю посетителям вашего сайта.
Но с обеих сторон, при неправильном использовании, изображения часто могут быть причиной медленной загрузки страниц и плохого взаимодействия с пользователем.
Надлежащее использование изображений на веб-страницах имеет следующие два аспекта:

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

Растровое изображение против векторного изображения

Растровые изображения состоят из двумерной сетки пикселей. Каждый пиксель хранит значения для цвета и прозрачности.
Растровые изображения не очень хорошо поддерживают масштабирование: если увеличить растровое изображение, резкость и четкость изображения снизятся. Текущие основные форматы растровых изображений: JPEG (jpg), GIF и PNG.
Напротив, векторная графика состоит из линий, форм и точек пути. Различная информация векторной графики хранится не в пикселях, а в точных инструкциях по рисованию, которые совершенно не зависят от пикселей. Алекс Уокер однажды выразил свою любовь к SVG, думая, что SVG — лучшая векторная графика в Интернете:

SVG — это не формат изображения — это скорее рецепт изображения.

Независимость от разрешения означает, что вы можете увеличивать и фокусировать векторное изображение в любом месте: изображение будет выглядеть так же хорошо, как и всегда, особенно на экранах Retina.

С потерями против без потерь

Под терминами «с потерями» и «без потерь» здесь понимаются сценарии, в которых цифровые медиафайлы сжимаются с помощью текста и технологии сжатия, т. е. изображения, аудио и видео.
Сжатие с потерями:

Часть данных будет утеряна, так что их нельзя будет на 100% восстановить до состояния до сжатия при распаковке. Сжатие с потерями сильно сжимает файл, что приводит к уменьшению размера сжатого файла, но всегда безвозвратно теряет некоторые исходные пиксели, звуковые клипы или видеокадры.
PCMag.com Encyclopedia

Это означает, что на практике, чем больше вы сжимаете файл, тем меньше получается «конечный продукт». В то же время, наряду с меньшим размером файла, вы также создадите необратимую потерю качества. Для сжатия с потерями вам необходимо найти разумный компромисс между меньшим размером файла и качеством файла.
JPEG, безусловно, является наиболее распространенным типом изображения с потерями, которое видят люди.
Напротив, сжатие без потерь не приводит к потере данных в процессе сжатия. Это означает, что сжатие не приведет к снижению качества файла. Но именно из-за этого объем файлов без потерь обычно больше, чем у файлов с потерями.
Наиболее распространенными форматами изображений без потерь являются GIF и PNG.
Эта информация может быть полезна всякий раз, когда вам нужно выбрать, какой формат изображения использовать для представления вашего контента.

JPEG

JPEG сделанJoint Photographic Experts GroupРазработано изображение с потерями.
Сегодня почти 3% файлов интернет-ресурсов составляют изображения в формате JPEG. Этот формат изображения настолько популярен, потому что:

  • Изображения в формате JPEG могут иметь миллионы цветов. Поэтому всякий раз, когда вам нужно отобразить свою фотографию на веб-сайте, JPEG всегда будет лучшим выбором.
  • Поскольку это изображение с потерями, вы можете значительно уменьшить размер изображения, сжав его. Для изображений JPEG предусмотрены различные уровни сжатия: уровень 60% больше подходит для изображений в Интернете, если выбрать уровень сжатия выше 75%, качество изображений будет значительно снижено.
  • Все Интернет-устройства Поддерживают отображения изображений JPEG, поэтому разработчики могут бесплатно использовать, не беспокоясь о проблемах совместимости.

Следует отметить, что формат изображения JPEG не поддерживает прозрачность. Итак, если вы переходите на страницу с прозрачным фоном, чтобы украсить эффект, изображение в формате JPEG не является мудрым выбором.

GIF

GIF означает графический обмен формат, является своего рода поддержка до 256 цветов в 8 формате изображения без потерь. Это ограничение обеспечивает многоцветное формат GIF или фотографические изображения, отображаемые бессильным.
Следующие пункты являются причинами, по которым формат GIF долгое время использовался для веб-сайтов:

  • Поскольку поддерживается только 256 цветов, размер файла обычно очень мал.
  • Поддержка прозрачности
  • Поддерживаются анимации, что делает GIF-файлы идеальными для отображения бесконечных зацикленных анимаций, таких как значки, смайлики, баннеры и многое другое.
  • Отлично подходит для изображений только с простыми цветами, но не для фотографий

PNG

PNG означает переносимую сетевую графику. Этот формат изображения, разработанный W3C, может заменить GIF в большинстве сценариев. Как и GIF, PNG использует алгоритм сжатия без потерь и поддерживает как 8-битные, так и 24-битные форматы. Оба поддерживают прозрачность. Стоит отметить, что 24-битная прозрачность изображения PNG поддерживает использование RGB. Таким образом, в то время как изображения GIF и 8-битные PNG становятся полностью непрозрачными или полностью прозрачными, изображения PNG обеспечивают до 256 уровней прозрачности на пиксель.
При использовании 24-битные PNG имеют следующие характеристики:

  • Веб-изображения с несколькими уровнями прозрачности
  • Поддержка сложных фотографий и графики
  • Для изображений, которые часто необходимо экспортировать: сжатие PNG без потерь гарантирует отсутствие ухудшения качества после сжатия.

SVG

SVG расшифровывается как Scalable Vector Graphics и представляет собой тип векторного файла на основе XML.
Хотя SVG существует с 2001 года, он стал популярным только в последние годы. Причина такого опоздания в том, что браузерная поддержка SVG уже давно не очень дружелюбна. К счастью, пока я пишу это,SVG уже поддерживается всеми основными браузерами., конечно, иногда будут возникать некоторые ошибки несовместимости.
Изображения в формате SVG обладают множеством полезных функций, поэтому они могут быть отличным выбором для веб-сайтов, особенно для отображения небольших логотипов, карт, значков и т. д.

Преимущества формата SVG

  • Изображения SVG обычно намного меньше растровых, особенно если вы сделали специальную оптимизацию и включили сжатие gzip.
  • Они масштабируемы, что означает, что изображения SVG выглядят четкими на экранах с различным разрешением.
  • Вы можете перетащить код SVG в HTML, чтобы уменьшить количество запросов.
  • Вы можете сделать любой SVG с помощью CSS
  • Круто то, что вы можете анимировать SVG с помощью JavaScript или CSS.

Избегайте использования очень сложных изображений SVG на своих веб-страницах, так как это значительно увеличит размер файла. Наконец, для таких изображений, как фотографии, SVG не лучший выбор, вам лучше придерживаться JPEG или webP.

WebP

WebP существует с 2010 года, и было бы большой ошибкой сказать, что webP все еще является новым форматом изображений и что он гораздо менее известен, чем JPEG или PNG. Изображения в этом формате изначально создаются специально для сайта.
WebP — это формат изображений с открытым исходным кодом, разработанный Google, который имеет следующие функции:

WebP — это современный формат веб-изображений, обеспечивающий высокоэффективное сжатие изображений на веб-страницах. Сжатие без потерь WebP на 26% меньше, чем PNG, а сжатие с потерями webP на 25-34% меньше, чем JPEG того же качества. Сжатие без потерь webP поддерживает прозрачность, но с увеличением байтов только на 22%. Например, webP с потерями поддерживает прозрачность, а также поддерживает сжатие с потерями RGB, а размер файла составляет одну треть от размера PNG.
WebP website

Прелесть WebP в том, что он сочетает в себе преимущества JPEG и PNG и занимает меньше места.
В этот момент,Браузерная поддержка webP неплохая: Ведь это сын Google, и все браузеры на базе blink стали поддерживать webP. Чтобы добиться обратной совместимости в некоторых неподдерживаемых браузерах, некоторые умные разработчики также внедрили совместимые решения, например, в IE/Edge, Firefox и Safari.
Вот несколько замечательных ресурсов о webP, которые вы можете использовать для начала работы с webP:

Conclusion

В этой статье я опишу некоторые форматы изображений и кратко расскажу о вариантах их использования.
JPEG, GIF и PNG являются текущими основными форматами веб-изображений и используются в течение длительного времени.
SVG и webP — это захватывающие новые форматы изображений. SVG хорош для иллюстраций и простых презентаций изображений, тогда как webP лучше подходит для всех сценариев, где используются JPEG и PNG.
Вы начали использовать SVG и webP во время разработки? С какими проблемами вы сталкиваетесь? Вы попробовали сладость повышения производительности?

Категории