При этом человек – это существо со зрительным восприятием, а изображение – это неотъемлемая часть отображаемой в Интернете информации.

Большая часть веб-страниц и статей используют скриншоты и изображения для того, чтобы как-то облагородить текст. На практике только около 8% веб-сайтов не содержат никакого визуального контента.

Как ни печально, но многие владельцы веб-сайтов до сих пор не понимают, для каких ситуаций какие типы изображений выбрать. Результат? В итоге они замедляют скорость загрузки своего сайта, поскольку изображения, которые они выбрали, имеют неподходящий формат и не оптимизированы.

В этой статье мы разберем самый важные расширения изображений и то, при каких обстоятельствах их следует использовать, чтобы обеспечить наилучшее взаимодействие с вашими пользователями.

Какие есть типы файлов изображений?

Типы и форматы изображений делятся на две основные категории: растровые изображения и векторные изображения. 

Давайте рассмотрим каждую из них подробнее.

Форматы растровых изображений

К категории растровых изображений относятся самые распространенные форматы изображений, которые используются в Интернете (JPEG, GIF и PNG).

Растровые изображения отображают статические изображения, в которых каждый пиксель имеет свой определенный цвет, положение и размеры в зависимости от разрешения изображения (например, 1280х720).

Так как эти изображения статичны, то вы не можете полноценно менять размер изображений. Первоначальная структура и пиксели будут просто растягиваться, чтобы заполнить дополнительное пространство. В итоге получается размытое, мозаичное или каким-то другим образом искаженное изображение. 

Изображение – пример JPEG

Большая часть фотографий или изображений, которые вы видите в Интернете, используют формат растрового изображения.

Форматы векторных изображений

К примерам форматов векторных изображений относятся SVG, EPS, AI и PDF.

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

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

Это значит, что вы можете сколько угодно увеличивать исходное изображения без потери качества или искажения.

Увеличение векторного изображения

Как вы можете видеть, при 7-кратном увеличении разница в качестве колоссальная. 

Так как SVG вычисляет координаты на основе процента от общей площади, а не пикселей, то пикселизации нет совсем. 

«Только 8% веб-сайтов не содержат визуальный контент, а остальным 92% важно отображать изображения правильного формата.»

15 самых популярных типов изображений

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

Мы подробно разберем каждый формат и рассмотрим их плюсы и минусы, поговорим о поддержке браузерами и ОС, а также об идеальных вариантах их использования. 

1. JPEG (и JPG) – Joint Photographic Experts Group (Объединенная группа экспертов по фотографии)

Изображение в формате JPEG

JPEG (или JPG) – это формат растрового изображения, подразумевающий сжатие с потерями. В связи с чем, он хорошо подходит для распространения изображений. Файлы JPEG являются файлами «с потерями», а это значит, что при использовании этого формата уменьшается размер файла, а также ухудшается качество изображения. 

JPEG все еще является одним из тех типов изображений, которые используются довольно часто на просторах Интернета. А все из-за того, что он поддерживает возможность сжатия, а также из-за того, что он поддерживается практически всеми браузерами/ОС.

Большинство социальных сетей (таких как, Facebook и Instagram) автоматически преобразуют загруженные изображения в JPEG. Также они используют единые размеры изображений для того, чтобы управлять разрешением ваших фотографий.

Преимущества и недостатки

• Поддержка любыми браузерами/ОС
• Относительно небольшой размер файла
• Сжатие изображений с потерями может привести к ухудшению читаемости текста

Поддержка браузерами и ОС

• Поддерживается всеми основными браузерами (Chrome, Firefox, Safari и т.д.), начиная с версии 1.0
• Поддерживается всеми стандартными средствами просмотра и редактирования изображений основных операционных систем

Варианты использования

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

2. PNG – Portable Network Graphics (Переносимая сетевая графика)

Изображение формата .png ресурсного центра Kinsta

PNG – это формат растровой графики, который поддерживает сжатие без потерь, сохраняя детализацию и контрастность изображения.

Также PNG имеет лучшую читаемость текста в сравнении с JPEG.

Все это делает PNG более популярным для инфографики, плакатов, скриншотов и другой графики, которая содержит как изображения, так и текст. 

Преимущества и недостатки

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

Поддержка браузерами и ОС

• Поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
• Поддерживается всеми основными операционными системами и их стандартными графическими редакторами

Варианты использования

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

3. GIF – Graphics Interchange Format (Формат обмена графической информацией)

Пример GIF-изображения

GIF – это еще один тип растровых изображений. Он использует сжатие без потерь, но «ограничивает» изображение 8 битами на пиксель и 256-цветовой палитрой. 

Формат GIF – это самый известный (и самый часто используемый) формат для анимированных изображений, поскольку его ограничение в 8 бит делает размер анимации не очень большим и подходящим для использования в Интернете.

Преимущества и недостатки

• Небольшой размер файла
• Поддержка анимации
• Ограничение в 8 бит приводит к ограниченному качеству изображения

Поддержка браузерами и ОС

• Поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
• Поддерживается всеми основными операционными системами и их стандартными графическими редакторами

Варианты использования

• Анимированные GIF-изображения можно использовать не только для «оживления контента», но и для демонстрации процесса выполнения задания в обучающих курсах и руководствах
• Не используйте его, если вам нужны изображения, разрешение которых более 8 бит (JPEG поддерживает до 24 бит)

4. WebP

Пример WebP-изображения

WebP – это формат изображения, который был разработан специально для лучшего сжатия изображений с потерями и без.

Переход с JPEG и PNG на WebP может сэкономить место на диске сервера и снизить пропускную способность, и при этом размер изображений станет меньше на 35% при таком же качестве. 

Преимущества и недостатки

• Файлы имеют меньший размер при таком же или лучшем качестве
• Поддерживается не всеми браузерами и не всеми графическими редакторами

Поддержка браузерами и ОС

• По умолчанию WebP поддерживают Google Chrome (версия 17+ для ПК, 25+ для мобильных устройств), Firefox (65+), Edge (18+) и Opera (11.0+). Планируемая версия Safari 14 также будет поддерживать WebP
• Формат все еще не поддерживается большей частью встроенных графических редакторов ОС, но он поддерживается профессиональными программами, такими как Photoshop

Варианты использования

• Отличная замена файлам JPEG и PNG; позволит сэкономить трафик и ускорить работу вашего сайта.

5. TIFF

Иконка TIFF

Формат, мимо которого просто нельзя пройти в этом руководстве, - это TIFF.

TIFF, сокращенно от Tagged Image File Format (теговый формат изображения), - это формат растрового изображения, который чаще всего используется для хранения и редактирования изображений, которые позже будут использованы в печати.

Несмотря на то, что этот формат поддерживает сжатие с потерями, как правило, его все же используют как формат изображения без потерь. К тому же, большая часть профессиональных графических приложений, которые поддерживают формат TIFF (Photoshop, Illustrator и т.д.), не используют сжатие. Поэтому изображения формата TIFF обычно имеют большой размер файла.

Преимущества и недостатки

• Файлы высокого качества идеально подходят для хранения и печати
• Большой размер файла из-за обычного использования без сжатия
• Ограниченная поддержка браузерами

Поддержка браузерами и ОС

• Ни один из основных браузеров не может отображать файлы формата TIFF без каких-либо надстроек или дополнительных расширений
• Преимущественно доступен в качестве формата экспорта для профессиональных инструментов редактирования и публикации изображений

Варианты использования

• Хранение и подготовка изображений и графики к публикации
• Используется многими сканирующими устройствами для сохранения качества отсканированных документов или изображений

6. BMP – Bitmap

Bitmap VS Gif

Bitmap (BMP) – это по большей части устаревший формат изображений, который отображает отдельные пиксели практически, не сжимая их. Это говорит о том, что BMP-файлы могут быть очень большими и, соответственно, непригодными для хранения и обработки.

Преимущества и недостатки

• Огромные размеры файлов без какого-либо существенного улучшения качества в сравнении с такими форматами, как WebP, GIF или PNG

Поддержка браузерами и ОС

• Поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
• В большинстве стандартных редакторов изображений ОС, таких как MS Paint, встроена поддержка BMP-файлов

Варианты использования

• В 2022 году вариантов использования формата изображений BMP практически не останется

7. HEIF – High Efficiency Image File Format (Формат изображений высокой эффективности)

JPEG vs HEIF

HEIF, сокращенно от High Efficiency Image File Format, - это формат изображения, который был разработан командой, стоящей за видеоформатом MPEG. Цель его создания – создать прямого конкурента формата JPEG.

Теоретически у этого формата сжатие почти в два раза эффективнее, чем у JPEG. Это приводит к тому, что файлы формата HEIF имеют почти в два раза более высокое качество при том же размере файлов.

Это формат растрового изображения, в основе которого лежит отображение пикселей, а это значит, что вы не сможете масштабировать изображения, не потеряв при этом качество.

Преимущества и недостатки

• Отличное соотношение качества и размера файла
• Отсутствует поддержка браузерами и ограниченная поддержка ОС

Поддержка браузерами и ОС

• Не поддерживается ни одним из основных браузеров
• Встроенная поддержка в macOS Sierra и iOS 11 и более поздних версиях, но при этом не поддерживается в соответствующих версиях Safari

Варианты использования

• Используется некоторыми современными телефонами и устройствами для хранения фотографий в более высоком качестве, чем у JPEG

8. SVG – Scalable Vector Graphics (Масштабируемая векторная графика)

Логотип SVG

Формат масштабируемой векторной графики, который обычно называют SVG, был разработан W3C в качестве языка разметки для отображения двумерных изображений в браузере.

Он не зависит от пикселей, как растровый формат, он использует XML-текст для обозначения фигур и линий аналогично тому, как математическое уравнение задает графики.

Это значит, что вы можете масштабировать изображения SVG сколько угодно без потери качества. 

Преимущества и недостатки

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

Поддержка браузерами и ОС

• Поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
• Стандартные редакторы изображений, как правило, не поддерживают формат SVG (так как он не подходит для фотографий), но большая часть приложений иллюстративной графики поддерживают экспорт SVG-файлов

Варианты использования

• SVG – это идеальный вариант для логотипов, иконок, простых иллюстраций и всего того, что должно быть свободно масштабируемым и что должно иметь гибкий дизайн

9. EPS – Encapsulated Postscript (Инкапсулированный язык описания страниц)

Иконка EPS

По сути, EPS-файл (Encapsulated POstScript) – это векторное изображение, который используется для хранения иллюстраций в Adobe Illustrator и других приложениях иллюстративной графики, таких как CoralDraw.

Как и SVG-файл, EPS на самом деле является текстовым документом, в котором вместо отображения пикселей и цветов с помощью кода описываются фигуры и линии. И как следствие, EPS-файлы поддерживают масштабирование без потерь.

Преимущества и недостатки

• Масштабирование без потерь
• Поддержка работы печатающего устройства для документов и проектов

Поддержка браузерами и ОС

• EPS не является стандартным форматов веб-изображений и не поддерживается ни одним из основных браузеров

Варианты использования

• По большей части он используется для хранения, сохранения и печати иллюстраций при работе с Adobe Illustrator или другими приложениями

10. PDF – Portable Document Format (Переносимый формат документов)

Пример PDF-файла

Возможно, PDF у вас в основном ассоциируется с хранением, сохранением и чтением текстовых документов. И это вполне понятно – все-таки прямо в названии есть слово «документ».

Но на самом деле PDF-файлы основаны на том же языке PostScript, что и векторные изображения EPS, и их также можно использовать для сохранения изображений и иллюстраций. 

Этот формат больше всего подходит для хранения иллюстраций, обложек журналов и всего того, что будет в дальнейшем отправлено в печать. Этот формат также является предпочтительным вариантом для наших электронных книг Kinsta.

Преимущества и недостатки

• Текст, который допускает индексацию и возможность поиска, делает этот формат идеальным для подробной инфографики и отчетов. 
• Может содержать ссылки, CTA-кнопки и другие интерактивные элементы
• Масштабируемость без потерь
• Нельзя добавить в веб-контент, так как он должен быть загружен и прочитан как самостоятельный файл

Поддержка браузерами и ОС

• Поддерживается всеми основными браузерами, но PDF необходимо открывать как самостоятельный файл (вы не можете использовать PDF-файлы для отображения изображений через содержимое HTML).
• Формат поддерживается большей частью стандартных редакторов документов (например, MS Word или Google Docs) и многими приложениями для иллюстративной графики (AI, Inkscape), но при этом он не поддерживается программами редактирования изображений

Варианты использования

• PDF – это лучший вариант, если вы хотите создать интерактивный наглядный отчет или инфографику, которая дополнит ваш контент

11. PSD – Photoshop Document (Документ Photoshop)

Логотип PSD

Как видно из названия, формат PSD – это формат изображения, который используется для сохранения графических документов и который используется в Adobe Photoshop.

Этот формат изображений не является веб-безопасным, так как он не поддерживается ни одним браузером и ни одной стандартной программой просмотра или редактирования изображений.

Преимущества и недостатки

• Все фильтры, прозрачность, пути и правки полностью настраиваемые и обратимые
• Качество изображения без потерь
• Большой размер файла

Варианты использования

• Сохранение и хранение проектов Photoshop до и после их завершения

12. AI – Adobe Illustrator Artwork (Графический объект Adobe Illustrator)

Иконка файла Adobe Illustrator

AI – это еще один формат изображения, который был разработан специально для Adobe для того, чтобы сохранять не только изображения, но и состояние проекта.

Как и PSD, он не предназначен для использования в Интернете и не поддерживается ни браузерами, ни большинством стандартных средств просмотра изображений. 

Но в отличие от PSD-файлов, эти файлы вы можете спокойно масштабировать без потери качества. 

Преимущества и недостатки

• Все обводки, линии, фигуры, фильтры являются настраиваемыми и обратимыми
• Можно свободно увеличивать или уменьшать размеры иллюстраций
• Большой размер файла

Варианты использования

• Сохранение и хранение проектов Adobe Illustrator до и после их завершения

13. XCF – eXperimental Computing Facility (Средство для экспериментальный вычислений)

Иконка XCF

XCF, сокращенно от eXperimental Computing Facility, - это тип изображения, который встроен в общедоступный редактор изображений GIMP. Это аналог файлов PSD, и они также сохраняют пути, прозрачность, фильтры и многое другое. 

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

Преимущества и недостатки

• Все пути, фильтры и фигуры являются настраиваемыми и обратимыми
• Качество изображения без потерь
• Большой размер файла

Варианты использования

• Сохранение и хранение проектов GIMP до и после их завершения

14. INDD – Adobe InDesign Document (Документ Adobe InDesign)

Иконка Adobe InDesign

INDD – это тип исходного файла, разработанный для пользователей Adobe InDesign. В нем вы можете сохранять файлы проекта, в том числе содержимое страницы, стили, палитры и многое другое.

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

Он не поддерживается никакими браузерами или стандартными средствами просмотра изображений, поскольку этот формат не считается веб-безопасным.

Преимущества и недостатки

• Можно хранить большие многостраничные дизайнерские проекты с настраиваемыми элементами

Варианты использования

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

15. Типы RAW-файлов изображений

Форматы RAW-файлов изображений (необработанных файлов) – это типы файлов, которые использует цифровая камера для хранения изображений с полным качеством, которые в дальнейшем можно будет обрабатывать. 

Ниже представлен список основных типов RAW-файлов изображений, составленный производителями камер:

• Kodak: CR, K25, KDC
• Canon: CRW, CR2, CR3
• Epson: ERF
• Nikon: NEF, NRW
• Olympus: ORF
• Pentax: PEF
• Panasonic: RW2
• Sony: ARW, SRF, SR2

Тогда как в JPEG-файлах доступны лишь 256 оттенков на цветовой канал (8 бит), RAW-файлы предлагают до 16 384 оттенков на цветовой канал (14 бит) в одном изображении. Это дает больше возможностей для настройки цветов и контрастности при постобработке. 

RAW-файлы изображений не предназначены для использования в Интернете или общего доступа и не поддерживаются ни одним из основных браузеров и ни одним из стандартных средств просмотра изображений.

Преимущества и недостатки

• Изображения более высокого качества с большей вариативностью в цветах
• Гигантские размеры файлов (RAW-файл может спокойно достигать размера от 20 до 40 Мб)

Варианты использования

• Сохранение фотографий в максимально возможном качестве для постобработки и редактирования

Часто задаваемые вопросы по типам файлов изображений

Какие 3 типа файла изображений самые распространенные?

Если за брать за основу данные об использовании изображений в Интернете, то тройка самых распространенных типов изображений будет выглядеть так: JPEG, PNG и SVG.

Статистика использования форматов файлов изображений (источник: w3techs.com)

Давайте посмотрим, за что же их так любят. 

1. PNG: скриншоты, плакаты, инфографика, картинки

Формат PNG лучше всего подходит для случаев, когда на изображении есть текст, поэтому чаще всего его используют для скриншотов, плакатов (в зависимости от размера рекламного плаката) и прочего.

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

Эти два пункта в совокупности с тем фактом, что этот формат поддерживается всеми браузерами и ОС, делают формат PNG самым популярным типом изображений, который используется в Интернете. PNG можно найти аж на 77% веб-сайтов.

2. JPEG: картинки

Сжатие с потерями говорит о том, что JPEG – это лучший вариант для демонстрации изображений на сайте. Обычный пользователь едва ли заметит потерю качества, а вы сможете значительно сэкономить дисковое пространство и снизить пропускную способность.

Именно по этой причине JPEG является вторым по популярности форматом, который используется на просторах Интернета. Его используют почти 72% веб-сайтов. Большинство сайтов используют как PNG, так и JPEG для самых разных целей.

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

3. SVG: логотипы, иконки и иллюстрации

SVG-файлы – это масштабируемые векторные файлы, которые идеально подходят для иконок, логотипов, графиков и простых иллюстраций. Такое изображение можно добавить прямо на страницу в виде CSS-кода. 

Именно поэтому SVG занимает почетное третье место. Их используют 27% веб-сайтов.

Приз зрительских симпатий: анимированные GIF---изображения

Несмотря на то, что формат GIF достаточно редко используется для статических изображений, он снова вошел в моду как формат №1 для анимированных изображений. 

Пример анимированного GIF-файла

И как следствие, GIF используют около 22% веб-сайтов используют, несмотря на то, что в качестве стандартных форматов они, скорее всего, также используют PNG и JPEG. 

Какой формат изображения имеет самое высокое качество?

Самое высокое качество имеют форматы RAW-изображения, но при этом размер этих файлов неоправданно большой, он может достигать сотен мегабайт.

Веб-изображения формата WebP предлагают размер файла, который в сравнении с JPEG будет меньше на 25-35%, но при этом фотографии будут иметь такое же качество. Это значит, что вы можете загружать изображения более высокого качества и занимать при этом такое же место на диске, и, соответственно, можете ускорить свой сайт. 

HEIF – еще одна альтернатива JPEG с более эффективным сжатием, однако сейчас ни один из основных браузеров не поддерживает этот формат. 

PNG-файлы предлагают сжатие без потерь, но это также значит, что размеры файлов будут достаточно большими, и соответственно, будут медленно загружаться. Размер одного PNG-файла может доходить до сотни Кб или даже нескольких Мб. Однако, если вы будете использовать некоторые тактики, такие как отложенная загрузка (доступна в ядре, начиная с WordPress 5.5) и CDN, то сможете сохранить скорость вашего сайта. 

Какие форматы файлов поддерживают прозрачность?

Самыми распространенными типами изображений, используемых в Интернете, которые поддерживают прозрачность, являются PNG, WebP, GIF и даже SVG. 

Также прозрачность поддерживает большая часть исходных файлов, таких как PSD, XCF и AI.

А что касается популярного формата изображения JPEG, то он прозрачность не поддерживает.

PNG лучше JPEG?

Главное различие между PNG и JPEG в следующем: PNG – это формат изображения без потерь, а JPEG – с потерями. По сути это означает, что PNG использует методы сжатия, которые не влияют на исходное качество или детализацию изображения.

Для изображений с текстом, скриншотов для обучающих курсов или для случаев, когда вы хотите, чтобы знаки или другие небольшие элементы были видны на фотографии на 100%, лучше будет выбрать PNG.

Комикс «PNG vs JPEG»

Если вы взглянете на эту забавную картинку выше, то увидите, что PNG (слева) намного четче отображает текст и простые фигуры в сравнении с JPEG (справа).

Говорит ли это о том, что JPEG –плохой тип изображений? Ничуть!

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

Заключение

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

Растровые форматы лучше всего использовать для изображений и рисунков, а векторные –для логотипов, иконок и цифровой графики.

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