Растровые изображения можно рассматривать как набор попиксельных инструкций для рендеринга двухмерной сетки. К распространенным форматам растровых изображений относятся GIF (.gif), JPEG (.jpg), PNG (.png) и WebP (.webp). Способ сжатия и кодирования этих инструкций в каждом формате изображения различен, что приводит к огромной разнице между размерами файлов: фотографическое изображение, закодированное в формате JPEG, может иметь размер всего несколько сотен килобайт, в то время как то же изображение, закодированное в формате PNG, может иметь размер в несколько мегабайт. любую заметную разницу в качестве для конечного пользователя.
Источник растрового изображения, масштаб которого выходит за пределы присущих ему размеров, будет выглядеть искаженным, блочным или размытым:
Для произведений искусства, содержащих реальные уровни детализации, растровые изображения являются подходящим инструментом.
Как и выбор между растровыми и векторными изображениями, выбор подходящего типа растрового изображения в конечном итоге зависит от варианта использования. Когда мы разбиваем растровые изображения на их кодировки, мы на самом деле говорим о методах, используемых для описания их содержимого, и о методах сжатия (или их отсутствии), которые мы применяем. Помните, что сервер отправляет в браузер не изображение по сети, а поток байтов, описывающий пиксельную сетку, из которой состоит это изображение, которое клиент может перекомпоновать.
Итак, чтобы лучше визуализировать процесс кодирования сетки пикселей в виде данных байтового потока, я хочу, чтобы вы представили, что действуете как веб-браузер. У вас есть лист миллиметровой бумаги и пачка фирменных мелков. У меня, как у веб-сервера, есть то же самое, но я уже использовал свои мелки, чтобы заполнить миллиметровку исходным изображением. Если бы я отправил вам простое текстовое сообщение, я не смог бы отправить вам само изображение, но я мог бы передать информацию об источнике изображения на языке, который мы оба понимаем, используя наш общий стандарт для нашей «пиксельной» сетки и цветов:
Начните с верхнего левого угла. Первая строка, первый столбец — синий. Первая строка, второй столбец — синий. Первая строка, третий столбец — синий. Первая строка, четвертый столбец — красный.
Используя эту текстовую информацию, вы сможете идеально воссоздать изображение, которое есть на моем листе миллиметровой бумаги.
Различия в форматах изображений и способах их кодирования в виде данных можно условно рассматривать как способ форматирования этой информации. Например, информация, которую я вам отправил, может быть так же легко выражена как:
Начните с верхнего левого угла. Первая строка, столбцы с первого по третий — синие. Первая строка, четвертый столбец — красный.
Любое из этих описаний приведет к одному и тому же изображению, но второму удается описать то же изображение с меньшим количеством символов. Это метод сжатия данных изображения без потерь : вся та же информация — и, следовательно, без снижения визуальной точности — но меньше байтов, передаваемых по сети от меня к вам — от сервера к механизму рендеринга. Это простой языковой эквивалент «кодирования длин серий» для данных изображения, где данные кодируются как повторяющееся значение и счетчик, а не повторяются несколько раз полное значение.
Обратное сжатие с потерями на первый взгляд может показаться бесполезным — зачем вам вообще хотеть, чтобы ваши изображения выглядели хуже ? Однако это не совсем так, и стоит иметь в виду, что наши глаза также не обладают идеальной точностью. Выбор правильного формата и настроек сжатия изображений — это попытка найти баланс между уровнем визуальной детализации, которую мы можем воспринимать, и объемом данных, отправляемых в браузер. Оба эти фактора определяются содержанием нашего исходного изображения.
Форматы растровых изображений — это те, с которыми вы, как разработчик, вероятно, лучше всего знакомы: GIF, JPEG, PNG, WebP и другие. Вы узнаете о возможностях каждого из следующих модулей.