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

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

Подготовить изображение для размещения в интернете означает подобрать подходящий формат и свойства файла: качество ЖПЕГ-сжатия, режим чересстрочного вывода ГИФ и т.п. Если при этом используется индексированный цвет, может потребоваться коррекция цветовой палитры — чтобы свести к минимуму нежелательные эффекты смешения. Настройка этих параметров для получения приемлемого качества файла и времени его загрузки на веб-странице с учетом средней скорости соединения и называется оптимизацией изображения. В графических редакторах, таких как Photoshop и Illustrator, команда для такой оптимизации называется Save for Web… (Сохранить для веб...).

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

Наконец, для файловых форматов с индексированием цвета (ГИФ и ПНГ-8) приводится индекс цвета в палитре. Слева от данных о цвете находится поле, в котором вводится коэффициент увеличения.

 

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

Параметры оптимизации

Проще всего выбрать стандартную заготовку из списка Settings (Параметры). Набор элементов управления изменится в зависимости от выбранного формата файла — например, для ГИФ это число цветов в палитре.

Максимальное количество цветов (256) в заготовках не используется, так как считается, что после 128 цветов добавление к пикселю еще одного бита не приводит к заметному улучшению качества изображения.

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

Оптимизация форматов ГИФ и ПНГ

Больше всего параметров у формата ГИФ. Первый из них (слева направо, в верхней строке) — это значение от 0 до 100, соответствующее объему потерь при сжатии изображения. Конечно, это удивляет — ведь ГИФ-файлы сжимаются по алгоритму без потерь. Но уже стало общепринятой практикой предоставлять пользователю возможность отбросить некоторую часть информации, прежде чем применять LZW-алгоритм,— таким образом повышается эффективность сжатия. Поскольку отброшенная информация не восстанавливается, получаем комбинированную процедуру сжатия с потерями. Но даже при небольшом уровне потерь (менее 10) размер файла может ощутимо сократиться без заметного изменения качества изображения. А вот при больших потерях получаются неприглядные артефакты.

Объем потерь указывается непосредственно в поле Lossy (Потери) или на шкале, которая появляется, если навести курсор на треугольник рядом с этим полем и некоторое время удерживать кнопку мыши нажатой.

Вторая строка параметров используется для выбора цветовой палитры. Из расположенного слева раскрывающегося списка выбирается способ ее построения. В основной набор входят Perceptual (Перцепционная), Selective (Избирательная), Adaptive (Адаптивная — то есть построенная из цветов исходного изображения) и Web (фиксированный набор веб-безопасных цветов). В Photoshop предусмотрено несколько дополнительных фиксированных палитр: системные палитры MacOS и Windows, а также черно-белая (один бит на цвет) и палитра серых полутонов.

Первые три способа построения палитр различаются цветовыми приоритетами в изображении. В перцепционном методе приоритеты определяются чувствительностью человеческого глаза к различным цветам: чем лучше мы воспринимаем цвет, тем выше его приоритет. В избирательном алгоритме (предлагаемом по умолчанию) предпочтение отдается областям однородного цвета и веб-безопасным цветам. Этот алгоритм создавался с расчетом на ГИФ-сжатие и возможности браузеров. В адаптивном методе приоритет цвета определяется интенсивностью его использования в данном изображении.

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

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

Чтобы увидеть, насколько браузер исказит изображение, выберите из упомянутого раскрывающегося списка или же на правой панели диалогового окна Save for Web (Сохранить для Web) режим Browser Dither (Смешение браузера), а в ImageReady — команду View — Preview — Browser Dither (Вид — Просмотр — Смешение браузера).

В первом режиме, No Dither (Без смешения), не предпринимается никаких попыток смешения — эта операция целиком возлагается на браузер, что может привести к постеризации. В режиме Pattern (Узор) смешение напоминает традиционное полутоновое растрирование, используемое в печати для получения большого количества цветов из ограниченного набора чернил. В веб-изображениях регулярные узоры обычно получаются слишком явными. В режимах Diffusion (Диффузия) и Noise (Шум) вносится элемент случайности, отчего смешение становится менее заметным. Если изображение разбито на фрагменты для отдельной загрузки, в режиме Diffusion (Диффузия) между такими фрагментами иногда образуются видимые края; в режиме Noise (Шум) этого не наблюдается. Для режима Diffusion (Диффузия) указывается интенсивность диффузии в процентах — это значение либо вводится непосредственно, либо выбирается на шкале, которая появляется по щелчку на расположенной рядом треугольной стрелке.

Следующие два параметра предназначены для прозрачных областей изображения. Если включить режим Transparency (Прозрачность), прозрачным областям будет назначен цвет, который в палитре ГИФ соответствует прозрачности. Другими словами, те области изображения, которые в Photoshop были прозрачными, такими и останутся — так что сквозь ГИФ-файл, размещенный на веб-странице, будет проступать фон. Вместо этого в поле Matte (Маска) можно выбрать цвет, которым будут заполняться полностью прозрачные области.

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

В раскрывающемся списке Matte (Маска) предлагаются следующие режимы: None (Нет) — где цвет маски отсутствует; Eyedropper Color (Цвет пипетки), где цвет маски соответствует последнему выделению, сделанному инструментом "пипетка" с мини-панели инструментов; White (Белый); Black (Черный); Other… (Другой...), когда выводится окно цветоподборщика.

Если в созданном вами простом изображении нет прозрачных областей, скопируйте его и создайте такие области в Photoshop с помощью ластика, включив режим сглаживания краев. Вернитесь в диалоговое окно Save for Web (Сохранить для Web), выберите тип файла ГИФ и просмотрите изображение в браузере. Поэкспериментируйте с различными цветами маски, просматривая результаты.

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

Параметры формата ПНГ-8 идентичны ГИФ, за исключением того что там не предусмотрено сжатие с потерями. У формата ПНГ-24 параметров меньше всего — и они самые простые: переключатели чересстрочного вывода и прозрачности, а также поле для выбора цвета маски.

Оптимизация ЖПЕГ

Природа ЖПЕГ-изображений коренным образом отличается от изображений ГИФ и ПНГ, поэтому и параметры оптимизации у них другие. Здесь тоже есть поле выбора цвета маски, но, поскольку в формате ЖПЕГ прозрачность не поддерживается, этим цветом заполняются только прозрачные области — если выбрать режим None (Нет), то происходит заполнение белым цветом. Кроме того, здесь предусмотрен переключатель прогрессивной загрузки, подобной описанному выше чересстрочному выводу. Остальные параметры ЖПЕГ определяются характерными свойствами этого формата.

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

Есть три способа выбора качества. Самый простой — выбрать один из вариантов в предлагаемом списке: Low (Низкое), Medium (Среднее), High (Высокое) или Maximum (Максимальное). Более точная градация зачастую практически не дает видимого эффекта. Но при желании можно ввести числовое значение в поле Quality (Качество) или подобрать его на шкале, щелкнув на расположенной рядом треугольной стрелке.

Над полем Quality (Качество) есть переключатель с интригующей надписью Optimized (Оптимизированный). Этот параметр означает дополнительное сжатие ЖПЕГ-файла с использованием еще одного свойства этого стандарта. Однако не все браузеры способны восстановить такое изображение, поэтому иногда от этого режима отказываются из соображений совместимости.

Под полем Quality (Качество) находится еще одно поле ввода со шкалой для настройки размытия по Гауссу, применяемого к изображению перед сжатием. Благодаря размытию уменьшается влияние артефактов, возникающих при высоких уровнях ЖПЕГ-сжатия. При размещении изображений в Web размытие применяется постоянно, хотя изображение при этом, как и следовало ожидать, может несколько расплываться.

В ЖПЕГ-файлы можно включать цветовые профили ICC (International Color Consortium), используемые программным обеспечением, предназначенным для управления цветом,— например Apple ColorSync. В цветовой профиль записываются свойства устройства, на котором было создано изображение (такие как гамма монитора) — браузер, поддерживающий цветовые профили, учитывает их при отображении на устройстве с другими характеристиками. Для того чтобы встроить цветовой профиль в ЖПЕГ-файл, нужно активировать переключатель ICC Profile (ICC-профиль). Однако следует учитывать, что это возможно только если профиль был сохранен в исходном формате изображения.

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

Если вы заметите, что многократно используете одни и те же значения, можете сохранить их в виде заготовки, добавив ее к стандартным вариантам, представленным в раскрывающемся списке Settings (Параметры). Для этого нужно выбрать команду Save Settings… (Сохранить параметры...) из меню палитры Optimize (Оптимизировать) в ImageReady или ее эквивалент в диалоговом окне Save for Web (Сохранить для Web). Поскольку такие заготовки сохраняются в обычных файлах, откроется окно сохранения файла — и вам останется только назначить имя выбранной группе значений. Под этим именем она появится в раскрывающемся списке Settings (Параметры). Если впоследствии вы решите, что эта заготовка больше не нужна, вы сможете удалить ее с помощью команды Delete Settings (Удалить параметры) из меню палитры. По этой команде удаляется заготовка, выделенная в данный момент.

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

Автор: Елена Полонская
Источник: www.cpp.com.ua

Как увеличить эффективность сайта с помощью поисковой формы

12-10-2009

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

Идеальная навигация

12-10-2009

Все идеальное недостижимо. Но представив себе идеальную навигацию по сайту и выделив ее основные свойства, можно сделать интересные выводы... подробнее Комментарии: 0 Кол. просмотров: общее - 1270 сегодня - 0

Web-дизайн и кодировки

08-10-2009

Кодировкой веб-страницы называется способ кодирования текстовой информации для передачи в сети Интернет. Определяющим параметром при кодировании данных считается количество битов, с помощью которых передается один символ (значение)... подробнее Комментарии: 0 Кол. просмотров: общее - 1065 сегодня - 0

Графика: советы для начинающих

20-09-2009

Существует ряд стандартных ошибок, совершаемых начинающими веб-мастерами при работе с графикой. Чтобы не повторять их, следуйте приведенным ниже рекомендациям... подробнее Комментарии: 0 Кол. просмотров: общее - 1691 сегодня - 0

Точечные и векторные изображения: сравнительный анализ

20-09-2009

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