Оптимизация JPEG, 8-пиксельная сетка
JPEG — самый распространенный и удобный формат для размещения фотореалистичных изображений на сайте. Все (кому надо) знают, что изображение в формате JPEG состроит из набора блоков размером 8х8 пикселей. Как это знание может помочь при оптимизации изображений? Рассмотрим на наглядном примере:
32х32 пикселя, 596 байт, низкое качество (высокое сжатие)
Оба белых квадрата — одинакового размера, 8х8 пикселей. При этом нижний испорчен артефактами, а верхний просто белый. Как это произошло? Посмотрим на изображение со включенной сеткой в 4 пикселя.
Верхний квадрат попадает точно в сетку — его левый верхний угол расположен в 8 пикселях от левой и от верхней граней изображения.
При сохранении изображения, каждый блок 8х8 оптимизируется отдельно. Нижний квадрат попал сразу в 4 блока, в каждом из которых есть белые и черные пиксели. Процесс оптимизации усреднил изображение, поэтому а этих блоках появился серый мусор.
При оптимизации реальных изображений надо стараться сделать так, чтобы ярко выраженные вертикали и горизонтали в изображении совпадали с гранями 8-пиксельной сетки. Это сделает изображение более аккуратным и уменьшит размер файла.
В статье на SmashingMagazine есть еще несколько советов по оптимизации JPEG-изображений.
Оставить комментарий