JPG против PNG против GIF: различия между форматами изображений

Роза под любым другим именем может пахнуть так же сладко, как говорит Шекспир в Ромео и Джульетте, но если вы сделаете снимок этой розы и сохраните его в формате JPEG с высоким сжатием, вы можете столкнуться с ухудшением качества изображения. Но это не проблема, так как у вас есть возможность использовать PNG, TIFF, GIF, SVG или даже новый формат, такой как HEIC или WebP. Некоторые из этих форматов отлично подойдут для новостной рассылки семьи Капулетти, в то время как другие лучше впишутся в блог Ромео, поэтому расшифровка этих типов файлов может быть довольно полезной.

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

image-formats-lossy

Каждый формат изображения можно классифицировать как «с потерями» или «без потерь», и эти термины в основном объясняют сами себя. Сжатие с потерями уменьшает размер файлов, навсегда удаляя информацию о файле, делая его меньше, но также ухудшая качество. Сжатие без потерь просто переставляет данные таким образом, чтобы они занимали меньше места, но могут быть упакованы и распакованы (или разархивированы!) без каких-либо повреждений файла.

Растровые против векторных

image-formats-raster-vector

Когда вы думаете «формат изображения», вы, вероятно, думаете о растровом. Это не имеет ничего общего с Бобом Марли – это просто означает, что файл по сути представляет собой сетку цветных пикселей, которые составляют изображение. JPG, PNG, GIF, TIFF и большинство других фотофайлов являются растровыми. Единственная информация, которую они содержат, – это какой цвет у пикселей, поэтому увеличение или растяжение их обычно приводит лишь к более пикселизированному изображению.

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

Группа совместной фотографии (JPEG) – растровый с потерями

image-formats-jpeg

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

JPEG-2000 – это обновленная версия, которая имеет некоторые улучшения по сравнению с оригиналом, но она никогда не стала популярной, поэтому вы вряд ли увидите этот формат в большом количестве мест.

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

Портативная сеть графики (PNG) – растровый без потерь

image-formats-png

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

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

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

Формат графического обмена (GIF) – растровый без потерь

image-formats-gif

Предшественник PNG, формат GIF сейчас наиболее известен благодаря коротким видеопетлям, которые вы не можете перестать смотреть в социальных сетях. Дебаты о том, как произносить его – « g if» или « j if» – довольно горячие, но если вы хотите рассердить обе стороны, попробуйте произнести его как «джеф».

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

Отлично подходит для: простых графиков, анимаций, иконок.

Формат файла с тегами (TIFF) – растровый без потерь

image-formats-tif

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

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

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

image-formats-svg

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

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

Новые форматы

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

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

HEIF по сути является JPEG, но с более высоким качеством и меньшими размерами файлов. Это теперь формат по умолчанию для изображений на iOS 11 и более поздних версиях.

image-formats-heif

WebP

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

image-formats-webp

Почему так много форматов?

Маловероятно, что когда-либо будет один формат, который будет править всеми, поскольку разные области имеют разные потребности в изображениях. Общие интернет-браузеры не нуждаются в чем-то большем, чем JPEG и PNG (и, возможно, WebP и HEIC в будущем), но для бизнес-приложений и публикаций наличие таких опций, как TIFF и SVG, упрощает жизнь.

И, если вы еще не сделали этого, вам следует подумать о том, чтобы выбрать сторону в дебатах о GIF, прежде чем формат исчезнет. Станьте частью истории.

Кредиты изображений: Сравнение между JPEG, JPEG 2000, JPEG XR и HEIF, Google Developers, W3C.org, Это легкий неоновый анимированный GIF, Сравнение JPEG JFIF и 2000, Пример сжатия JPEG