Тайны и секреты компьютера - Антон Орлов

Графика

В самом документе HTML не может быть графических обьектов, так как язык HTML — язык оформления текста, что следует даже из его названия (HyperText Markup Language). Но графические обьекты могут быть вставлены в документ с помощью тэга "<img src="…">", и тогда они будут отображаться при просмотре web-страницы через браузер. Кроме того, несложные графические файлы могут быть конвертированы в специальный формат VML и вставлены в web-страницу, однако VML способен воспринимать только браузер Microsoft Internet Explorer версии 5.0 и выше, как, впрочем, и web-архивы — файлы, в которых с помощью использования стандарта MIME обьединяются в один файл web-страница и все размещенные на ней рисунки и другие обьекты.

В качестве графики могут выступать только файлы в формате Gif и Jpeg, и, для самых новых моделей браузеров — Png. Файлы остальных типов через браузер не могут быть просмотрены.

Для помещения картинки на web-страницу необходимо указать в тэге "<img src="…">" путь к ее файлу. Если графический обьект располагается в той же директории, что и web-страница, на которой он размещен, то в его тэге "<img src="…">" достаточно указать только название файла. Если он расположен в одной из папок сайта, на котором находится web-страница, то можно указать относительный путь к нему — типа "<img src="images/ris.gif">". Если же рисунок, включаемый в web-страницу, располагается на другом сайте, то этом случае в тэге "<img src="…">" должен быть указан полный адрес рисунка — вида "<img src="http://www.site.ru/images/ris.gif">". При просмотре страницы браузер сам загрузит нужную графику с указанного адреса. Полный адрес рисунка можно указывать и в двух других случаях.

Графические обьекты также могут выступать в качестве фона к web-странице и ее некоторым элементам, например, ячейкам таблиц. В этом случае путь к ним должен быть указан в параметре background соответствующего тэга.

Для создания графических обьектов можно использовать любой редактор графики — от Adobe Photoshop до MS Paint. Если редактор не поддерживает форматы Gif и Jpeg, то можно воспользоваться конвертирующими программами или функциями конвертации других программ — вроде MS Photo Editor, открыв в нем файл, сделанный в редакторе, и сохранив в формате Gif или Jpeg. Весьма неплохие возможности по конвертации графических файлов предоставляет программа ACDSee.

Формат Gif рекомендуется применять для рисунков, имеющих много областей, залитых одним цветом (наподобие рисунков из коллекции Clipart пакета Microsoft Office). В файле в формате Gif происходит сжатие информации о рисунке путем замены в последовательности одинаковых точек изображения информации о каждой точке информацией о виде точки и о их количестве. К примеру, вместо указания "красная точка, красная точка, красная точка, красная точка" будет использовано указание "четыре красные точки". Такое сжатие происходит только со строго горизонтальными линиями изображения.

Кроме того, в файле в формате Gif цвет каждой точки может быть описан не более чем одним байтом — то есть быть максимум одним из 256 цветов. Однако в файл формата Gif можно поместить так называемую «палитру» — описание используемых в файле цветов. Тогда цвет каждой точки можно будет описать просто номером этого цвета в палитре, а уж цвета самой палитры описывать в ней полностью. Это позволит, скажем, создать файл в формате Gif, в котором будет использоваться лишь 16 цветов, причем цвет каждой точки будет описываться не восемью битами, а всего четырьмя. В палитре же этого файла будут полностью описаны все цвета, используемые в рисунке. Таким образом достигается сжатие файла — уменьшение его размера.

Некоторые цвета в изображении формата Gif могут быть обьявлены «прозрачными». Это значит, что при вставлении такого рисунка в web-страницу на месте областей, закрашенных этим цветом, будет виден фон страницы. Чтобы сделать в файле Gif какой-либо цвет прозрачным, достаточно воспользоваться входящим в состав Microsoft Office графическим редактором PhotoEditor. Там есть такая функция, вызывающаяся иконкой с изображением карандаша со стрелочкой на панели инструментов "Стандартная".

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

Формат Gif очень хорошо приспособлен для хранения в нем простых изображений и анимированных роликов, особенно рисованных "от руки". Такие файлы в этом формате занимают очень мало места. Однако для хранения фотографических изображений он непригоден, так как не позволяет использовать палитру больше, чем в 256 цветов, а все его способы оптимизации изображения для фотографических изображений не подходят — у них много мелких деталей. Преграду в 256 цветов можно обойти, разбив большое изображение на множество мелких, назначив каждому фрагменту свою палитру из не более чем 256 цветов, а потом на web-странице с помощью сложной табличной разметки собрав все эти фрагменты в одно изображение, но такой прием все же не является хорошим выходом, так как сильно увеличивает время загрузки страницы и ее сложность.

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

Вот, к примеру, исходная картинка (рис. 17.3), файл Jpeg, сохраненный с качеством в 50 процентов (рис. 17.4), и файл Jpeg, сохраненный с качеством в 10 процентов (рис. 17.5).

Рис. 17.3. Исходная картинка.

Рис. 17.4. Файл Jpeg, сохраненный с качеством в 50 процентов

Рис. 17.5. Файл Jpeg, сохраненный с качеством в 10 процентов.

При этом первый рисунок имеет размер 142 килобайта, второй — 17, а третий — 7. Как можно видеть, при утере до половины всей информации о мелких деталях изображения его видимое качество заметно не ухудшается, а размер сокращается во много раз. Именно это и позволяет использовать изображения в формате Jpeg, сжатые на 60–70 процентов, в оформлении web-страниц. Поэтому обязательно оптимизируйте графику, сохраняя или пересохраняя размещаемые в Web рисунки в jpeg-файлах с качеством 40–50 %.

При сохранении изображения в формате Jpeg с пониженным качеством можно улучшить его внешний вид, применив предварительно фильтр «размытия» изображения (в англоязычных программах он обычно называется Blur). Тогда «зернистость» изображения будет меньше.

У обоих форматов графических файлов — Gif и Jpeg — разное предназначение. Первый просто идеален для небольших рисунков, кнопочек, мерцающих звезд, в общем, всего того, что рисуется "от руки". Второй же хорошо использовать для размещения в Интернете фотографий и сканированных изображений. Кроме того, только Gif позволяет сделать анимированный рисунок, — то есть уместить в одном графическом файле небольшой мультипликационный ролик. Последнее делает Gif наилучшим форматом для баннеров — рекламных клипов, размещаемых на сайтах Интернета.

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

Существует множество программ для создания графических обьектов в форматах Gif и Jpeg. Но, к сожалению, на сегодняшний день нельзя назвать ни одной программы, которая сочетала бы в себе многофункциональность и удобство для пользователя. Сложную графику хорошо делать в Adobe Photoshop, но для его освоения придется потратить немало часов. В качестве элементарного средства можно использовать MS Paint, а затем изображение, созданное в нем, конвертировать в нужный формат с помощью Microsoft Photo Editor.

Кроме того, рисунки, созданные в Microsoft Word, будут отконвертированы в форматы Gif и Jpeg при сохранении документа в формате HTML. Таким образом конвертор HTML редактора Microsoft Word можно использовать для преобразования в форматы Gif и Jpeg внедренных в документы рисунков. Конвертор HTML сам выберет лучший формат для каждого рисунка, подберет степень оптимизации.

Заключение