· PNG
PNG (PortableNetworkGraphics – Переносимая сетевая графика) – универсальный формат записи неподвижных (статичных) изображений. Он с успехом применяется в отношении как фотоснимков, так и небольших рисунков. По глубине отображения цвета формат PNG превосходит GIF и JPEG, так как цвет каждого пикселя здесь может быть определён с помощью 48 битов. PNG применяет алгоритм компрессии без потерь, а прозрачность фона может иметь достаточно много (до 256) степеней. Изображения, записанные в формате PNG, корректно отображаются всеми браузерами. Сам формат был разработан в 1996 году как альтернатива GIF, но пока не получил большой популярности. Одной из причин этого стало то обстоятельство, что форма PNG не позволяет записывать анимацию, которую так любят использовать создатели Интернет-сайтов.
· SVG
Формат SVG (ScalableVectorGraphics – Масштабируемая векторная графика) представляет собой стандарт, разработанный организацией WorldWideWebConsortium (W3C) для записи векторной графики языком XML. В отличие от форматов, описанных выше, SVG дает возможность записи векторной графики, а это значит, что масштабирование изображения будет происходить без потери качества.
· ICO
Иконки, сопровождающее любой программный продукт и любой файл в системе Windows, также являются графическими файлами. Хотя эти маленькие рисунки очень часто бывают включены в файлы.exe или.dll, они могут быть также записаны на диске в независимых файлах с расширением.ico. Формат ICOпозволяет сохранять элементы 4‑битовой графики размером 32*32 пикселя. Иконки системы Windows могут принимать один прозрачный цвет (аналогично GIF), иногда называемый цветом экрана, а также цвет, обратный цвету экрана.
Типовые графические элементы Web‑страниц
· Фон
Желая изменить применяемый по умолчанию фон HTML‑документа или его фрагмента (например, ячеек таблицы), автор страницы может произвольно задать цвет фона или указать, какой графический файл был использован для «обивки» окна браузера. Файл фоновой графики не должен быть большим. Если предлагается однотонный фон, то лучше предусмотреть задание цвета фона в кодах HTML. Лучше всего выглядят страницы с фоном в пастельных тонах, элементы которого сливаются в однородно окрашенную поверхность. При использовании тёмного фона шрифт должен быть ярким.
Пример:
<BODY bgColor=» yellow»> Фонжёлтогоцвета.
<BODY Background=» image1.gif»> Фондокументаизфайла.
· Иллюстрация, фотоснимок
Говоря о включении графики в Web‑страницу, чаще всего имеют в виду размещение в документе Иллюстрации или фотоснимка. Картинки для включения в HTML‑документ могут быть записаны в разных форматах, следовательно, могут иметь разные свойства. Ниже перечислены простые технологии, широко используемые для получения интересных эффектов на Web‑страницах и полного использования свойств картинок:
1) Размещение иллюстрации с прозрачным фоном. Изображение, «наложенное» на документ, выглядит значительно лучше. Иллюстрация отлично вписывается в документ независимо от изменения цвета фона Web‑страницы. Фон страницы (цвет, рисунок) служит и фоном для размещённой картинки.
2) Анимация на Web‑страницах служит чаще всего для украшения. Иногда анимация применяется для поэтапного представления информации – в отдельных кадрах последовательно отображается слова какой-нибудь надписи или открывается все больший фрагмент изображения. Этот эффект привлекает и удерживает внимание наблюдателя. Типовым форматом записи анимации для Web‑страниц является GIF.
3) Галерея миниатюр. Выводя на Web‑страницу галерею фотоснимков, нужно предусмотреть наличие дополнительного документа, содержащего эти самые фотоснимки в уменьшенном размере или же фрагменты этих фотоснимков. Каждая миниатюра является ссылкой на файл, в котором записано данное изображение, и щелчок клавиши мыши над миниатюрой начинает загрузку фотоснимка в окон Интернет-браузера. Галереи миниатюр создаются с целью быстрого ознакомления пользователя со всеми картинками и облегчения выбора фотоснимка, предлагаемого к загрузке в оригинальном размере.
4) Рассечение картинки. Часто получается так, что компрессия графических файлов приносит намного лучшие результаты (увеличение степени сжатия), если сжимать маленькие картинки, а не большие изображения. Большие изображения рекомендуется рассекать на меньшие фрагменты. Сохранение каждого фрагмента в своём файле иногда позволяет значительно уменьшить количество байтов, которые пользователь будет вынужден загружать с Web‑сервере для просмотра картинки в оригинальном размере. Восстановление изображения, происходит по принципам загрузки отдельных фрагментов в ячейки таблицы.
· Клавиша, кнопка
Важным графическими элементами на Web‑страницах являются клавиши навигации. Это небольшие картинки, представляющие собой ссылки к другим документам или сценариям (скриптам). Щелчок клавиши мыши на такой клавише обычно вызывает загрузку другого документа, пересылку содержимого формуляра или выполнение сценария. Интересный эффект при использовании клавиши навигации можно получить, предусмотрев изменения её графического вида при наведении курсора на клавишу и возврата изображения в начальное состояние при отведении курсора из области клавиши. Этот простой эффект реализуется с помощью операторов языка JavaScript. Документ, оснащённый таким механизмом, приобретает черты динамичности.
Клавиши навигации являются графическими элементами, которые должны хорошо вписываться в фон страницы, и вместе с тем выделятся и облегчать навигацию в Интернете благодаря единообразию их интерпретации.
· Рекламный баннер
Прямоугольные картинки, содержащие рекламу или визитки Интернет-сайтов, называются баннерами (banner – знамя, транспарант). Целью размещения баннеров на Web‑страницах является приглашение интернавта посетить рекламируемую страницу. Очень часто баннеры насыщенны анимацией – ведь они «обязаны» бросаться в глаза.
Чаще всего баннеры бываю следующих размеров: 400*50, 468*60 пикселей, или более мелкие – 120*40 пикселей и т.д. Очень важно, чтобы размер файла, в котором записан баннер, не был большим. Считается, что хороший баннер (т.е. такой, который быстро загружается в браузер) не должен быть больше 10–15 кбайт. На практике же строгих ограничений не существует.