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

Зачем нужна оптимизация изображений для сайта?

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

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

На скорость загрузки страницы влияет много параметров сайта и один из них – это размер самой страницы

Размер страницы — сума размеров всех загружаемых файтов (текста, изображений, служебных скриптов) и он измеряеться в килобайтах (kb) или мегабайтах (1Mb=1024kb).

Размер загружаемой страницы, а заодно и скорость загрузки сайта можно проверить на сайте Pingdom Website Speed Test

Скорость и размер страницы

В чем проблема оптимизации изображений ?

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

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

Поэтому если поместить изображение с фотокамеры прямо на веб-страницу, то оно наверняка превысит ширину дисплея в несколько раз.

Надо учитывать, что даже JPG-фото с шириной 800 пикселей может занимать более 2 Mb, если его должным образом не оптимизировать. А если при вводе нужно применить прозрачность в изображении, то надо знать и о альфа-прозрачности, и 24-битных png-файлах.

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

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

Что влияет на размер файла при представлении изображений

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

Размер изображения

Размеры растровых изображений выражают в виде количества точек (пикселей) по горизонтали и вертикали.

Например, цыфровая камера делает фото размером 3200×2100 пикселов. В данном случае это означает, что ширина изображения составляет 3200, а высота — 2000 точек. Такое изображение состоит из 6 720 000 точек (пикселов), то есть больше 6 мегапиксела.

Размеры исходного фото для оптимизации

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

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

Разрешением экрана монитора обычно называют размеры получаемого на экране изображения в пикселах: 800×600, 1024×768, 1280×1024. Здесь подразумется разрешение относительно физических размеров экрана, а не эталонной единицы измерения длины, такой как 1 дюйм (2,54 см). Для получения разрешающей способности в единицах ppi (количество пикселей на дюйм) данное количество пикселов необходимо поделить на физические размеры экрана, выраженные в дюймах.

Например, я пишу эти строки на ноутбуке, размер монитора ноутбука: 342 мм х 194 мм, текущее разрешение экрана ноутбука: 1366px х 768px. Соотвестввенно, разрешение моего монитора по горизонтали равно примерно 1366/342*25,4 = 101 пикселов на дюйм (ppi), по вертикали равно примерно 768px/194мм*25,4 = 101 пикселов на дюйм (ppi).

Обычно минимальное ppi для «старых» мониторов 72 ppi (VGA). Сегодня мониторы имеют большую разрешающую способность: от 90 до 120 пикселей на дюйм

При выводе изображения на поверхность экрана изображение занимает прямоугольник определённого размера. Для оптимального размещения изображения на экране необходимо согласовывать количество точек в изображении и пропорции сторон изображения с соответствующими параметрами экрана.

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

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

При большом количестве точек, размещённом на маленькой площади, глаз не замечает мозаичности рисунка. Справедливо и обратное: малое разрешение позволит глазу заметить растр изображения («ступеньки»).

Случай 1:

Изображение больше, чем экран
Большый размер изображения при меньшем размере плоскости отображающего устройства не позволит вывести на него всё изображение, поэтому при выводе изображение будет «подгоняться», например для каждого отображаемого пиксела на экране будут усредняться цвета попадающей в него части исходного изображения (окружающих его пикселов, которые будут исключеры из отображения). Плюс: лучшее качество картинки, минус – больший размер файла изображения, и посему файл с изображением загружается медленнее.

Случай 2:

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

Для отображения картинки на экране в первом случае картинка имеет «лишние» пикселы, во втором – их явно недостает. Соответственно, в первом случае размер картинки будет больше необходимого, и удаление «лишних» пикселов, не учавствующих в отображении, почти никак не ухудшит качество ее отображения.

Для того, чтобы вывести фотографию 3000х2000 пикселей в 1:1 на экран большинства мониторов с 96ppi – понадобиться монитор с размерами: 3000 / 96 * 2,54 = 79 см по горизонтали и 2000 / 96 * 2,54 = 53 см по вертикали.

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

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

Глубина цвета

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

Монохромные изображения кодируются с помощью одномерной шкалы яркости и используют 8-битную шкалу яркости. Обычно это набор из чёрного, разных оттенков серого и белый цвет — всего 256 ступеней. Это достаточно для представления чёрно-белых фотографий или рисунков.

Для представления цвета обычно кодируют яркости красной, зелёной и синей составляющих — такое кодирование называют RGB-моделью.

8-битный «реальный» цвет — это сильно ограниченная цветовая схема в которой по 3 бита для красной (R) и зелёной (G) составляющих (по 8 возможных значений), и два оставшихся бита на пиксель для кодирования синей (B) составляющей (4 возможных значения), позволяют представить 256 (8 × 8 × 4) различных цвета. Нормальный человеческий глаз менее чувствителен к синей составляющей, чем к красной и зелёной, поэтому синяя составляющая представляется одним битом меньше.

HighColor — или HiColor разработан для представления оттенков «реальной жизни», то есть наиболее удобно воспринимаемый человеческим глазом. Такой цвет кодируется уже 15 или 16 битами.

Truecolor — 24-битное изображение еще более «приближен» к цветам «реального мира», предоставляя 16,7 миллионов различных цветов. Такие изображения наиболее «приятны» для восприятия человеческим глазом различных фотографий. 24-битный Truecolor-цвет использует по 8 бит для представления красной, синей и зелёной составляющих. Кодируется по 256 различных вариантов представления цвета для каждого канала, или всего 16 777 216 цветов (256×256×256).

«32-битный цвет» — пример неправильного употребления термина при описании глубины цвета. Заблуждением является то, что 32-битный цвет позволяет представить 2³² = 4 294 967 296 различных оттенков. На самом деле 32-битный цвет является 24-битным (Truecolor) с дополнительным 8-битным каналом, который либо заполнен нулями (никак не влияет на цвет), либо представляет собой альфа-канал, который задаёт прозрачность изображения для каждого пикселя. То есть существует 16 777 216 оттенков цветов и 256 градаций прозрачности. Причиной, по которой используют «пустой» канал, является стремление оптимизировать работу с видеопамятью, которая у многих современных компьютеров имеет 32-битную адресацию и 32-битную шину данных.

Разница «на глаз» между 24- и 32-разрядным цветом на глаз отсутствует, так как в 32-разрядном представлении 8 разрядов просто не используются, «облегчая» адресацию пикселов, но увеличивая занимаемую изображением память. А вот 16-разрядный цвет (HighColor) уже «грубее».

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

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

Основные форматы графических файлов

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

BMP один из первых графических форматов. Его распознает любая программа, работающая с графикой. Поддержка формата интегрирована в операционные системы Windows и OS/2. Из-за больших размеров графического файла формат практически не используется в Интернете.

GIF способен хранить сжатые данные без потери качества в формате до 256 цветов. Включает алгоритм сжатия без потерь информации.Изображение в формате GIF хранится построчно. Рекомендуется для хранения; изображений, создаваемых программным путем (диаграмм, графиков и так далее) и рисунков (типа аппликации) с oгpaниченным количеством цветов (до 256).

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

JPEG — наверно, самый популярний графический формат, применяемый для фото и рисунков в сети Интернет. Свою популярность JPEG заслужил благодаря гибкой возможности сжатия данных. При необходимости изображение можно сохранить с максимальным качеством. Либо сжать его с потерей качества изображения, но до минимального размера файла для передачи по сети. Файлы в формате JPEG имеют расширения .jpg, .jfif, .jpe или .jpeg.

WebP — относительно новый формат сжатия изображений с потерями и без потерь качества, предложенный компанией Google Inc. в 2010 году. Был создан, как альтернатива PNG и JPG, и отличается от них гораздо меньшим размером при том же качестве изображения.

BMP файл имеет, как правило, большие размеры, по сравнению с файлами PCX и GIF, которые в свою очередь больше JPEG файла.

Что такое DPI и чем DPI отличается от PPI

Важно! Не путайте такие понятия как количество пикселов на дюйм ppi и количество точек на дюйм dpi. Dpi – термин полиграфии, и к ppi отношения не имеет. Dpi — это разрешение печатающего устройства.

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

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

Dpi характеризует количество точек в одном дюйме (1дюйм=2,54 см) наносимых на бумагу для отрисовки одного растра (линии) изображения. То есть в данном случае уже не важно какое было разрешение самого изображения в ppi — на dpi это уже никак не влияет. Чем меньше созданная точка dpi, тем их больше поместится на 1 дюйм, тем более качественнее выглядит печать.

Растрирование изображений

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

Параметр dpi обретает смысл только в момент вывода на печать. У фотографии есть только ее абсолютное разрешение — число точек по вертикали и горизонтали.

Скажем, так, если фотография сделана камерой с матрицей в 6 мегапикселей, то её абсолютное разрешение будет 3000 х 2000 пикселей. Это все!

Возможно, у вас возникнет вопрос; а что же значит указанное в свойствах графического файла значение 72, 150 или 300 dpi?

Мой ответ — это лишь рекомендуемое разрешение при выводе изображения на печать в полностью автоматическом режиме. Это указание принтеру при печати этого изображения.

Это значение можно безболезненно поменять на любое целое положительное число — в самом изображении не изменится ничего.

Размер и разрешение изображения
Задавайте вопросы, пишите предложения и замечания в комменариях ниже.
Делитесь статьей в социальных сетях.

Удачи!
Александр Коваль

Метки: