Оптимизация Web-графики

Оптимизация Web-графики


Светлана Шляхтина

Форматы сжатия файлов

Автоматическая оптимизация по размеру файла

Оптимизация в форматах JPEG или PNG-24

Оптимизация в формате GIF и PNG-8

Взвешенная оптимизация

Оптимизация фрагментов

Сохранение параметров оптимизации

Графическая информация передается намного медленнее текстовой, а время загрузки изображений пропорционально размеру их графических файлов. Поэтому для быстрой загрузки Web-страниц требуется небольшой размер внедренных в них графических изображений, что достигается за счет их оптимизации. Под оптимизацией изображения понимают его преобразование, обеспечивающее минимальный размер файла при сохранении необходимого в данном конкретном случае качества изображения. В целом оптимизация достигается за счет уменьшения количества цветов в графических изображениях, использования сжатых и специальных форматов файлов и оптимизации параметров сжатия для отдельных фрагментов изображений. Основная задача оптимизации — найти удачный компромисс между скоростью загрузки страницы и качеством представленных на ней изображений.

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

Параметры оптимизации задаются в специализированной палитре Optimize (Оптимизация), открывающейся командой Window > Optimize (Окно > Оптимизация). Изменение параметров ведет к мгновенному изменению изображения, демонстрируемого в окне просмотра. Палитра Optimize может быть открыта в сокращенном или полном варианте. Выбор варианта осуществляется во всплывающем меню, вызываемом щелчком на треугольной стрелке в правом верхнем меню палитры и командами Hide Options (Скрыть опции) или Show Options (Показать опции) (рис. 1).






Рис. 1. Изменение варианта представления палитры Optimize

Для оценки качества оптимизации предумотрено два режима предварительного просмотра изображений:

• 2-Up (2 варианта) ? одновременный просмотр оригинала и оптимизированного в соответствии с настройками палитры Optimize изображения (рис. 2);

• 4-Up (4 варианта) ? в этом режиме область просмотра делится на четыре окна (рис. 3) для отображения исходного изображения и трех версий оптимизированного: первая версия создается на основе значений палитры Optimize, а две другие являются вариантами текущих настроек оптимизации.



Рис. 2. Окно просмотра изображения в режиме 2-Uр



Рис. 3. Окно просмотра изображения в режиме 4-Uр

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

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



Рис. 4. Определение информации, отображаемой в строке состояния


Содержание раздела