Web-дизайн. Статьи.

Оптимизация изображений в формате JPG

Mike Melnikov (cherry-design@mail.ru)
Web-studio "Cherry-Design"

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

Данный формат хранит изображения c цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. У него не так уж много способов оптимизации, точнее сказать, - один: выбрать оптимальный коэффициент сжатия.

Для осуществления такой оптимизации нужен графический пакет или утилита, которые позволяют нам регулировать степень сжатия изображения. К сожалению, PhotoShop в базовой конфигурации не позволяет нам свободно регулировать степень сжатия (он предлагает несколько фиксированных значений). Правда, для него можно найти модули, специально подключаемые для осуществления данной операции. Для оптимизации графики лучше воспользоваться программами типа PhotoPaint или PaintShopPro. В этих программах возможно регулирование степени сжатия либо заданием процента потерь, либо заданием значения качества от 0 до 255.

Как определить оптимальную степень сжатия?

Для этого нужно сохранить фотографию при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть ее. Критерием потери качества будут так называемые "дрожащие контуры", наиболее заметные в местах контрастных переходов, и появление пятен в областях с плавными переходами (см. рисунок). Тот коэффициент сжатия, при котором искажения еще не видны, но с увеличением его (коэффициента) на одну ступеньку становятся заметными, и будет оптимальным. Размер файла при таком разрешении будет минимальным и без потери качества.

Если такую операцию проводить с каждой фотографией, то это может занять слишком много времени. Но есть выход - все фотографии можно подразделить на некоторые подтипы (например: черно-белые фотографии, тонированные фотографии, пейзажи и т.д.) и к каждому подтипу подобрать свой оптимальный коэффициент. Впоследствии можно просто применять ранее найденный коэффициент ко всем подобным фотографиям. Ниже представлены две одинаковые фотографии, но только с разной степенью коэффициента сжатия JPG. Слева - фотография, записанная в PhotoShop 5.0 со степенью сжатия 3 (не оптимизированная), а правая оптимизирована при помощи Ulead SmartSaver Pro. Обратите внимание на размеры фотографий: они различаются в три раза (при одинаковом качестве изображения).

Использование прогрессивной развертки

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

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