Мы выяснили, что экраны представляют собой таблицы из пикселей. А поскольку это таблица, то она имеет число "строк" и "столбцов" – разрешение.

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

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

Примечание: разница в разрешении достаточно часто бывает намного более разительной, чем показано здесь.

Вы все были на YouTube и прекрасно знаете, что там есть настройка качества. Она отвечает именно за разрешение просматриваемого видео.

Часто работает такое правило – чем больше разрешение картинки, тем больше её вес. Поэтому та самая настройка качества помогает смотреть видео, например, в дороге, где связь бывает достаточно плохой.

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

N = 2ⁱ. Это единственная формула на этом сайте. N — количетво цветов, i — количество бит, который выделяется на 1 пиксель. То есть: если выделить 1 байт (то есть 8 бит) на пиксель, то в изображении может храниться 256 цветов.

Число i называется глубиной цвета.

Компьютеры работают в модели RGB (Red, Green, Blue), где цвет определяется тремя составляющими: каналами красного, зелёного и синего цветов. Поэтому глубина цвета может определяться не только количеством бит на пиксель, но и бит на канал.

Так как каналов 3, то если вы разделите число бит на пиксель на 3, то получите глубину цвета в битах на канал.

Сегодня почти везде используется схема TrueColor — 24 бита на пиксель (или 8 на канал). Это позволяет воспроизвести почти все цвета, которые может видеть человек.

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

Мы выяснили, что экраны состоят из пикселей. Но в каком же виде устройства хранят графику? Есть несколько основных видов цифровой графики: растровая, векторная, фрактальная и трёхмерная.

Растровые изображения состоят из растра — мозаики из пикселей, прямо как экран телефона, телевизора или монитора. В файлах с этим видом картинок есть информация о разрешении изображения, цвете (а иногда и о степени прозрачности) каждой точки.

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

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

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

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

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

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

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

Кристаллы, кораллы, морские раковины также являются хорошим примером фракталов. Фрактальное устройство можно увидеть и в растениях: это кроны деревьев, листья, плоды ананаса и капуста романеско.

Вы все знакомы с трёхмерной графикой. Вы можете видеть её практически везде — в играх, в фильмах, мультфильмах и много где ещё.

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

Кстати, фракталы тоже бывают трёхмерными...

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

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

Поэтому для фотографий и сложных рисунков нужно использовать растровые форматы. Но в векторных графических редакторах (Adobe Illustrator, Inkscape, CorelDRAW) порисововать всё же можно.

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

И почти для всех них применятся одна важнейшая операция...

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

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

Несмотря на то, что ситуация за последние 30 лет с хранением и пересылкой файлов стала лучше, сжатие всё ещё является крайне важной процедурой.

Сжатие бывает двух видов.

Сжатие без потерь информации уменьшает объём файла, оставляя содержимое самого изображения без изменений.

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

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

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

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

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

И теперь стоит приступить к рассмотрению самих форматов растровых изображений. Первый на очереди — BMP.

BMP был создан корпорацией Майкрософт в 1980-х годах. Один из первых форматов цифровых изображений, поэтому отличается своей простотой: никакого сжатия не предусмотрено, следствием чего является большие, порой огромные размеры файлов.

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

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

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

Пиксели могут быть либо полностью прозрачными, либо полностью непрозрачными, поэтому у границ объектов можно наблюдать эффект "лесенки".

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

TIFF — формат, разработанный компанией Aldus в 1986 году. Эта же компания разработала PageMaker — одну из первых программ для публицистики. И до сих пор формат TIFF популярен в сферах публицистики и дизайна.

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

Помимо этого, формат позволяет хранить в себе слои для удобного редактирования изображения после сохранения в таких программах, как Adobe Photoshop, InDesign и т.д.

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

PNG — формат, созданный в 1995 году как свободный аналог GIF.

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

Несмотря на то, что PNG создавался как замена GIF, в базовой версии не реализована важная функция второго — поддержка анимации. В 2008 году было представлено расширение APNG, которое добавило поддержку хранения множества кадров в одном файле.

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

Широко известный формат JPEG был разработан Объединённой группой экспертов по фотографии в 1992 году. Сегодня наибольшая часть изображений в Интернете — в этом формате.

JPEG позволяет хранить изображения глубиной цвета до 12 бит на канал, но в подавляющем большинстве случаев используется классический TrueColor. Прозрачность и сжатие без потерь неподдерживаются.

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

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

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

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

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

Алгоритм сжатия на самом деле используется из другого проекта Google — видеокодека VP8, который считается сегодня уже слегка устаревшим, но достаточно хорошим.

WebP без проблем поддерживается на всех современных браузерах и крайне важен в Интернете.

Для работы с этим форматом в Windows необходимо установить библиотеки. Вы можете скачать их, нажав сюда.

Формат изображений HEIF был разработан Экспертной группой по движущимся изображениям в 2015 году. Эта организация ответственна за многие стандарты медиа за последние 20-30 лет.

Этот формат приобрёл известность после того, как корпорация Apple приняла решение использовать его как основной в собственных продуктах. Так, уже несколько лет iPhone сохраняют фотографии именно в HEIF.

HEIF может содержать метаданные. Поддержки прозрачности нет.

Подобно WebP, этот формат чаще всего использует эффективное сжатие с потерями, использующее в видеокодеке HEVC.

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

AVIF — открытый формат, созданный Альянсом за открытые медиа, в который входят Apple, Facebook, Google, Microsoft, Amazon, Mozilla и многие другие крупные компании в индустрии высоких технологий.

Этот формат является новейшим, и содержит в себе лучшие черты HEIF и WebP: он поддерживает анимацию, прозрачность, метаданные, сжатие с потерями и без потерь. Глубина цвета может быть TrueColor или больше.

Подобно двум выше указанным форматам, его метод сжатия взят из видеокодека, а именно из AV1 (в котором, кстати, с недавнего времени YouTube хранит видео).

RAW — общее название группы форматов растровых изображений, отличающихся тем, что они содержат необработанные данные об электрических сигналах, полученных от фотоматрицы цифровой камеры или фотоаппарата. Фотоны, которые попадают на матрицу, не несут в себе информации о цвете, поэтому для того, чтобы изображения выходили в итоге цветными, точки матрицы накрываются сеткой из фильтров трёх цветов – красного, синего и зелёного. Чаще всего используется фильтр Байера, который можно видеть справа.

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

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

Вся эта нудная теория вела к сравнению форматов друг с другом. Здесь можно сравнить картинки, которые получаются, если сжать их с потерями в форматах JPEG, HEIF, WebP и AVIF.

В списке есть две моих фотографии, два (тоже моих) тестовых рисунка, а также две фотографии из Интернета.

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