Среда, 08.01.2025, 20:17
Главная Регистрация RSS поиск
Приветствую Вас, Гость
Меню сайта
Категории раздела
HTML [44]
Visual C++ и MFC [21]
c++ [78]
php [19]
Javascript [15]
C# [51]
загрузки [0]
XNA [10]
создание игр с помощью xna
Наш опрос
Каким языком программирования вы увлекаетесь
Всего ответов: 2420
Статистика

Онлайн всего: 2
Гостей: 2
Пользователей: 0
Реклама
Главная » Статьи » HTML

3.2 Оптимизация графики в Photoshop.

Безусловно, изображение можно сохранить, используя команду "File\Save As..." и выбрав соответствующий формат (GIF, PNG или JPG). Однако не все диалоги команд сохранения дают возможность оценить размер получаемого при тех или иных значениях параметров файла, и ни одна из них не позволяет провести анализ изображений разных графических форматов по отношению друг к другу. То есть, нет возможности проверить, каково оптимальное соотношение "размер - качество" для разных графических форматов.

Именно всилу указанных причин в Photoshop введен специальный модуль Save For Web - "Сохранить для Web" (команда "File\Save For Web..."). Этот модуль позволяет в одном окне просматривать одновременно до четырех вариантов изображения, получаемых путем выбора альтернативных значений параметров одного и того же формата, или выбора различных графических форматов для разных вариантов.

Ниже показан внешний вид окна Save For Web...:


Рис. №3.2.1. Вид окна Save For Web... (варианты формата GIF)

Под каждым вариантом изображения имеется область, в которую выводится наиболее важная информация о изображении. В частности, слева выводится информация о размере файла и скорости загрузки его по сети. В изображении выше, скорость расчитанна для пропускной способности канала связи 28.8 Kbps (килобит в секунду). Пропускную способность канала связи можно выбрать, щелкнув правой кнопкой мыши на варианте изображения:


Рис. №3.2.2. Меню выбора пропускной способности канала

При этом, пропускная способность канала изменится для всех вариантов изображения.

Теперь зассмотрим возможности модуля Save For Web, касающиеся сохранения в различные графические форматы. Среди четырех поддерживаемых форматов (GIF, JPEG, PNG в 2х вариантах и WBMP) нас будут интересовать только первые три: GIF, JPEG, PNG. Формат WBMP позволяет хранить только черно/белые изображения (режим Bitmap). Выбор требуемого формата для каждой вариации изображения осуществляется с помощью раскрывающегося списка "Формат файла" (см. рис.3.2.1). При выборе формата меняется состав элементов управления в области, отмеченной на рис.3.2.1 красной рамкой.

Рассмотрим основные параметры каждого формата в отдельности.

Формат GIF

Ниже представленны параметры сохранения в формат GIF:


Рис. №3.2.3. Параметры сохранения в формат GIF

Наиболее важным параметром графического формата GIF является тип палитры и количество используемых в ней цветов. Наиболее популярной является палитра "Selective". Количество цветов для ряда таблиц (Selective, Adaptive, ...) можно регулировать параметром Colors. Требуемое количество цветов устанавливается либо выбором из списка, либо непосредственным вводом значения. При этом можно наблюдать изменение цветовой таблицы ниже (вкладка Color Table).

Еще одним довольно интересным параметром является Dither - алгоритм смешивания светов пикселей в изображении. Использование Dither позволяет получить более плавные переходы цвета при малом количестве цветов. Рассмотрим следующее изображение:


Рис. №3.2.4. Использование Dither

Рисунок справа использует Dither "Diffusion" (взаимопроникновение), amount = 100%. Левое изображение смешивания не использует. При одинаковом количестве цветов (32 цвета) правое изображение выглядит куда более привлекательно! При этом, обратите внимание, размер правого изображения несколько увеличился.

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

Формат JPEG

Ниже представленны параметры сохранения в формат GIF:


Рис. №3.2.5. Параметры сохранения в формат JPEG

Формат JPEG является первым из графических форматов, реализовавших сжатие с потерями качества. При сохранении в JPEG необходимо выбирать наиболее приемлимый по соотношению "размер - качество" вариант. Таким образом, наиболее важным параметром для JPEG файла является "Качество" (Quality). Качество изображения можно регулировать грубо при помощи выпадающего списка (Low - низкое, Medium - среднее, High - высокое и т.д.) или числом от 0 до 100, где 0 - наименьшее качество, 100 - максимальное качество. При меньших значениях качества, соответственно, получается меньший размер файла.

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


Рис. №3.2.6. Сравнение JPEG и GIF для сжатия малоцветных изображений

Верхнее изображение на рис. 3.2.6 использует сжатие JPEG. Даже при среднем показателе качества (Quality=30) размер файла получается более чем в 2 раза больше, чем у GIF. При этом, "грязь" вокруг текста все еще можно заметить.

PNG-8 и PNG-24

Формат PNG-8 обладает теми же самыми параметрами, что и GIF (см. выше)

Формат PNG-24 является новейшим веянием в web-графике. Его отличительной особенностью является поддержка 8-битного канала прозрачности. К слову, не каждый браузер корректно отображает изображения PNG-24 (Opera и Firefox поддерживают, MSIE - нет). Однако, мне кажется, это дело времени.

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

Категория: HTML | Добавил: slava (18.07.2009)
Просмотров: 1337 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]