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

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

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

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

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

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

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

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

• размер изображения,
• глубина его цветности
• формат файла.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Промежуточный вывод

Для отображения картинки на экране в первом случае картинка имеет «лишние» пиксели, во втором случае – пикселей явно недостает.

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

Для того, чтобы вывести фотографию 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 файл имеет, как правило, большие размеры, по сравнению с файлами PCX и GIF, которые в свою очередь больше JPEG файла.

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

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

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

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

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

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