|
| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |
Оптимизация графических изображений Несмотря на наличие довольно
эффективных алгоритмов сжатия графической информации, при сохранении изображений GIF и JPEG на диск в файлы записывается определенное количество лишних данных, таких, например, как невидимые текстовые комментарии,
автоматически добавляемые в заголовок файла некоторыми графическими редакторами, ссылки на разработчиков стандарта и соответствующего программного обеспечения и т. д. Все эти дополнения лишь увеличивают
физический размер файла и не несут никакой полезной нагрузки. Чтобы сократить время загрузки иллюстраций в клиентский броузер, используют специальные методы оптимизации изображений. Существуют два
способа дополнительной компрессии графических файлов: с использованием специальных утилит, так называемых оптимизаторов графики, и в ручную. Рассмотрим оба варианта. А начнем мы, пожалуй, с небольшой и
очень удобной программы-компрессора файлов GIF, разработанной МартиномХарингом (Martin Haring), которая называется GifClean32 Данная программа хороша, прежде всего, тем, что позволяет гибко настраивать
список тех компонентов GIF-изображений, которые подлежат удалению, в частности комментарии из самого файла и редко встречающиеся цвета из файловой палитры. Левая кнопка, расположенная на панели инструментов
GifClean32,открывает файл GIF для компрессии и редактирования. При помощи следующей кнопки вы можете внести в открытый графический файл собственные комментарии, с помощью третьей кнопки — записать комментарии
текущего изображения в отдельный текстовый документ, а посредством четвертой — сохранить само изображение в любую директорию на диске. Функции следующих четырех кнопок (слева направо): удаление всех комментариев
из изображения, удаление малоиспользуемых оттенков, отображение извлекаемых комментариев на экране, отображение обрабатываемого изображения. И наконец, последние три кнопки (опять же слева направо) — это
вызов справки о программе GifClean32,остановка компрессии после завершения обработки текущего файла и автоматическая перезапись оптимизированного изображения в файл с тем же именем, что и исходный. Все
перечисленные процедуры продублированы в командной панели. Оптимизаторы JPEG, в отличие от компрессоров для файлов стандарта GIF, в большинстве случаев рассчитаны на эксплуатацию под MS-DOS. Среди
них —небольшая утилита JPEG Cleaner, предназначенная для удаления из изображений JPEG комментариев, записанных в файл различными графическими редакторами. Это позволяет сократить объем целевого файла на
5-10 %, а если иллюстрация создана с применением редактора Adobe Photoshop, то можно добиться сокращения ее объема вплоть до 45 % без потери качества. Программа имеет русскоязычный интерфейс и работает
только с MS-DOS. При ее запуске под Windows возможно появление непредвиденных ошибок. Для оптимизации графики следует скопировать все необходимые файлы JPEGв тот же каталог, где хранятся файлы jc.exe
и jc.cfg, и выполнить из командной строки процедуру jc file.jpg или jc *.jpg. Программа самостоятельно найдет и удалит из предложенных ей файлов всю лишнюю информацию. Для изменения настроек программы необходимо
отдать из командной строки DOS команду jc /с. Универсальным программным продуктом для оптимизации графики, ориентированной на Интернет, является пакет WebGraphics Optimizer производства компании
Plenio Software Solutions (рис. 5.2). Данную программу можно бесплатно загрузить с сайта разработчика (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 — кнопки управления
глубиной оптимизации изображения.
Окно инструментов включает в себя четыре функциональные вкладки, позволяющие оперировать с исходным изображением, редактируя его параметры. Вкладка Resize
дает возможность изменить геометрические размеры исходного изображения или его выделенного участка путем перемещения мышью ползунков для ширины (Width) и высоты (Height) картинки. Ha вкладке Adjust
Color/Intensity (рис. 5.5) можно корректировать цвета, точнее их интенсивность. Рабочее поле данной вкладки содержит выпадающее меню со следующими опциями: Brightness — управление яркостью;
Gamma correction корректировка гаммы; Contrast — управление контрастностью; Histogram contrast — настройка контраста гистограммы; Stretch Intensity построчная интенсивность отображения
иллюстрации; Invert — инвертирование цветов; Hue — коррекция оттенков; Saturation — настройка насыщенности цветов; Histogram equalize выравнивание цветовой гистограммы;
Fill color заполнение выделенного участка каким-либо цветом. Каждая опция данного меню, за исключением пунктов Stretch Intensity, Invert и Histogram equalize, имеет в нижней части окна собственный
ползунок настройки, перемещая который пользователь может задать индивидуальные значения того или иного параметра. Вкладка Filters содержит различные графические фильтры, повторяющие в основном аналогичные
фильтры Adobe Photoshop: - Halftone — Полутона;
- Blur/Sharpen Размытие/Резкость;
- Posterize Пастеризация (Схематизация);
- Mosaic — Мозаика;
- Emboss — «Чекан»;
- Soften — «Смягчение полутонов»;
- Oil Painting — «Масляная живопись»;
- Reduce Noise — Уменьшить шум;
- Add Noise — Добавить шум;
- Intensity Detect — Выделение интенсивности;
- Edge Detect — Выделение краев;
- Line Detect — Выделение строк.
Каждый из перечисленных фильтров имеет собственные
параметры настройки, отображаемые в том же окне чуть ниже основного меню. И наконец, вкладка Special ) служит для следующих манипуляций с исходным изображением: поворот картинки на любой угол (Rotate),
деформация ее в горизонтальной проекции (Parallelogram) и зеркальное отражение по вертикали или горизонтали (Flip Image). Все команды, вызываемые нажатием кнопок на панели инструментов, продублированы
в панели команд. Более того, программа Web Graphics Optimizer позволяет работать с выделенными участками изображения, которые можно задать при помощи пункта системного меню Edit > Select Region, причем
выделение фрагментов возможно в виде нескольких геометрических фигур: Rectangle (прямоугольник), Ellipse (овал), Rounded Rectangle (прямоугольник со скругленными углами) и, наконец, Freehand — произвольная
фигура. Можно создать копию текущего изображения (команда меню Edit > Duplicdate Image), эта функция применяется в случае, когда пользователь желает поэкспериментировать с дублем, опасаясь испортить
исходную картинку. Основное рабочее поле программы Plenio WebGraphics Optimizer занимает разделенное вертикально окно, отображающее исходное изображение и его оптимизированную копию. В нижней части
панели указаны размеры исходного и оптимизированного файла, а также коэффициент сэкономленного на компрессии дискового пространства в процентах. При выборе одного из пяти уровней оптимизации графики (функция
вызывается нажатием кнопок, обозначенных на рис. 5.3 цифрой 10) для каждого дубликата картинки открывается новое окно, причем пользователь может выбрать тот вариант изображения, который в наибольшей степени
устраивает его по качеству и размеру файла. Процедура компрессии файлов JPEG вручную выглядит достаточно просто в графическом редакторе, позволяющем обрабатывать изображение, при сохранении картинки
в файл обычно появляется меню, содержащее ползунок регулятора степени сжатия. Она отображается, как правило, в условных пунктах от 1 до 10, причем максимальному сжатию соответствует минимальное качество
картинки. Здесь перед дизайнером стоит только одна задача: найти золотую середину, компромисс между наименьшим объемом целевого файла и допустимым качеством изображения. В большинстве случаев такой компромисс
удается отыскать экспериментальным путем, варьируя настройки компрессора. С GIF все обстоит гораздо сложнее. Оптимизировать файл по размеру с помощью встроенных функций графических редакторов не всегда
возможно а использование внешних компрессоров зачастую ведет к нежелательной и неоправданной потере качества изображения. Происходит это, прежде всего, потому что все без исключения программы-оптимизаторы
графики используют один алгоритм сжатия GIF для разных картинок, а именно метод удаления из палитры GIF неиспользуемых и малоиспользуемых цветов с подстановкой вместо них цветов, близких по оттенкам, что,
как правило, портит изображение. Поэтому, если вы хотите, чтобы ваша страница выглядела качественно и профессионально, лучше всего оптимизировать GIF вручную. Это занимает чрезвычайно много времени и требует
большого терпения, но для получения хорошего результата такой способ вполне оправдан. Поскольку информация об изображении в файле стандарта GIF записывается построчно, чем однороднее будет ваше изображение
по горизонтали тем компактнее получится целевой файл. Пример? Пожалуйста. Создадим изображение GIF, состоящее из семи цветов, соответствующих спектру радуги: красная полоса, оранжевая, желтая, зеленая,
голубая, синяя и фиолетовая, причем все цветовые полосы иллюстрации разместим на картинке вертикально. Размер изображения составляет 210 на 210 пикселов. Как записывается информация о каждой строке такого
рисунка в графический файл? Приблизительно так: первая строка: тридцать точек красного цвета, тридцать точек оранжевого, тридцать точек желтого и т. д. При сохранении изображения получится файл объемом
3,9 Кбайт. Теперь развернем картинку на 90° чтобы полосы стали горизонтальными . Логическая запись первой строки в этом случае звучит так: двести десять точек красного цвета. Компактнее? Конечно: файл
уменьшился почти в три раза, теперь его объем составляет1,34 Кбайт. Таким образом, напрашивается вполне логичный вывод: чем больше ваше изображение будет содержать однотонных горизонтальных участков,
тем компактнее получится целевой файл. Следует проследить также за тем, чтобы ваше изображение не содержало большого количества полутонов. Если на вашей картинке синий цвет плавно перетекает в белый
фон посредством восьми полутоновых переходов голубого оттенка, не проще ли свести этот градиентный участок к трем оттенкам голубого? Теперь, отредактировав вручную палитру файла и удалив из нее все цвета,
исчезновение которых не повлияет, по вашему мнению, на качество изображения(пункт Таблица цветов в меню Изображение редактора Adobe Photoshop), вы сократите время загрузки иллюстрации, а также сэкономите
определенное количество килобайт на диске сервера, где будет размещаться сайт. Следует помнить, что создание прозрачного фона для GIF также способствует уменьшению его объема. Затем с помощью любой подходящей
утилиты, широкий ассортимент которых представлен на серверах, предлагающих бесплатное программное обеспечение, можно удалить из файла все ненужные комментарии, и ваша картинка готова к публикации.
Включение графики в web-страницу Интеграция графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим
образом: <IMG SRC="URL" ALIGN="значение" WIDTH="значение" HIGHT="значение" ALT="текст"> В качестве параметра атрибута SRC указывается
путь к изображению в виде либо полного URL (например, http://www.mysite.ru/images/picture.jpg), либо сокращенного URL с указанием пути
к изображению на локальном сервере (например, . ./images/picture.jpg). ВНИМАНИЕ Указывая URL картинки, внимательно следите за регистром символов, которыми вы записываете
расширение файла. Некоторые графические редакторы, такие как Adobe Photoshop, по умолчанию сохраняют изображение в файл с расширением в заглавном регистре, напримерpicture. GIF. Иллюстрация с расширением
в URL в строчном регистре(picture.gif) при отображении документа HTML в броузере просто не будет показана на странице. С помощью атрибута ALIGN картинка позиционируется в документе HTML или в ячейке
таблицы. Однако помимо традиционных значений данного атрибута —RIGHT, LEFT и CENTER, — совместно с тегом <IMG> можно использовать и другие параметры атрибута: ТОР — изображение совмещается
верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка. Следует учитывать, что различные броузеры интерпретируют данное значение атрибута ALIGN
по-разному, в связи с чем при использовании этого параметра возможна неадекватность отображения документа HTML в InternetExplorer и Netscape Navigator. BOTTOM — изображение совмещается нижним краем
с нижней границей ячейки таблицы или текстовой строки. MIDDLE — центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки. BASELINE — изображение
выравнивается по условной базовой линии. Применение этого параметра рекомендуется в случае, когда web-мастер размещает несколько рисунков или несколько фрагментов одного рисунка в разных ячейках строки
таблицы. Именно с использованием значения ALIGN="baseline" удается добиться оптимального выравнивания иллюстраций для броузеров всех типов. В качестве параметров атрибутов WIDTH и HEIGHT
указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах. Некоторые web-мастеры используют данные атрибуты для масштабирования иллюстраций. Подобный подход вполне допустим,
однако далеко не все броузеры выполняют процедуру масштабирования корректно, поэтому рекомендуется указывать реальные геометрические размеры картинки, масштабируя изображение при помощи любого графического
редактора. Почему же использование данных атрибутов необходимо? При отображении на экране компьютера html-документа транслятор броузера, встречающий в его тексте процедуру вызова графического
изображения, не снабженную указанием на его геометрические размеры, приостанавливает дальнейшую загрузку страницы до тех пор, пока изображение не будет считано полностью. Только после этого он компонует
документ согласно получаемому им с сервера html-кодудальше. Если же размеры картинки указаны явно, броузер резервирует под нее свободное пространство, продолжая считывание кода и отображение результатов
его обработки на экране, то есть графика загружается параллельно с этим процессом. И наконец, атрибут ALT содержит некий альтернативный текст, который отображается вместо картинки в броузерах, не
поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в небольшом желтом прямоугольнике наподобие всплывающей подсказки, если пользователь несколько
секунд подержит наведенный на изображение курсор мыши. Вот пример применения тега <IMG>: <IMG SRC="/images/sunset.jpg" ALIGN="CENTER" WIDTH="325" HEIGHT="215"А1Т="Красивый
закат на берегу Карибского моря"> Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>,
записав ее следующим образом: <А HREF="URL документа, на который организуется ссылка"> <IMG SRC="URL изображения" ALIGN-''значение" WIDTH="значение"
HEIGHT="значение" АLТ="Альтернативный текст" BORDER="значение"></A> Как видите, особых отличий в написании этих команд от их традиционного синтаксиса
в данном случае нет, за исключением того, что между тегами <А> и </А>вместо текстовой строки вставляется директива <IMG>. Атрибут BORDER управляет толщиной синей рамки, в которую заключается
изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение BORDER равным
нулю. Отрывок кода HTML, позволяющего использовать изображение в качестве гиперссылки, приведен ниже: <А HREF="/hobbie/index.html"> <IMG SRC="/images/hobbie.jpg"
ALIGN="BASELINE" WIDTH="315" HEIGHT="226" АLТ="Тематический раздел "Мои увлечения" BORDER="0"></A> Помимо описанных атрибутов тега
<IMG> в команде вызова изображения иногда используют еще два: HSPACE и VSPACE. Данные атрибуты задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например,
в случае, когда картинка помещается на web-странице рядом с текстом. HSPACE определяет величину незаполненного пространства справа и слева от картинки, VSPACE соответственно сверху и снизу. Путешествуя
по ресурсам Всемирной сети, вы наверняка неоднократно сталкивались с весьма распространенным дизайнерским приемом использованием графических изображений в качестве своеобразных карт (image map), в которых
определенным участкам картинки соответствуют гиперссылки на различные ресурсы сервера. Такие карты можно создать с помощью тега <МАР>, о правилах применения которого мы поговорим в следующем уроке.
Однако существует и другой способ реализации этого приема, к которому прибегают в тех случаях, когда включение в код HTML команды <МАР> по каким-либо причинам невозможно. Речь идет о рассечении целого
изображения на отдельные фрагменты и склеивании его по принципу мозаики в невидимой таблице с назначением отдельным фрагментам картинки свойств гиперссылки при помощи директивы<А>. Иногда данный прием
применяется не только при создании элементов, подобных image map, но и при подготовке рисованых заголовков или полей для размещения рекламного баннера. Однако аккуратно разрезать изображение при
помощи традиционных графических редакторов, причем так, чтобы готовая мозаика правильно вписывалась в таблицу, весьма трудно. В этой задаче web-мастеру помогает специальная утилита — фрагментатор графики
ShoeString Picture Dicer (рис. 5.8). Она не только разделит картинку на составляющие так, как это необходимо дизайнеру, но еще и автоматически сгенерирует файл HTML с невидимой таблицей, склеивающей изображение
в единое целое. Picture Diser позволяет открывать графические файлы форматов DIB, GIF,JPEG, PCX, TGA и TIFF, сохраняя результат в виде файлов BMP, DIB, PCX,TGA, TIFF, GIF или JPEG. Формат вывода
изображений можно задать в меню Output Format. После открытия картинки (функция File > Open File) программа спросит вас, в какой директории на винчестере сохранить результат обработки изображения.Левой
кнопкой мыши вы можете установить границы вертикального разбиения картинки (они отмечаются на экране линиями с красными стрелками), а правой кнопкой — горизонтальные границы (линии с синими стрелками).
Удалить неправильно установленную границу можно щелчком левой кнопки мыши над стрелкой соответствующей линии. После того как все границы размечены, необходимо выполнить команду File > Process Image.
Picture Dicer автоматически фрагментирует изображение и сохранит результат в указанной вами директории. GIF-анимация В этом разделе мы немного поговорим о представлении
во Всемирной сети анимированной графики, или, кратко, о web-анимации. Возможностей применения движущихся изображений существует великое множество: их можно разместить в заголовках web-страниц в качестве
управляющих навигацией элементов, вместо кнопок, вызывающих почтовый клиент или заносящих ярлык ресурса в системную папку избранное с помощью специального скрипта, выполненного на языке Java. Но чаще всего
анимированная графика встречается в размещаемой на интернетовских сайтах рекламе, то есть в виде разнообразных баннеров. Использование в рекламных изображениях движущихся элементов стало на сегодняшний
день повсеместной традицией. Во Всемирной сети ныне применяют несколько видов анимации. Среди более или менее современных подходов следует упомянуть технологию Macromedia Flash, оперирующую векторными
графическими объектами, и технологию Java, когда графика и текст перемещаются посредством включения в html-документспециального кода, обрабатываемого клиентским броузером совместно с кодом самой web-страницы.
Оба эти варианта не лишены целого ряда недостатков. Прежде всего, это пропорциональное увеличение времени загрузки html-доку-мента, которое к тому же чрезвычайно плохо поддается регулировке. Болеетого,
для отображения элементов flash требуется специальная надстройка для пользовательского броузера, а скрипт Java не будет обработан броузерами старых версий и броузерами, в которых отключена поддержка компиляции
этого языка. Обе технологии подробно рассматриваются в соответствующих справочниках и журнальных публикациях, поэтому я остановлюсь на наиболее традиционном способе передачи движения на web-странице, а
именно — на GIF-анимации. Вскоре после появления стандарта Compu Serve GIF было замечено, что принцип записи графической информации в файл этого формата позволяет помещать под одним заголовком последовательность
отдельных кадров, которые можно чередовать на экране с определенным временным интервалом. Именноэта особенность файлов GIF, точнее — модификации данного стандарта, известной под названием GIF89a, и легла
в основу анимации, исторически первой появившейся в Интернете. Для того чтобы пользователи Всемирной сети могли наблюдать GIF-анимацию, не требуется какого-либо дополнительного программного обеспечения,
помимо любого стандартного броузера, поддерживающего отображение графики. Процесс подготовки анимированного GIF можно условно разделить на несколько этапов: создание отдельных кадров, генерация
движущегося изображения и оптимизация целевого файла. Базовые кадры формируются в любом графическом редакторе и сохраняются на диске в формате GIF, их изготавливают приблизительно по такому же принципу,
по которому создается обычная мультипликация (рис. 5.9). Рекомендуется заранее нарисовать соответствующий вашей задумке шаблон — файл, содержащий изображение фиксированного размера суже нанесенным на него
неподвижным фоном, однотонным или текстурным, поверх которого будут перемещаться движущиеся объекты. При подготовке рисунков следует обращать внимание на то, чтобы подвижный элемент смещался в каждом кадре
на равное расстояние и именно в том направлении, в котором необходимо. Если, например, какой-то объект должен перемещаться строго по горизонтали, но в одном из кадров вы разместите его чуть ниже или выше
первоначального положения, траектория его движения получится ломаной. Для того чтобы избежать этого, используют имеющиеся в составе большинства профессиональных графических редакторов линейки и направляющие.
Если фон будущей анимации предполагается сделать однотонным, можно нанести на ранее созданную заготовку шаблонную сетку, которая по окончании работы без труда удаляется замещением соответствующей цветовой
маски фоновым цветом. Уже в процессе работы над исходными кадрами следует подумать о сокращении размера будущего файла. Во-первых, постарайтесь не включать в анимациюбольшое количество цветов:
чем меньше их число, тем меньше килобайт необходимо будет впоследствии перекачать пользователю с сервера, на котором размещен ваш сайт. Однако простого сокращения числа оттенков, составляющих изображение,
как правило, недостаточно: необходимо уменьшить соответствующее значение в используемой файлом цветовой палитре. Это лучше делать путем редактирования палитры вручную, а не с помощью стандартных средств,
поскольку в этом случае автоматическое уменьшение, скорее всего, приведет к некорректной замене некоторых оттенков участком из нескольких используемых цветов. Необходимо на глаз определить количество составляющих
рисунок оттенков, при переводе изображения в индексированный формат указать эту цифру в параметрах сохраняемого файла (пункт Цвета диалогового окна Индексированный цвет в меню Изображение/Режим/Индексированные
цвета редактора AdobePhotoshop), после чего откорректировать элементы палитры (например, с помощью инструмента пипетка в меню Изображение/Режим/Таблица цветов того же редактора). Использование прозрачного
фона также уменьшает размер целевого файла. 1>>>2>>>3 Обсудить в форуме...>>>>
| |
