Какие форматы изображений бывают: что нужно знать
С вами наверняка такое случалось: фотограф прислал долгожданные снимки с фотосессии, а большинство из них не открываются ни в какой программе. И в телефоне тоже не отображаются – а ведь хочется скорее залить их в соцсети! Или вы сами хотели сохранить картинку на компьютер и не знали, в каком формате это лучше сделать – и кликали наугад в один из пунктов бесконечного списка.
Зачем нужно так много форматов, кому они нужны и почему нельзя все подряд хранить в JPEG? Казалось бы, можно было бы обойтись всего одним разрешением для изображений и ничего не усложнять. На самом деле – нет. У каждого формата есть свое назначение, свои недостатки и преимущества.
Разбираемся в самых популярных разрешениях и отвечаем на главные вопросы о них: какие есть форматы изображений, чем отличаются друг от друга, что такое векторная графика.
Растр vs. вектор: в чем разница
Возможно, вы уже слышали, что есть растровые форматы и векторные.
Растровые изображения состоят из пикселей – маленьких квадратов. Каждый пиксель картинки имеет свой определенный цвет и позицию, файл сохраняет эти характеристики и гарантирует их неизменность. Вместе все эти пиксели составляют своеобразную цифровую мозаику, которую человеческий глаз воспринимает, как целостное изображение – мы смотрим на нее как бы «издалека». Но если мы сильно увеличим картинку, мы увидим границы между пикселями. Если этот эффект мозаики заметен даже без приближения, обычно это говорит о том, что изображение плохого качества.
Большинство изображений, которые вы видите в онлайн-журналах и, в частности, в нашем блоге – растровые. Растровые форматы хорошо передают цветовые переходы и используются для фотографий и цифровых рисунков.
Векторные изображения построены по другому принципу. Они состоят не из множества пикселей, а совокупности точек и соединяющих их кривых линий. Векторное изображение можно представить в виде аппликации, состоящей из цветной бумаги: несколько цветных листков разных форм наложены друг на друга. В редакторе можно менять их цвет и расположение.
Векторные картинки можно увеличивать сколько угодно – пикселей там нет, и качество будет оставаться неизменным. Информация в таких изображениях хранится не в пикселях, а в сложных математических формулах. Увеличение или уменьшение картинки происходит благодаря изменению соответствующего коэффициента в формуле. Проще говоря, кривые линии просто растягиваются, как резина, и изображение становится больше.
Векторная графика легко масштабируется, но не может передать такие плавные цветовые переходы, как растровая. Векторные изображения используют для иллюстраций, иконок, логотипов.
Самые популярные форматы картинок
Теперь поговорим о каждом современном формате подробнее – расскажем об их свойствах и особенностях.
Растровые форматы
JPEG (JPG)
Расшифровывается как «Joint Photographic Experts Group». Это один из наиболее распространенных форматов графических файлов. Это расширение стало таким популярным благодаря гибким возможностям для сжатия данных: можно сохранить картинку в максимальном качестве, а можно – сжать до минимума и за секунды отправить в мессенджере или опубликовать на сайте.
Большинство социальных сетей автоматически конвертируют залитый файл в JPEG.
➕ Небольшой размер при нормальном качестве
➕ Поддерживается абсолютным большинством программ для просмотра и редактирования изображений
➖ При каждом сохранении теряется качество
➖ Также теряется качество при масштабировании
➖ Из-за сжатия может плохо отображаться текст
- JPEG открывается во всех основных браузерах: Chrome, Safari, Firefox, Opera и так далее.
- Можно просматривать и обрабатывать в большинстве программ – в том числе в тех, что встроены в ваш компьютер изначально.
Где используют:
- Иллюстрации к статьям в блогах, онлайн-изданиях
- Социальные сети
- Рекламные изображения
PNG
Название этого формата изображений расшифровывается как «Portable Network Graphics». Формат использует сжатие без потерь. В PNG хорошо сохраняются детали и контрасты между цветами. Кроме того, это разрешение поддерживает прозрачный фон и разные степени прозрачности – можно сделать плавные переходы из четкого изображения в фон. Если на таком изображении есть текст, он будет читаться лучше, чем в файле JPEG.
Все это делает PNG идеальным форматом для инфографик, баннеров, скриншотов и других изображений, где есть много текста.
➕ Сжатие без потери качества
➕ Поддержка прозрачного фона
➖ Большие файлы могут замедлять загрузку сайта
- PNG тоже открывается во всех основных браузерах: Chrome, Safari, Firefox, Opera и так далее.
- Открывается в большинстве программ для просмотра и обработки файлов.
Где используют:
- Инфографики, баннеры, скриншоты, купоны и другие изображения, которые содержат много текста.
GIF
GIF – довольно старый формат, который изначально использовали для передачи изображений. О том, как он появился, мы уже рассказывали в этой статье . GIF поддерживает сжатие без потери качества, но хранит данные в формате данных до 256 цветов. А еще GIF поддерживает анимацию – благодаря чему до сих пор жив и, более того, входит в список самых популярных современных форматов. Ограничения в цветах позволяют делать файлы легкими и internet-friendly.
➕ Небольшой размер файлов
- GIF не хуже JPEG открывается во всех основных браузерах: Chrome, Safari, Firefox, Opera и так далее.
- Открывается практически во всех редакторах и программах для просмотра изображений.
Где используют:
- Мемы
- Быстрые наглядные туториалы
TIFF
Расшифровывается как «Tagged Image File Formats». Этот формат подходит для хранения и редактирования изображений большого разрешения, которые потом пойдут в печать. Это формат без сжатия, поскольку его фокус – сохранение качества.
➕ Подходит для хранений файлов высокого разрешения
➕ Поддерживает прозрачный фон и сохраняет слои
- Браузеры в основном не поддерживают TIFF, нужно скачивать специальные расширения
- Поддерживается программами для редактирования
Где используют:
- Изображения для печати в больших форматах
- Для сканирования изображений
WebP
Формат картинок, разработанный Google специально для того, чтобы достичь лучшего сжатия – с потерей качества или без. Такие файлы при аналогичном качестве весят меньше, чем JPEG или PNG и подходят для публикации в сети.
➕ Легкие файлы при хорошем качестве
➖ Поддерживается не всеми браузерами
- Google Chrome (версия 17+ на компьютере и 25+ мобильного приложения), Firefox (версия 65+), Edge (18+), Opera (11+), Safari (14+).
- Поддерживается распространенными профессиональными редакторами (типа Photoshop). Но в некоторых «родных» программах MacOS или Windows могут не открываться.
Где используют:
- Размещение изображений в интернете
HEIF
Расшифровывается как «High Efficiency Image File». Этот формат – относительно молодой конкурент JPEG. По задумке, он должен быть вдвое компактнее в сравнении со своим предшественником: при аналогичном качестве файлы весят в два раза меньше.
➕ Отличное соотношение размер/качество
➖ Не сильно распространен и не поддерживается браузерами
- Поддерживается в MacOS версии Sierra и более поздних, а также IOS 11 и более поздних версиях этой операционной системы.
Где используют:
- Используются новыми смартфонами для хранения фотографий хорошего качества.
RAW
RAW – это формат, в котором хранится необработанная информация, которая поступает напрямую с матрицы фотокамеры. Этот формат широко используется фотографами, поскольку открывает огромные возможности для редактирования снимков. Можно снимать и сразу в JPEG, но тогда «спасти» неудачный кадр в фоторедакторе будет невозможно.
Чаще всего RAW файлы после обработки сохраняют в растровых форматах. Кстати, единого формата RAW нет – каждый производитель фотокамер называет такие файлы по-своему. У Nikon, например, это NEF, а у Canon – CR2. Так что если совсем по-честному, то RAW – это группа форматов.
➕ Позволяет редактировать снимки – например, высветлять экспозицию и корректировать баланс белого
➕ Хранит полные данные об изображении
➖ Требуют обязательной обработки и конвертации
- В браузерах не открываются
- Поддерживаются большинством редакторов изображений
Где используют:
- Формируются фотокамерами и хранятся для дальнейшей обработки
Векторные форматы
SVG
Расшифровывается как Scalable Vector Graphics. Изначально формат был создан для визуализации двухмерных изображений прямо в веб-браузере. Широко используется в веб-дизайне.
➕ Распространенный формат: поддерживается большинством браузеров
➖ Не подходит для сложных изображений с большим количеством оттенков
- Все основные браузеры: Google Chrome, Edge, Firefox, Safari, Opera, Internet Explorer)
- Большинство редакторов, поддерживающих работу с векторной графикой (Adobe Illustrator, Sketch и так далее)
Где используют:
- Отлично подходит для логотипов, иконок и простых иллюстраций
EPS
Еще один стандартный векторный формат. Как и SVG, его используют для хранения и переноса векторной графики. Как и любые другие векторные изображения, EPS файлы можно бесконечно масштабировать без потери качества.
➕ Легко преобразуются в растровые форматы
➖ Не открывается в браузерах
- Большинство векторных редакторов (Adobe Illustrator, Sketch и так далее)
Где используют:
- Для хранения и печати иллюстраций
Большинство ассоциируют PDF с текстовыми документами. Но вообще этот формат использует тот же язык (PostScript), что и EPS файлы, и используется для сохранения изображений. В PDF можно хранить обложки журналов, иллюстрации и другие картинки, которые вы в перспективе планируете напечатать.
➕ Много возможностей для работы с текстом: можно искать слова или, например, вставлять ссылки
➕ Масштабирование без потери качества
➖ Не загружается как часть веб-страницы, нужно размещать отдельной ссылкой для скачивания
- Поддерживается всеми браузерами
- Открывается как в текстовых редакторах (MS Word, Google Docs)
Где используют:
- Лучший вариант для интерактивного документа или кликабельной инфографики
Помимо названных, у большинства редакторов изображений – векторных и растровых – есть свой формат. Так, «родной» формат Photoshop – это PSD , программа для верстки Adobe InDesign предлагает работать с файлами INDD , а векторные редакторы CorelDraw и Adobe Illustrator – с CDR и AI соответственно.
Как используют разные форматы изображений
Как менять формат картинок
Хорошо, с назначениями форматов разобрались. Но что делать, если к вам попал файл формата TIFF, а его нужно преобразовать в JPEG? Тут помогут специальные программы – конвертеры файлов. Мы уже рассказывали о лучших бесплатных приложениях для конвертации файлов. А сегодня расскажем про наш любимый софт такого рода – Movavi Video Converter.
Это программа поддерживает более 20 форматов изображений и поможет преобразить любой графический файл за считанные секунды. Как вы уже наверняка поняли из названия, эта програма также может конвертировать видео и аудио. А еще преобразованные в нем файлы можно легко отредактировать: обрезать, повернуть или добавить текст.
Хотите попробовать? Скачивайте Movavi Video Converter со специальной секретной скидкой для читателей нашего блога:
Форматы изображения (RAW, JPEG, HEIF) и сжатие
На большинстве цифровых камер предусмотрена возможность выбора формата (его также называют типом файлов), в котором будут сохраняться фотографии, — RAW, JPEG, а теперь еще и HEIF (впервые представленный с камерой EOS-1D X Mark III в 2020 г.) Так чем же различаются эти форматы, и какой следует предпочесть?
Файлы RAW
Файл в формате RAW соответствует своему названию — это файл «сырых», необработанных данных. Он содержит именно те данные изображения, которые захватил датчик камеры. Все настройки баланса белого, стиля изображения и так далее, которые вы применили, присоединяются к файлу изображения. Это означает, что в дальнейшем их можно будет изменить с помощью программного обеспечения для обработки файлов RAW, например Digital Photo Professional (DPP) от Canon или Adobe® Photoshop® (с актуальной версией подключаемого модуля Adobe Camera Raw) и не только.
Файл в формате RAW часто называют «цифровым негативом», так как данные можно обрабатывать и печатать различными способами, добиваясь различных результатов, совсем как негативы на пленочных камерах. Так же, как и пленочный негатив, файл RAW невозможно изменить. Если открыть файл RAW в приложении, обработать и отредактировать его и затем сохранить, на компьютере будет создан новый файл (обычно в формате JPEG или TIFF). Исходный файл в формате RAW останется без изменений, и в любой момент его можно будет снова открыть и использовать для получения совершенно другого результата.
Название формата «RAW» не является аббревиатурой, его написание заглавными буквами сложилось исторически, при этом имена файлов RAW на камерах Canon не заканчиваются на «.RAW». Вместо этого, вплоть до появления камеры EOS M50 с новым процессором DIGIC 8, файлы RAW на камерах Canon сохранялись в формате .CR2. На некоторых камерах также предусматривались альтернативные форматы с более низким разрешением и «средним» (M-RAW) или «малым» (S-RAW) размерами файлов. Файлы этих двух типов обладают большинством преимуществ файлов RAW, но благодаря меньшему разрешению занимают меньше места в хранилище.
Процессор DIGIC 8 позволил использовать формат .CR3 и его подвид, формат C-RAW, который сохраняет то же самое разрешение, при этом сокращая размер файлов на 35–55% и экономя пространство на карте памяти. (Для этого, однако, C-RAW использует сжатие с потерями, то есть удаляет некоторую информацию об изображении. Вскоре мы остановимся на этом аспекте подробнее).
Файлы RAW, созданные камерами разных моделей, не совсем одинаковы, даже если сохраняются в одном и том же формате (CR2 или CR3). Именно поэтому программное обеспечение для обработки файлов RAW, например DPP, регулярно обновляется для поддержки новых моделей камер, и при покупке новой камеры мы настоятельно рекомендуем проверить наличие обновлений DPP и загрузить самую актуальную версию.
Некоторые камеры EOS позволяют обрабатывать изображения в формате RAW, используя саму камеру, что очень удобно для создания файлов JPEG с одинаковыми пользовательскими настройками (например, балансом белого, яркостью и шумоподавлением), а не встроенных параметров JPEG вашей камеры. У обработки файлов RAW на компьютере, а не с помощью камеры, есть свои преимущества — более широкий экран и более мощный процессор.
Преимущества формата RAW
- Максимальная гибкость при редактировании
- Широкий выбор настроек для редактирования после съемки
- 14-битные файлы: запись максимального диапазона цветов и тонов
- Большой размер файла
- Необходимость в обработке (обычно на компьютере)
Какой формат выбрать — WebP, PNG или JPG
Существует множество форматов изображений, с некоторыми из них разработчики сталкиваются постоянно, с другими крайне редко.
В статье рассмотрим три распространённых формата: JPEG, PNG и WebP. Каждый из них имеет свои сильные и слабые стороны. Выбор правильного формата зависит от специфики вашего сайта и изображений, с которыми вы работаете. Узнаем особенности форматов и в каких случаях их лучше использовать.
Форматы изображений и их назначение
JPEG
Формат JPEG (Joint Photographic Experts Group) был разработан в 1992 году для сжатия фотографий или других изображений с большим количеством цветов и плавными переходами между оттенками. Изображения в формате JPEG широко используются в вебе. Большинство красочных картинок, которые мы видим в интернете, имеют именно этот формат.
Изображение в формате JPG.
В процессе сжатия изображения некоторые данные удаляются, чтобы уменьшить размер файла. При этом происходит незначительная потеря качества, но для глаз это не сильно заметно.
Недостаток JPEG-файлов в том, что, если изменить их размер, они могут стать размытыми. Также они не обладают прозрачностью, поэтому JPEG не подходит для создания логотипов. Файлы .jpg используют для контентных, декоративных фоновых изображений на сайте, также для иллюстрации товаров и многого другого.
PNG
Формат изображений PNG (Portable Network Graphics) часто используется для графики и логотипов. В отличие от JPEG, в PNG сжатие происходит без потерь — изображение сохраняет первоначальное качество даже после многократного редактирования или изменения размера. Это делает PNG отличным выбором для логотипов, иконок и других графических изображений, которые должны всегда оставаться чёткими.
Пример изображения PNG. Источник
Важная особенность этого формата — возможность поддержки альфа-канала, то есть прозрачности. Причём она может быть разной степени: от непрозрачного изображения до полностью прозрачного. Этот формат удобно использовать, если нужен прозрачный фон, например, у логотипа или графика.
В PNG есть многослойность. За счёт наложения слоёв и варьирования их прозрачности можно создавать интересные эффекты с тенями и градиентами.
Формат также поддерживает различные цветовые пространства, включая RGB и индексированный цвет, который позволяет хранить палитру цветов. Это полезно при использовании PNG для хранения изображений с меньшим количеством цветов, таких как иконки и логотипы.
Недостаток PNG — размер файла в нём обычно больше, чем в JPEG, что может привести к замедлению загрузки сайтов.
WebP
Формат WebP был разработан компанией Google в 2010 году. Он был создан для улучшения скорости загрузки страниц и экономии места на сервере.
WebP имеет ряд преимуществ по сравнению с другими форматами изображений. Он позволяет уменьшить размер файлов изображений на 25-35% по сравнению с JPEG, сохраняя при этом качество изображения. WebP обеспечивает поддержку прозрачности, анимации и многоканальности. Это делает формат идеальным для использования на сайтах, где важно быстрое время загрузки, например, в интернет-магазинах или на сайтах с множеством изображений.
Пример изображения в формате WebP
Недавно Google выпустил новую версию формата — WebP Lossless. Она использует алгоритм, который позволяет сжимать изображения без потерь качества, предыдущие же версии использовали только сжатие с потерями.
✅ Если вам понадобится использовать лёгкие изображения для вёрстки сайта, то для преобразования в формат WebP рекомендуется использовать онлайн-конвертеры. Например:
- Convertio — конвертер изображений, позволяющий преобразовывать JPEG, PNG и другие форматы в WebP.
- Online-Convert — сервис, который позволяет конвертировать изображения, видео, аудио и другие файлы в различные форматы, включая WebP.
- Squoosh — онлайн-приложение для оптимизации изображений, которое также позволяет сохранять их в формате WebP.
Как выбрать формат изображения
Для каждой задачи выбирайте свой формат изображения. Если важна быстрая загрузка, вы работаете с фотографиями или другими многоцветными изображениями, то лучше всего подойдёт WebP.
Если вам необходимо сохранить качество графики и логотипов, то лучше использовать PNG. Для изображений со множеством цветов и плавными переходами цвета выбирайте формат JPEG.
✅ Выбор формата изображения:
- определите задачи сайта и каждого изображения;
- для логотипов и графических изображений с мелкими деталями рекомендуется использовать формат PNG. Также для этих целей подойдёт WebP;
- для декоративных и красочных изображений подойдёт JPEG;
- если важны быстрая загрузка и большое количество многоцветных изображений, то лучше отдать предпочтение WebP.
Материалы по теме:
- Обзор цветовых форматов в CSS
- Полупрозрачный градиент над картинкой на чистом CSS
- Как добавить изображение на страницу
- Как сделать картинку ссылкой
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
JPEG и PNG — в чём разница форматов?
JPEG и PNG — это два основных формата для изображений, которые используются на сайтах. В некоторых случаях лучше использовать JPEG, а в некоторых — PNG.
Формат JPEG
JPEG (он же JPG) — это формат изображений, который использует сжатие с потерями и не поддерживает прозрачность. Позволяет настраивать уровень качества сохраняемого изображения — при его снижении удаляются детали и добавляются шумы на изображение, однако размер становится более компактным. JPG в зависимости от настроек может обеспечить сжатие как 2:1, так и 100:1 — но качество прямо пропорционально коэффициенту сжатия. Название формата — аббревиатура от Joint Photographic Experts Group.
JPEG поддерживает цветовые пространства 24-bit RGB и CMYK, а также 8-bit Grayscale. CMYK и Grayscale используются достаточно редко и их поддержка вызывает нарекания.
Также JPEG имеет интегрированную поддержку EXIF, позволяющую хранить метаданные, например: производитель и модель использованной камеры, используемая для съёмки выдержка, диафрагма и светочувствительность, разрешение кадра, настройки баланса белого, фокусное расстояние (в т.ч. эквивалентное), использование вспышки, размер матрицы, дата и время съёмки, географические координаты и адрес места съёмки.
Используемые расширения для файлов — .jpg and .jpeg (работают идентично).
С прикладной точки зрения JPEG оптимален для изображений с большим количеством цветов, например, для фотографий.
Формат PNG
PNG 24 — это формат изображений, который работает с полноцветными изображениями, использует сжатие без потерь и позволяет сохранять прозрачность. Настроить качество сохранения в PNG 24 невозможно, однако, можно адаптировать сохраняемое изображение для достижения минимального размера файла: для этого можно снизить количество цветов в изображении. Название формата — акроним от Portable Network Graphics.
Существует также формат PNG 8 — он более компактный, чем PNG 24, но применим только для изображений с очень ограниченных количеством цветов: 256 — это максимум. В случае использования PNG 8 для изображений с большим количеством цветов сжатие будет с потерями и с эффектом постеризации.
PNG до 2017 года не поддерживал EXIF, но затем его поддержка была реализована в стандарте. В фотографии PNG используется редко — для компактного хранения файлов больше подходит JPEG, а для профессиональной работы лучше подходят RAW‑форматы DNG или TIFF.
PNG 24 и PNG 8 используют расширения для файлов .png, используемая битность записывается в метаданные файла и по расширению не определяется.
С прикладной точки зрения PNG 24 оптимален для изображений с небольшим количеством цветов, например, для иконок, схем, рисунков и скриншотов. Если же цветов в изображении меньше 256, то еще более эффективное сжатие возможно в PNG 8.
Резюме. JPEG и PNG — какой формат оптимальнее использовать?
Фотографии и изображения с большим количеством цветов лучше всего сохранять в JPEG. Но стоит помнить, что алгорим компрессии JPEG сжимает изображения с потерей качества.
Иконки, схемы, картинки с большим количеством текста и изображения с прозрачностью оптимальнее сохранять в PNG 24. Алгорим компрессии PNG 24 сжимает изображения без потери качества.
Статья опубликована в 2019 и была обновлена в 2022 году
Тематические статьи
Ускоряем работу сайта: оптимизация HTML
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, а без этого скорость загрузки и отрисовки будет ниже.
быстродействие
веб-разработка
Статья опубликована в 2014 году
Ускоряем работу сайта за счёт оптимизации CSS
Время загрузки и отрисовки сайта в браузере можно заметно снизить, если воспользоваться следующими советами.
быстродействие
веб-разработка
Статья опубликована в 2014 году
Браузерное или клиентское кеширование
Кэширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или при посещении просматривает несколько страниц, которые используют одинаковые ресурсы.
быстродействие
веб-разработка
Статья опубликована в 2014 году
Ajax-навигация Turboliks & Wiselinks
Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.
быстродействие
JavaScript
веб-разработка
Статья опубликована в 2014 году
Адаптивные изображения
Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения.
Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет‑соединение. Рассмотрим самые распространённые.