Оптимизация изображений для сайта -

в чем суть и почему dpi не имеет смысла для хранимых изображений

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

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

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

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

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

Размер страницы — сума размеров всех загружаемых файтов (текста, изображений, служебных скриптов) и он измеряеться в килобайтах (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.

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

Маленькое отступление от темы, в котором проясняется, чем 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?

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

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

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

Содержание

  • Зачем нужна оптимизация изображений для сайта?
  • В чем проблема оптимизации изображений для блогера?
  • Что влияет на размер файла при представлении изображений
    • Размер изображений
    • Глубина цвета
    • Основные форматы графических файлов
  • Чем DPI отличается от PPI
Метки: ,