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

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

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

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

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

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

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

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

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

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

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

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

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

9) отобразить на экране окно редактирования палитры цветов;

10) разместить на изображении трехмерный (фигурный) текст;

11) создать кнопки управления глубиной оптимизации изображения;

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

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

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

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

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

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

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

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

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

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

Histogram equalize — выравнивание цветовой гистограммы;

ЕЛ color — заполнение выделенного участка каким-либо цветом.

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

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

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

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

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

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

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

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

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

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

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


Информационная архитектура



Новости за месяц

  • Ноябрь
    2019
  • Пн
  • Вт
  • Ср
  • Чт
  • Пт
  • Сб
  • Вс