Оптимизация изображений для WWW: разные форматы — разные подходы

Основное место в окне занимает панель со вкладками, где отражается оптимизируемое изображение. На вкладке Original (Исходный вид) изображение выводится в том виде, в каком оно было создано; на вкладке Optimized (Оптимизированный вид) — так, как оно станет выглядеть при сохранении с выбранными параметрами. Для оценки степени сжатия и смешения как правило приходится по некоторое количество раз переходить от одной вкладки к другой. Как правило, удобнее применить вкладку 2-up (Два вида), где вблизи отображаются исходная и оптимизированная версии (или две оптимизированные). Вкладка 4-up (Четыре вида) разделена на 4 части — и чудак можно сопоставлять с тремя оптимизированными версиями.

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

Для последней испытания оптимизированное изображение лучше просмотреть непосредственно в браузере. Для этого надо щелкнуть на пиктограмме браузера, расположенной в нижнем правом углу области просмотра диалогового окна Save for Web (Сохранить для Web). При данном запускается используемый по умолчанию браузер, и изображение загружается в том виде, как оно станет выглядеть на веб-странице. (Для этой операции формируется временная веб-страница, на которой, помимо изображения, приводятся ещё и кое-какие сведения о параметрах оптимизации и HTML-коде, используемом для размещения изображения.) в случае если же на компьютере установлено некоторое количество браузеров — а собственно так поступает основная масса профессиональных веб-разработчиков — с пиктограммой станет связан раскрывающийся список, из которого можно избрать нужный браузер.

Считается неплохой практикой вероятность просмотра веб-страниц в как можно большем численности браузеров — потому разработчику еще желательно просмотреть страницу на как можно большем численности платформ.

Размер оптимизируемого изображения также можно поменять — пожалуй, это единый способ свести к минимуму геометрические габариты при сжатии. На вкладке Image Size (Размер изображения), расположенной в нижнем правом углу диалогового окна Save for Web (Сохранить для Web), можно избрать новый величина изображения, указав его высоту и ширину или в безусловных единицах, или в процентах. В Photoshop можно избрать метод интерполяции изображения: Smooth (Плавно) или же Jagged (Резко) — в полном диалоговом окне перемены размера Photoshop они соответствуют бикубической интерполяции и интерполяции по соседним пикселям. В Illustrator вопрос интерполяции не стоит, так как меняются размеры векторного оригинала.

Слева от панели просмотра изображений, в диалоговом окне Save for Web (Сохранить для Web), располагаться своеобразная мини-панель инструментов. В Illustrator таких инструментов всего три: "рука" для перемещения изображения в окне, в случае если в избранном масштабе оно не помещается на панели целиком; "лупа" для увеличения (выбрать инструмент и щелкнуть на изображении) и уменьшения масштаба (те же деяния — но при нажатой клавише Alt); "пипетка" для подбора цвета.

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

Наконец, для файловых форматов с индексированием цвета (GIF и PNG-8) приводится индекс цвета в палитре. Слева от данных о цвете располагаться поле, в котором вводится коэффициент увеличения.

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