Изображения на веб-сайте.
На сегодняшний день для оформления веб-сайтов применяются графические элементы трех форматов: GIF, JPEG (JPG) и PNG. Чтобы понять, какой из перечисленных форматов для какого вида графики подходит, выясним особенности каждого.

1. GIF.

Формат GIF (Graphics Interchange Format) был разработан в 1987 году компанией CompuServe и изначально предназначался для передачи растровых изображений по Сети(локальной и Интернет). Но поскольку первая версия формата не оправдала надежд - файл изображения получался слишком объемным, что на тот момент делала невозможным его передачу по Сети, двумя годами позже вышла вторая, усовершенствованная версия GIF. Среди новых функциональных возможностей формата оказались: поддержка прозрачности и анимации, значительное сокращение объема файла изображения за счет поддержки LZW-компрессии.

Алгоритм LZW относится к так называемым методам сжатия без потерь. Применительно к формату GIF это означает, что при использовании метода LZW-компрессии не происходит повреждения или искажения данных графического файла. Алгоритм LZW применим только к 8-битным изображениям.

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

Области применения формата: диаграммы, графики, простейшие изображения и аниация.

2. JPEG.

Формат JPEG, расшифровываемый как "объединенная группа экспертов фотографии" (Joint Photographic Experts Group), применяется для хранения многоцветных фотографических изображений, так как обеспечивает сжатие полноцветного изображения практически без уменьшения количества цветов. Процесс сжатия происходит за счет уменьшения числа пикселей, содержащих информацию.

Во время сжатия происходит конвертация изображения в цветовую систему YCbCr. Каналы Cb и Cr, отвечающие за цвет, уменьшаются в 2 раза. Затем уже все цветовые каналы изображения,включая черно-белый канал Y, разбиваются на части (каждая размером 8х8 пикселей). Частички изображения подвергаются дискретному косинусному преобразованию - алгоритму сжатия без потерь. Заключительный этап: упаковка полученных коэффициентов с помощью кодов Хаффмана.

3.PNG.

PNG (Portable Network Graphics) является растровым форматом хранения графической информации без потери качества во время сжатия.

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

Тем не менее, формат PNG отлично подходит для хранения и редактирования изображений на промежуточной стадии их создания. Графический редактор Macromedia Fireworks для сохранения результатов обработки изображения использует именно этот формат.

GIF, JPEG и PNG. Что предпочесть?

Формат GIF лучше применять для хранения графических элементов сайта (меню, баннеры, кнопки). В формате JPEG должны находиться фотографии или другие полноцветные изображения. А в PNG могут быть сохранены предварительные наброски макета будущего сайта.
Чтобы графические элементы сайта загружались одновременно со страницей, а затем корректно отображались в браузере, они должны находиться в отдельной папке, для удобства названной images или просто img. Далее папка img копируется в каталог с html-страницами. Теперь можно задуматься о том, как внедрить изображения в веб-страницы.

Для размещения графической информации на сайте применяется тег <IMG> и атрибут SRC: <img src="адрес изображения">. Применимо для папки img код примет следующий вид: <img src="site/img/picture.gif">, где site - имя корневой папки, в которой располагается сайт; img - каталог с изображениями; picture.gif - размещаемый графический файл. Закрывающий тег </IMG> не используется.

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

Неправильное изображение


Атрибуты тега <IMG>.

Атрибут SRC отвечает за указание адреса файла. Но кроме него,существуют ряд других атрибутов, отвечающих за нюансы размещения (подпись рисунка, способ выравнивания и так далее).

Атрибут ALIGN служит для установления способа выравнивания картинки (значения left и right, top, middle, bottom)

С помощью ALT добавляется комментарий, отображаемый во время отключения показа графики в веб-браузере.

HTML-код: ALT="комментарий".

BORDER - толщина рамки вокруг изображения.

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

WIDTH и HEIGHT - высота и ширина изображения.

В завершении статьи несколько полезных советов:
  • Указав перед адресом графического изображения проток http://, вы создадите абсолютную ссылку. То есть сохранить веб-страницу для автономного просмотра вместе с изображением, обозначенным в ссылке, невозможно. Абсолютная ссылка предназначена для загрузки изображения из Интернета, а потому на компьютере картинка сохранена не будет.
  • Для графических элементов сайта (меню и баннеров) используйте формат gif, для полноцветных изображений - jpeg.
  • Старайтесь не применять атрибуты WIDTH и HEIGHT для изображений формата jpeg. Если указать большие значения длины и ширины, это повлечет снижение качества изображения. Картинку большого размера не стоит уменьшать с помощью данных атрибутов, веб-браузер все равно вначале будет загружать изображение первоначального размера, а уже потом изменять его. Поэтому прежде чем разместить изображение на веб-странице, при помощи любого графического редактора подкорректируйте его параметры.



Источник: http://web-silver.ru/
Категория: ВебМастеру | Добавил: ya (24.09.2008) E W
Просмотров: 628
Всего комментариев: 0




avatar