Интернет-реклама

Оптимизация графических изображений

Несмотря на наличие довольно эффективных алгоритмов сжатия гра­фической информации, при сохранении изображений GIF и JPEG на диск записывается определенное количество «лишних» данных, таких как невидимые текстовые комментарии, автоматически добавляемые в заголовок файла некоторыми графическими редакторами, ссылки на разработчиков стандарта и соответствующего программного обеспече­ния и т. д. Все эти дополнения не несут никакой полезной нагрузки и увеличивают размер файла. Чтобы сократить время загрузки иллюст­раций в клиентский браузер, используют специальные методы опти­мизации изображений.

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

Наиболее удобным и функциональным оптимизатором, предназначен­ным для сокращения размера размещаемых в Интернете графических изображений, в том числе рекламных баннеров, я считаю программу WebGraphic Optimizer компании Software Solutions (рис. 7.7). Данную программу можно бесплатно загрузить с сайта разработчика (Http:// Ww. webOpt. com) в виде shareware-версии, доступной для свободного использования в течение 30 дней.

WebGraphics Optimizer - 32-разрядное приложение Windows, содер­жащее множество функций полноценного графического редактора. Эта программа умеет работать с 24 типами графических файлов, включая PNG, формат Adobe PhotoShop PSD и даже MAC (Mac Paint), приме­няющийся на компьютерах Apple Macintosh.

Интерфейс WebGraphics Optimizer достаточно прост. На панели инст­рументов расположено пятнадцать кнопок и меню управления мас­штабом обрабатываемой картинки (рис. 7.8). Функции кнопок таковы:

1)создать новый проект WebGraphics Optimizer;

2)открыть графический файл для редактирования;

3)сохранить текущий проект;

4)отменить последнюю операцию;

5)скопировать выделенные данные в буфер обмена;

6)вставить данные из буфера обмена;

7)сделать снимок экрана;

8)отобразить на экране окно инструментов;

9)отобразить на экране окно редактирования палитры цветов;
10) разместить на изображении трехмерный (фигурный) текст

11)изменить масштаб отображения графики на экране.

С помощью диалогового окна Color Palette можно сохранять на диск, за­гружать и редактировать цветовую палитру изображений, представлен - ных в индексированном режиме, в частности файлов GIF. Окно инстру­ментов (рис. 7.9) включает в себя четыре функциональные вкладки, позволяющие оперировать с исходным изображением, редактируя его параметры. Вкладка Resize дает возможность изменить геометрические размеры исходного изображения или его выделенного участка путем перемещения с помощью мыши регуляторов ширины (Width) и высоты (Height) картинки.

Эа Программы WebGraphtcs

С использованием вкладки Color можно корректировать параметры цве­топередачи исходного изображения. Рабочее поле данной вкладки со­держит выпадающее меню со следующими параметрами:

□ Brightness — управление яркостью;

Q Gamma correction - корректировка гаммы;

Q Contrast — управление контрастностью;

Q Histogram contrast — настройка контраста гистограммы;

Stretch Intensity - построчная интенсивность отображения иллю­страции;

I Invert — инвертирование цветов;

Q Hue — коррекция оттенков;

10)

А Saturation - настройка насыщенности цветов;

I Histogram equalize - выравнивание цветовой гистограммы; □ F ill color — заполнение выделенного участка каким-либо цветом.

Каждая опция данного меню, за исключением пунктов Stretch Intensity, Invert и Histogram equalize, имеет в нижней части окна собственный регу­лятор настройки, перемещая который, вы можете задать индивидуаль­ные значения того или иного параметра.

Вкладка Filters содержит различные графические фильтры, повторяю­щие в основном аналогичные фильтры Adobe PhotoShop. Каждый из них имеет собственные параметры настройки, отображаемые в том же окне чуть ниже основного меню. И наконец, вкладка Special служит для следующих манипуляций с исходным изображением: поворот картин­ки на любой угол (Rotate), деформация ее в горизонтальной проекции (Parallelogram) и зеркальное отражение по вертикали или горизонтали (Flip Image).

Все функции, вызываемые нажатием кнопок на панели инструментов, продублированы в панели команд. Более того, программа WebGraphics Optimizer позволяет работать с выделенными участками изображения, которые можно задать при помощи пункта системного меню Edit • Select Region, причем выделение фрагментов возможно в виде нескольких гео­метрических фигур: Rectangle (прямоугольник), Ellipse (овал), Rounded Rectangle (прямоугольник со скругленными краями) и, наконец, Freehand (произвольная фигура). Можно создать копию изображения (команда меню Edit • Duplicdate Image) - эта функция применяется в случае, когда пользователь хочет поэкспериментировать с дублем, опасаясь испор­тить исходную картинку.

В основном рабочем поле программы отображаются исходное изобра­жение и его оптимизированная копия. В нижней части панели указаны размеры обоих файлов, а также величина сэкономленного на компрес­сии дискового пространства в процентах. При выборе одного из пяти уровней оптимизации графики (функция вызывается нажатием кно­пок, обозначенных на рис. 7.8 цифрой 11) для каждого дубликата кар­тинки открывается новый «кадр» рабочего окна, причем вы можете выбрать тот вариант изображения, который в наибольшей степени уст­раивает вас по качеству и размеру файла.

Безусловно, вы вправе использовать и другие, более простые в экс­плуатации программы, например компактный оптимизатор графики GifClean 32, разработанный американским программистом Мартином Харингом (Martin Haring), или какой-либо другой, аналогичной утилитой, широкий выбор которых представлен на серверах, предлагаю­щих бесплатное программное обеспечение, в частности на сайте Http:// Www. freeware. ru

Процедура компрессии файлов JPEG вручную выглядит достаточно просто: в графическом редакторе, позволяющем обрабатывать изоб­ражение, при сохранении картинки в файл обычно появляется меню, содержащее регулятор степени сжатия. Он отображается, как правило, в условных пунктах от 1 до 10, причем максимальному сжатию соот­ветствует минимальное качество картинки. Здесь перед дизайнером стоит только одна задача: найти «золотую середину», компромисс меж­ду наименьшим объемом файла и качеством полученного изображе­ния. В большинстве случаев такой компромисс удается отыскать экс­периментальным путем, изменяя настройки компрессора.

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

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

Создадим изображение GIF, состоящее из семи цветов, соответствую­щих спектру радуги: красная полоса, оранжевая, желтая, зеленая, голу­бая, синяя и фиолетовая, причем все цветовые полосы иллюстрации разместим на картинке вертикально. Размер картинки составляет 210 на 210 пикселов. Как записывается информация о каждой строке тако­го рисунка в графический файл? Приблизительно так: «первая строка: тридцать точек красного цвета, тридцать точек оранжевого, тридцать точек желтого» и так далее. При сохранении изображения получится файл объемом 3,9 гбайт. Теперь повернем картинку на 90°, чтобы по­лосы стали горизонтальными (рис. 7.10). Логическая запись первой строки получится такой: «двести десять точек красного цвета». Компактнее? Конечно! Файл уменьшился почти в три раза, теперь его объем составляет 1,34 кбайт.

Рис 7.10. Пример оптимизации файла GIF методом увеличения однотонных горизонтальных участков

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

Следует проследить за тем, чтобы рисунок не содержал большого коли­чества полутонов. Если на картинке синий цвет плавно «перетекает» в белый фон посредством восьми полутоновых переходов голубого от­тенка, не проще ли свести этот градиентный участок к трем оттенкам голубого? Теперь, отредактировав вручную палитру файла и удалив из нее все цвета, исчезновение которых не повлияет, по вашему мнению, на качество изображения (пункт Таблица цветов в меню Изображение ре­дактора Adobe Photoshop), вы сократите время загрузки иллюстрации, а также сэкономите определенное количество килобайтов в целевом файле. Помните, что создание прозрачного фона для GIF также спо­собствует уменьшению его объема.

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