Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

Форматы изображений для сети

Формат GIF

Формат GIF - это 8-битный формат файла, то есть изображение в этом формате может содержать максимум 256 цветов. Однако он считается стандартным, так как у пользователей сети могут быть 8-битные мониторы, на которых может отображаться максимум 256 цветов, а не тысячи и миллионы оттенков, которые делают изображение наиболее приятным для глаз. Формат GIF очень хорош для изображений, содержащих однотонные области и фигуры с четко определенными границами (рис. 23.21), например для текста (рис. 23.22).

Рис. 23.21. Изображение, подходящее для хранения в формате GIF

Рис. 23.22. Гибридное изображение, содержащее текст и области с плавным переходом цветов

Если необходимо заполнить большую область изображения градиентом и предполагается затем преобразовать файл в формат GIF, то создайте градиент в направлении сверху-вниз. Размер файлов с такими градиентами меньше, чем при использовании градиента с направлением справа-налево или диагонального градиента.

Для того чтобы сохранить изображение в формате GIF и увидеть, как оно будет смотреться в браузере, воспользуйтесь в программе Photoshop командой File & Save for Web (Файл > Сохранить для Web), либо оптимизируйте и сохраните его в программе ImageReady (см. раздел «Оптимизация изображений в формате GIF или PNG-8»).

Выбор цвета для изображения в формате GIF должен основываться на том, какие цвета действительно отображаются в палитре Web-браузера. В основном, цветовые палитры браузеров 8-битные, то есть на экране может отображаться 256 цветов. Цвета, не входящие в палитру, воспроизводятся посредством размытия (dithering), специального метода перемешивания пикселов доступных цветов для имитации других оттенков.

Для того чтобы предотвратить появление неожиданных эффектов в результате такой операции, подумайте, может, стоит оптимизировать изображение в программе ImageReady с использованием палитры Web-цветов. Или привязать к Web большую часть цветов изображения и потом в программе ImageReady вручную заменить на Web-цвета окраску однотонных областей. Подробнее эти методы рассматриваются далее. Замена цвета особенно важна для однотонных областей. Для более точного управления операцией размытия и уменьшения количества используемых цветов можно применить метод взвешенной оптимизации (см. раздел «Применение взвешенной оптимизации»).

Глубина цвета

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

В 8-битном изображении можно сократить количество цветов с исходных 256 цветов при помощи диалогового окна Indexed Color в программе Photoshop (устаревший способ), диалогового окна Save for Web (Сохранить для Web) в программе Photoshop 7 (лучше) или палитры Optimize (Оптимизация) в программе ImageReady (самый эффективный способ). Последние два способа позволяют предварительно просмотреть изображение с меньшим количеством цветов.

Всегда предварительно просматривайте изображение в масштабе 100%, чтобы оценить качество цвета.

Данные о зависимости количества цветов и глубины цвета приведены в табл. 23.1.

Таблица 23.1. Глубина цвета

Рис. 23.23. Изображение, пригодное для хранения в формате JPEG

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

Рис. 23.25. То же изображение в формате GIF

Формат JPEG

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

Преимущество формата JPEG заключается в том, что он сжимает 24-битное изображение так же эффективно, как формат GIF сжимает 8-битное.

Недостатки JPEG состоят в следующем:

1. JPEG-файл нужно распаковывать при просмотре Web-страницы, что требует времени.
2. JPEG - не самый лучший вариант для изображений, содержащих однотонные области или текст, так как подобный метод сжатия вносит искажения на четко определенных границах изображений такого сорта (рис. 23.24-23.25).
3. Не все пользователи сети используют 24-битное отражение цветов. JPEG-изображение будет искажено на 8-битном мониторе. При этом размытие изображения с плавными переходами цвета будет менее заметно, чем в случае изображения, содержащего однотонные области с отчетливыми границами. Можно уменьшить глубину цвета до 8 бит, чтобы предварительно просмотреть изображение в таком виде, либо просто воспользоваться командой View > Preview > Browser Dither (Вид > Предварительный просмотр > Размытие в браузере) в программе ImageReady. Если в изображении нет текста или объектов с четкими границами, возможно, JPEG-файл и «выживет» при переключении на 8-битный цвет.

Файлы в формате JPEG могут быть оптимизированы с использованием формата Progressive JPEG, поддерживаемого браузерами Nestcape Navigator и Internet Explorer (версия 4.0 и выше). При загрузке на Web-страницу картинки и в таком формате детализация изображения увеличивается постепенно.

Если выбран формат JPEG, то можно поэкспериментировать с оптимизацией изображения в программе ImageReady или в диалоговом окне Save for Web (Сохранить для Web) программы Photoshop. Затем, выбрав опцию 4-Up (4 варианта), можно предварительно просмотреть несколько версий изображения с различной степенью сжатия. Подумайте, какая степень уплотнения наиболее приемлема, сопоставив размер файла с качеством изображения. В программе ImageReady можно сохранить оптимизированный файл отдельно и при этом оставить нетронутым исходное изображение для дальнейшего использования.

Каждый раз при оптимизации изображения с помощью формата JPEG теряется некоторая часть данных. Чем выше степень сжатия, тем больше информации утрачивается. Чтобы предотвратить это, сначала отредактируйте и сохраните изображение в программе Photoshop. Затем перейдите в программу ImageReady, при желании выполните дальнейшее редактирование, оптимизируйте файл и, наконец, воспользуйтесь командой File > Save Optimized (Файл > Сохранить с оптимизацией), чтобы сохранить файл в формате JPEG.

Размытие

Размытие (dithering) - перемешивание двух цветов из палитры для имитации третьего.

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

Зачастую результат размытия изображений с однотонными фигурами получается не слишком эстетичным. Это происходит вследствие того, что палитра браузера смешивает пикселы, чтобы воссоздать отсутствующий в ней цвет. Для таких изображений лучше создавать цвета в программах Photoshop или ImageReady с помощью ползунков, а также панели выбора Web-цветов на палитре Color (Цвет). Однотонные области должны быть выделены, а их цвета заменены на ближайшие Web-цвета.

На изображениях с плавным переходом цветов уже имеются участки, где смешаны пикселы. Некоторые картинки очень хорошо смотрятся на Web-страничке без дополнительного размытия и всего с 256 цветами. Однако чем меньше элементов в палитре изображения с плавным переходом цветов, тем больше будет видно «швов» при переходе от одного цвета к другому. Степень размытия можно выбрать в программе ImageReady или в диалоговом окне Save for Web (Сохранить для Web) программы Photoshop 7. Чем больше эта величина, тем менее заметной будет граница при переходе цветов, но более заметными будут отдельные точки на изображении (рис. 23.26-23.27). Подумайте, какое из двух зол, на ваш взгляд, меньшее.

Рис. 23.26. Увеличенное изображение при небольшой величине размытия

Рис. 23.27. То же изображение с более высокой степенью размытия

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

Сглаживание

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

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

Если выделить некоторую область при включенной опции сглаживания, то вместе с объектом выделятся и точки фона, расположенные рядом с границей изображения. Если скопировать и вставить такую область в изображение, расположив ее на однотонном фоне, то станет видна окантовка из присоединенных точек. Чтобы этого не случилось, прежде чем выделять область, снимите флажок Anti-aliased (Сглаживание) на панели опций инструментов выделения, Lasso (Лассо) или Magic Wand (Волшебная палочка).

Также можно воспользоваться опцией Matte (Кайма) на палитре Optimize (Оптимизация) программы ImageReady, чтобы указать, каким образом будут интерпретироваться частично прозрачные точки (те точки, которые появляются при сглаживании) в форматах GIF и JPEG. Обе программы Photoshop и ImageReady позволяют контролировать степень сглаживания текста. Можно активизировать эту опцию и сохранять ее при переносе файла из одной программы в другую. Новые средства управления каймой и сглаживанием позволяют удалить нежелательные ореолы вокруг изображений.

Для того чтобы выделить изображение в слое, не выделяя при этом полупрозрачных точек, расположенных на границе объекта, нажмите клавишу Ctrl и щелкните по имени слоя. Затем выполните команды Select > Modify > Contract (Выделить > Изменить > Уменьшить), чтобы ужать выделение на один пиксел.

Окно Save for Web в программе Photoshop

Многие средства оптимизации файлов объединены в диалоговом окне File > Save for Web (Файл > Сохранить для Web) программы Photoshop (рис. 23.28). В верхней части главного окна имеются четыре вкладки для предварительного просмотра: Original (Исходное изображение), Optimized (Оптимизированное изображение), 2-Up (Два варианта) и 4-Up (4 варианта). Кроме того, в этом окне расположены таблица цветов и средства управления форматом, каймой, качеством изображения и др. Также имеется меню Preview (Предварительный просмотр) и кнопка Preview in [browser] (Предварительный просмотр в [браузер]). В этой главе основное внимание уделено оптимизации

Рис. 23.28. Диалоговое окно Save for Web программы Photoshop

изображений в программе ImageReady, но те же операции можно произвести эквивалентными средствами и в диалоговом окне Save for Web (Сохранить для Web) программы Photoshop. Подробнее об этом диалоговом окне рассказано в разделе «Диалоговое окно Save for Web в программе Photoshop» настоящего учебника.