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

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

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

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

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

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

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

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

Прогрессивная развертка, или прогрессивное сканирование (progressive scan) , является специальной системой формирования выводимого на экран телевизора или панели видеоизображения, при которой каждая строка изображения передается одна за другой. Как правило, этот режим воспроизведения сигнала противопоставляют традиционному чересстрочному (interlace). Мы также не будем оригинальными и отметим, что в отличие от системы формирования изображения, имеющейся у старых и ряда нынешних телевизоров, у которых дисплей способен воспроизводить 25 кадров в секунду (сначала четные строки, затем нечетные), прогрессивное сканирование предполагает передачу с частотой 50 кадров в секунду.

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

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


Valid XHTML 1.0 Transitional Правильный CSS! Rambler's Top100 Яндекс цитирования