Параметры формата JPEG

JPEG в анфас и в профиль

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

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

• Прозрачные области;
  
• Анимация;
  
• Наличие в рисунке не более 256 цветов палитры RGB;
  
• Применение при создании рисунка режимов Grayscale (Оттенки серого) или Indexed Color (Индексированный цвет);
  

Вполне логично заключить, что в формат JPEG разумно сохранять всю ту графику, которая не попала под вышеозначенное описание.

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

Сохранение в формат "JPEG"

Итак, при попытке сохранить JPEG-картинку на экране появляется диалог "JPEG Options" ("Настройки JPEG").

Диалог "JPEG Options" ("Настройки JPEG")

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

• Matte (Кайма). Напрашивается второе название - "Имитация прозрачности". Доступна только при наличии в картинке прозрачных областей. Следует помнить, что формат JPEG в плане поддержки прозрачности - полная противоположность GIF'у. Поэтому придется указать программе, каким цветом залить данные области. Цвет заливки выбирается из выпадающего списка;
  
• Image Options (Настройки изображения). Осуществляются при помощи изменения параметра "Quality" ("Качество"). Таким способом мы задаем степень сжатия картинки. Чем меньше цифра, тем меньше вес картинки и хуже ее качество. И наоборот. Как правило, наиболее удачным значением "Quality" является "7" или около того. Но все-таки лучше подбирать ее конкретно для каждого редактируемого изображения. В помощь нам в окне изображения показывается, как сжатие влияет на редактируемый рисунок. Если перевести указатель мыши на это окно, он примет форму руки, и вы сможете перетаскивать картинку, оценивая качество ее отдельных областей. Щелчок мыши с нажатой клавишей "Ctrl" увеличивает картинку, а при нажатой "Alt", наоборот, уменьшает;
  
• Format Options (Настройки формата). Почти все браузеры способны отображать две вариации формата JPEG: базовый и прогрессивный (расширенный). Базовый, или последовательно отображаемый формат, строит изображение способом построчного вывода на экран. Прогрессивный же делает это за несколько проходов.
  
  
  
  • Baseline Optimized (Оптимизированный базовый) не похож на Baseline Standart (Базовый стандартный) применением усовершенствованного метода кодирования Хаффмана, позволяющим сократить размер конечного файла на 5-10%;
    
  • При активации Progressive (Расширенный) сохраненная с применением данной опции картинка будет загружаться не построчно, а за несколько проходов. В каждый из них будет выводится полное изображения, улучшаясь от прохода к проходу.
    
    
    
    • Опция Scans (Сканирование) определяет количество проходов. Чем больше ее значение, тем меньше будет размер конечного файла;
      
    
    
    
  
  
  
• Size (Размер). В данном блоке вы можете получить представление о размере конечного файла перед его сохранением. Из выпадающего списка вам предоставляется выбрать скорость передачи данных. Около списка показано время, в течение которого изображение загрузится на компьютер пользователя. В случае, если показанное количество секунд (минут? не пугайте меня!!!) вас не устраивает, остается только понизить значение опции "Quality" ("Качество"). Советую указать среднюю скорость. Ведь, ориентируясь только на "LANщиков", можно лишиться довольно большого процента посетителей. Чрезмерное уменьшение размера конечного файла тоже не всегда разумное решение.
  

Сохранение для WEB

Осуществляется диалогом "Save For Web" ("Сохранить для Web..."), вызываемого командой "File -> Save For Web..." ("Файл -> Сохранить для Web"). Основные преимущества данного диалога в доступном предварительном просмотре изображения и автоматическом генерировании HTML-кода, предназначенного для включение изображения в web-страницу. Диалог "Save For Web" ("Сохранить для Web") дает возможность сопоставить между собой несколько групп параметров и избрать наиболее оптимальную из них в плане соотношения качества изображения и его размера. К примеру, можно сопоставить несколько индексированных палитр цветов, параметров JPEG-сжатия, форматов GIF и JPEG. Наряду с этим исходное изображение останется нетронутым, и вы в любой момент сможете вернуться к нему.

Используя данный диалог, вы сможете осуществить индексацию цветов, установить прозрачность и сохранить изображение в формате GIF или JPEG. И все это за одну операцию. "Save For Web" ("Сохранить для Web") объединяет в себе функционал таких инструментов, как диалоги "Indexed Color" ("Индексированные цвета") и "Color Table" ("Таблица цветов").

"Save For Web" ("Сохранить для Web") объединяет в себе функционал таких инструментов,
как диалоги

"Indexed Color" ("Индексированные цвета") и "Color Table" ("Таблица цветов")

Рассмотрим состав и функциональные возможности закладок, меню и инструментов диалога "Save For Web" ("Сохранить для Web").

Основную его часть составляет область просмотра. Пользуясь четырьмя закладками, мы можем настроить такие способы отображения:

• Original (Оригинал). Показ оригинального изображения без воздействия изменений;
  
• Optimized (Оптимизированное). Показ оптимизированного изображения;
  
• 2-Up (2 вида). Показ оригинала и одного из его оптимизированных копий;
  
• 4-Up (4 вида). В отличии от предыдущего выводиться 3 копии, а не одна. Является самым наглядным способом отображения;
  

В левой части данного окна мы видим группу кнопки управления свойствами инструментов и, собственно, сами инструменты: "Hand ("Рука"), "Slice Select" ("Выбор фрагмента"), "Zoom" ("Лупа") и "Eyedropper" ("Пипетка").

В правом верхнем углу области просмотра мы видим кнопку меню предварительного просмотра, которое содержит три группы команд.

Меню предварительного просмотра содержит три группы команд

Первая содержит команду "Browser Dither" ("Результат сглаживания"), связанную с флажком "Web Snap" ("Цвета для Web") и позволяющую взглянуть на поведение редактируемого изображения на 8-битовом мониторе.

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

И, наконец, в третьей группе указывается скорость загрузки, с которой будет грузиться редактируемое изображение на компьютер пользователя. Разумеется, не следует думать, что изображение будет грузиться исключительно при такой скорости. Вовсе нет. Данная группа опций дает на возможность понять, насколько быстро изображение будет доставлено на чей-либо компьютер. Рекомендую установить среднее значение.

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

Следующим по курсу идет меню параметров. Кнопка его вызова располагается группы "Settings" ("Настройки").

В меню параметров помещены команды работы с настройками, а также команды

"Optimize To File Size" ("Оптимизировать размер файла") и "Repopulate Views" ("Перемещение видов")

Сюда помещены команды работы с настройками, а также команды "Optimize To File Size" ("Оптимизировать размер файла") и "Repopulate Views" ("Перемещение видов"). Последняя наиболее полезна, поэтому обсудим ее более детально. В мире web-графики идет жесточайшая борьба за каждый килобайт, поэтому способ автоматического снижения веса конечного файла лишним не будет. Результатом выполнения данной команды будет выведение на экран диалога "Optimize To File Size" ("Оптимизировать размер файла").

Данный инструмент обладает следующими возможностями:

• Задание желаемого размера конечного файла;
  
• Задание ручного или автоматического выбора формата;
  
• Указание опций отображения фрагментов графического файла, заданных инструментов "Slice" ("Нож");
  

Вернемся к группе "Setup" ("Настройки"). Она располагает двумя способами оптимизации: автоматическим и ручным. Оптимизация активируется автоматически при выборе из выпадающего списка стиля оптимизации. При выборе формата JPEG следует заострить внимание на следующих отличиях от стандартного окна сохранения:

• Изменение показателя "Quality" ("Качество") в границах от 0 до 100;
  
• Доступность применения цветового профиля (флажок "ICC Profile" ("Профиль ICC"));
  
• Возможность использования опции "Blur" ("Размытие"), упрощающей сжатие;
  

В правом верхнем углу закладки "Color Table" ("Таблица поиска цветов") мы видим кнопку меню управления цветом.

Меню управления цветом ориентировано на работу с цветом, выделениями, блокировкой и

сортировкой цветов таблицы и делает возможным сохранить и загрузить таблицу

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

Замыкает "кнопочную бригаду" кнопка вызова меню "Output Settiings" ("Выходные настройки"). Здесь задаются опции для генерации HTML-кода, фона и автоматического сохранения файлов и фрагментов изображений. Можно задать нужные параметры вручную или воспользоваться пресетами.

Разберемся с опциями HTML:

• Formatting (Форматирование). Здесь задаются: "Tags Case" ("Регистр тегов") и "Attribs Case" ("Регистр атрибутов"), значения опций "Indent" ("Абзац") и "Line Ending" ("Окончание линии"). Флажок "Always Quote Attributes" ("Всегда использовать кавычки") задает помещение значений параметров в кавычки;
  
• Coding (Кодирование). Флажок "Include Comments" ("Включить комментарии") задает добавление комментариев к HTML-коду;
  

Диалог Output Settings, свойства HTML

Рассмотрим параметры фона генерируемой web-страницы. Здесь определяется, присвоить изображению статус фона или картинки, указать фоновый рисунок и задать его цвет.

Диалог Output Settings, свойства фона

Перейдем к выбору опций сохранения файла:

• File Naming (Название файла). Задает способ присвоение имену файлу;
  
• Filename Compatibility (Совместимость названий файлов). Указывет, в каким системах, помимо Windows, может использоваться файл;
  
• Optimized Files (Оптимизировать файлы). Копирует фоновый рисунок, сохраняет рисунки в одну директорию и ставит знак авторского права;
  

Диалог Output Settings, свойства сохраняемого файла

Рассмотрим диалог настройки опций сохранения фрагментов изображения, созданных инструментом "Slice" ("Нож").

Диалог Output Settings, свойства фрагментов файла

В данном диалоге указывается способ присвоения имен фрагментам по умолчанию.