Выбор правильного типа изображения может показаться элементарной задачей.
При этом человек – это существо со зрительным восприятием, а изображение – это неотъемлемая часть отображаемой в Интернете информации.
Большая часть веб-страниц и статей используют скриншоты и изображения для того, чтобы как-то облагородить текст. На практике только около 8% веб-сайтов не содержат никакого визуального контента.
Как ни печально, но многие владельцы веб-сайтов до сих пор не понимают, для каких ситуаций какие типы изображений выбрать. Результат? В итоге они замедляют скорость загрузки своего сайта, поскольку изображения, которые они выбрали, имеют неподходящий формат и не оптимизированы.
В этой статье мы разберем самый важные расширения изображений и то, при каких обстоятельствах их следует использовать, чтобы обеспечить наилучшее взаимодействие с вашими пользователями.
Какие есть типы файлов изображений?
Типы и форматы изображений делятся на две основные категории: растровые изображения и векторные изображения.
Давайте рассмотрим каждую из них подробнее.
Форматы растровых изображений
К категории растровых изображений относятся самые распространенные форматы изображений, которые используются в Интернете (JPEG, GIF и PNG).
Растровые изображения отображают статические изображения, в которых каждый пиксель имеет свой определенный цвет, положение и размеры в зависимости от разрешения изображения (например, 1280х720).
Так как эти изображения статичны, то вы не можете полноценно менять размер изображений. Первоначальная структура и пиксели будут просто растягиваться, чтобы заполнить дополнительное пространство. В итоге получается размытое, мозаичное или каким-то другим образом искаженное изображение.
Изображение – пример JPEG
Большая часть фотографий или изображений, которые вы видите в Интернете, используют формат растрового изображения.
Форматы векторных изображений
К примерам форматов векторных изображений относятся SVG, EPS, AI и PDF.
В отличие от статических растровых изображений, где каждый размер и цвет структуры привязан к пикселю, эти форматы являются более гибкими.
Вместо пикселей в векторной графике используется система линий и кривых на декартовой плоскости, пересчитанной в масштабе по отношению к общей площади, а не к отдельному пикселю.
Это значит, что вы можете сколько угодно увеличивать исходное изображения без потери качества или искажения.
Увеличение векторного изображения
Как вы можете видеть, при 7-кратном увеличении разница в качестве колоссальная.
Так как SVG вычисляет координаты на основе процента от общей площади, а не пикселей, то пикселизации нет совсем.
«Только 8% веб-сайтов не содержат визуальный контент, а остальным 92% важно отображать изображения правильного формата.»
15 самых популярных типов изображений
Далее вы рассмотрим основные форматы графических изображений – от растровых веб-изображений до векторных и файлов, полученных с помощью ПО для редактирования изображений.
Мы подробно разберем каждый формат и рассмотрим их плюсы и минусы, поговорим о поддержке браузерами и ОС, а также об идеальных вариантах их использования.
JPEG (и JPG) – Joint Photographic Experts Group (Объединенная группа экспертов по фотографии)
Изображение в формате JPEG
JPEG (или JPG) – это формат растрового изображения, подразумевающий сжатие с потерями. В связи с чем, он хорошо подходит для распространения изображений. Файлы JPEG являются файлами «с потерями», а это значит, что при использовании этого формата уменьшается размер файла, а также ухудшается качество изображения.
JPEG все еще является одним из тех типов изображений, которые используются довольно часто на просторах Интернета. А все из-за того, что он поддерживает возможность сжатия, а также из-за того, что он поддерживается практически всеми браузерами/ОС.
Большинство социальных сетей (таких как, Facebook и Instagram) автоматически преобразуют загруженные изображения в JPEG. Также они используют единые размеры изображений для того, чтобы управлять разрешением ваших фотографий.
Преимущества и недостатки
- Поддержка любыми браузерами/ОС
- Относительно небольшой размер файла
- Сжатие изображений с потерями может привести к ухудшению читаемости текста
Поддержка браузерами и ОС
- Поддерживается всеми основными браузерами (Chrome, Firefox, Safari и т.д.), начиная с версии 1.0
- Поддерживается всеми стандартными средствами просмотра и редактирования изображений основных операционных систем
Варианты использования
- Отличный вариант для изображений, которые будут использоваться в блогах и статьях, например, фотографии людей, дающих интервью, изображения товаров и т.д.
PNG – Portable Network Graphics (Переносимая сетевая графика)
Изображение формата .png ресурсного центра Kinsta
PNG – это формат растровой графики, который поддерживает сжатие без потерь, сохраняя детализацию и контрастность изображения.
Также PNG имеет лучшую читаемость текста в сравнении с JPEG.
Все это делает PNG более популярным для инфографики, плакатов, скриншотов и другой графики, которая содержит как изображения, так и текст.
Преимущества и недостатки
- Изображения более высокого качества (без потерь), текст на изображениях более различимый
- При чрезмерном использовании файлы большего размера могут замедлить работу веб-сайта (особенно это касается изображений с высоким разрешением)
Поддержка браузерами и ОС
- Поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
- Поддерживается всеми основными операционными системами и их стандартными графическими редакторами
Варианты использования
- Отличный вариант для инфографики, плакатов, графики, используемой в блогах, скриншотов, купонов и других визуальных элементов, которые содержат текст
- Не используйте для фотографий с высоким разрешением, поскольку в этом случае размер файла будет доходить до нескольких мегабайт.
GIF – Graphics Interchange Format (Формат обмена графической информацией)
Пример GIF-изображения
GIF – это еще один тип растровых изображений. Он использует сжатие без потерь, но «ограничивает» изображение 8 битами на пиксель и 256-цветовой палитрой.
Формат GIF – это самый известный (и самый часто используемый) формат для анимированных изображений, поскольку его ограничение в 8 бит делает размер анимации не очень большим и подходящим для использования в Интернете.
Преимущества и недостатки
- Небольшой размер файла
- Поддержка анимации
- Ограничение в 8 бит приводит к ограниченному качеству изображения
Поддержка браузерами и ОС
- Поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
- Поддерживается всеми основными операционными системами и их стандартными графическими редакторами
Варианты использования
- Анимированные GIF-изображения можно использовать не только для «оживления контента», но и для демонстрации процесса выполнения задания в обучающих курсах и руководствах
- Не используйте его, если вам нужны изображения, разрешение которых более 8 бит (JPEG поддерживает до 24 бит)
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; позволит сэкономить трафик и ускорить работу вашего сайта.
TIFF
Иконка TIFF
Формат, мимо которого просто нельзя пройти в этом руководстве, - это TIFF.
TIFF, сокращенно от Tagged Image File Format (теговый формат изображения), - это формат растрового изображения, который чаще всего используется для хранения и редактирования изображений, которые позже будут использованы в печати.
Несмотря на то, что этот формат поддерживает сжатие с потерями, как правило, его все же используют как формат изображения без потерь. К тому же, большая часть профессиональных графических приложений, которые поддерживают формат TIFF (Photoshop, Illustrator и т.д.), не используют сжатие. Поэтому изображения формата TIFF обычно имеют большой размер файла.
Преимущества и недостатки
- Файлы высокого качества идеально подходят для хранения и печати
- Большой размер файла из-за обычного использования без сжатия
- Ограниченная поддержка браузерами
Поддержка браузерами и ОС
- Ни один из основных браузеров не может отображать файлы формата TIFF без каких-либо надстроек или дополнительных расширений
- Преимущественно доступен в качестве формата экспорта для профессиональных инструментов редактирования и публикации изображений
Варианты использования
- Хранение и подготовка изображений и графики к публикации
- Используется многими сканирующими устройствами для сохранения качества отсканированных документов или изображений
BMP – Bitmap
Bitmap VS Gif
Bitmap (BMP) – это по большей части устаревший формат изображений, который отображает отдельные пиксели практически, не сжимая их. Это говорит о том, что BMP-файлы могут быть очень большими и, соответственно, непригодными для хранения и обработки.
Преимущества и недостатки
- Огромные размеры файлов без какого-либо существенного улучшения качества в сравнении с такими форматами, как WebP, GIF или PNG
Поддержка браузерами и ОС
- Поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
- В большинстве стандартных редакторов изображений ОС, таких как MS Paint, встроена поддержка BMP-файлов
Варианты использования
- В 2022 году вариантов использования формата изображений BMP практически не останется
- 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
SVG – Scalable Vector Graphics (Масштабируемая векторная графика)
Логотип SVG
Формат масштабируемой векторной графики, который обычно называют SVG, был разработан W3C в качестве языка разметки для отображения двумерных изображений в браузере.
Он не зависит от пикселей, как растровый формат, он использует XML-текст для обозначения фигур и линий аналогично тому, как математическое уравнение задает графики.
Это значит, что вы можете масштабировать изображения SVG сколько угодно без потери качества.
Преимущества и недостатки
- Небольшой размер файла и масштабирование без потерь для простых иллюстраций, фигур и текста
- Не самый подходящий формат для изображений или сложных рисунков
Поддержка браузерами и ОС
- Поддерживается всеми основными браузерами (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari)
- Стандартные редакторы изображений, как правило, не поддерживают формат SVG (так как он не подходит для фотографий), но большая часть приложений иллюстративной графики поддерживают экспорт SVG-файлов
Варианты использования
- SVG – это идеальный вариант для логотипов, иконок, простых иллюстраций и всего того, что должно быть свободно масштабируемым и что должно иметь гибкий дизайн
EPS – Encapsulated Postscript (Инкапсулированный язык описания страниц)
Иконка EPS
По сути, EPS-файл (Encapsulated POstScript) – это векторное изображение, который используется для хранения иллюстраций в Adobe Illustrator и других приложениях иллюстративной графики, таких как CoralDraw.
Как и SVG-файл, EPS на самом деле является текстовым документом, в котором вместо отображения пикселей и цветов с помощью кода описываются фигуры и линии. И как следствие, EPS-файлы поддерживают масштабирование без потерь.
Преимущества и недостатки
- Масштабирование без потерь
- Поддержка работы печатающего устройства для документов и проектов
Поддержка браузерами и ОС
- EPS не является стандартным форматов веб-изображений и не поддерживается ни одним из основных браузеров
Варианты использования
- По большей части он используется для хранения, сохранения и печати иллюстраций при работе с Adobe Illustrator или другими приложениями
PDF – Portable Document Format (Переносимый формат документов)
Пример PDF-файла
Возможно, PDF у вас в основном ассоциируется с хранением, сохранением и чтением текстовых документов. И это вполне понятно – все-таки прямо в названии есть слово «документ».
Но на самом деле PDF-файлы основаны на том же языке PostScript, что и векторные изображения EPS, и их также можно использовать для сохранения изображений и иллюстраций.
Этот формат больше всего подходит для хранения иллюстраций, обложек журналов и всего того, что будет в дальнейшем отправлено в печать. Этот формат также является предпочтительным вариантом для наших электронных книг Kinsta.
Преимущества и недостатки
- Текст, который допускает индексацию и возможность поиска, делает этот формат идеальным для подробной инфографики и отчетов.
- Может содержать ссылки, CTA-кнопки и другие интерактивные элементы
- Масштабируемость без потерь
- Нельзя добавить в веб-контент, так как он должен быть загружен и прочитан как самостоятельный файл
Поддержка браузерами и ОС
- Поддерживается всеми основными браузерами, но PDF необходимо открывать как самостоятельный файл (вы не можете использовать PDF-файлы для отображения изображений через содержимое HTML).
- Формат поддерживается большей частью стандартных редакторов документов (например, MS Word или Google Docs) и многими приложениями для иллюстративной графики (AI, Inkscape), но при этом он не поддерживается программами редактирования изображений
Варианты использования
- PDF – это лучший вариант, если вы хотите создать интерактивный наглядный отчет или инфографику, которая дополнит ваш контент
PSD – Photoshop Document (Документ Photoshop)
Логотип PSD
Как видно из названия, формат PSD – это формат изображения, который используется для сохранения графических документов и который используется в Adobe Photoshop.
Этот формат изображений не является веб-безопасным, так как он не поддерживается ни одним браузером и ни одной стандартной программой просмотра или редактирования изображений.
Преимущества и недостатки
- Все фильтры, прозрачность, пути и правки полностью настраиваемые и обратимые
- Качество изображения без потерь
- Большой размер файла
Варианты использования
- Сохранение и хранение проектов Photoshop до и после их завершения
AI – Adobe Illustrator Artwork (Графический объект Adobe Illustrator)
Иконка файла Adobe Illustrator
AI – это еще один формат изображения, который был разработан специально для Adobe для того, чтобы сохранять не только изображения, но и состояние проекта.
Как и PSD, он не предназначен для использования в Интернете и не поддерживается ни браузерами, ни большинством стандартных средств просмотра изображений.
Но в отличие от PSD-файлов, эти файлы вы можете спокойно масштабировать без потери качества.
Преимущества и недостатки
- Все обводки, линии, фигуры, фильтры являются настраиваемыми и обратимыми
- Можно свободно увеличивать или уменьшать размеры иллюстраций
- Большой размер файла
Варианты использования
- Сохранение и хранение проектов Adobe Illustrator до и после их завершения
XCF – eXperimental Computing Facility (Средство для экспериментальный вычислений)
Иконка XCF
XCF, сокращенно от eXperimental Computing Facility, - это тип изображения, который встроен в общедоступный редактор изображений GIMP. Это аналог файлов PSD, и они также сохраняют пути, прозрачность, фильтры и многое другое.
И снова, это тип исходного файла, который предназначен для хранения проектов, и он не поддерживается ни одним браузером или какими-либо стандартными средствами просмотра изображений.
Преимущества и недостатки
- Все пути, фильтры и фигуры являются настраиваемыми и обратимыми
- Качество изображения без потерь
- Большой размер файла
Варианты использования
- Сохранение и хранение проектов GIMP до и после их завершения
INDD – Adobe InDesign Document (Документ Adobe InDesign)
Иконка Adobe InDesign
INDD – это тип исходного файла, разработанный для пользователей Adobe InDesign. В нем вы можете сохранять файлы проекта, в том числе содержимое страницы, стили, палитры и многое другое.
Несмотря на то, что нередко его называют форматом изображения, он все же больше связан с визуальными элементами без текста.
Он не поддерживается никакими браузерами или стандартными средствами просмотра изображений, поскольку этот формат не считается веб-безопасным.
Преимущества и недостатки
- Можно хранить большие многостраничные дизайнерские проекты с настраиваемыми элементами
Варианты использования
- В основном этот формат используется графическими дизайнерами и художниками-постановщиками для разработки и совместной работы над плакатами, листовками, журналами, брошюрами и многим другим
Типы 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)
Давайте посмотрим, за что же их так любят.
- PNG: скриншоты, плакаты, инфографика, картинки
Формат PNG лучше всего подходит для случаев, когда на изображении есть текст, поэтому чаще всего его используют для скриншотов, плакатов (в зависимости от размера рекламного плаката) и прочего.
Этот формат использует сжатие без потерь, и поэтому его часто используют дизайнеры и фотографы, например, для демонстрации изображений высокого качества на веб-сайтах с их портфолио.
Эти два пункта в совокупности с тем фактом, что этот формат поддерживается всеми браузерами и ОС, делают формат PNG самым популярным типом изображений, который используется в Интернете. PNG можно найти аж на 77% веб-сайтов.
- JPEG: картинки
Сжатие с потерями говорит о том, что JPEG – это лучший вариант для демонстрации изображений на сайте. Обычный пользователь едва ли заметит потерю качества, а вы сможете значительно сэкономить дисковое пространство и снизить пропускную способность.
Именно по этой причине JPEG является вторым по популярности форматом, который используется на просторах Интернета. Его используют почти 72% веб-сайтов. Большинство сайтов используют как PNG, так и JPEG для самых разных целей.
Напомним, что между JPEG и JPG нет никакой разницы – это две разные аббревиатуры и два разных расширения для одного и того же формата.
- 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% места или даже больше, так и не найдя существенной разницы в качестве.
Заключение
Нет никаких ограничений для изображений, которые вы можете с полным правом использовать в своих проектах. Надеюсь, что эта статья помогла вам понять, какие типы и форматы файлов изображений в каких случаях лучше использовать, чтобы достичь наилучшего результата.
Растровые форматы лучше всего использовать для изображений и рисунков, а векторные –для логотипов, иконок и цифровой графики.
Если вы будете использовать подходящие типы изображений для конкретных задач, то это может не только повысить скорость загрузки вашей страницы, но и снизить нагрузку на пропускную способность и сервер. И в качестве бонуса вы получите улучшенное взаимодействие с пользователем. Не плохо, да?
