Форматы графических файловФормат файла, выбираемый для оптимизированного изображения, различается по цвету, тону и другим параметрам исходного изображения. В основном, многоцветные изображения, такие, как фотографии, сохраняются в формате JPEG. Иллюстрации с малым количеством цветов, четкими линиями или мелкими деталями, например, содержащие текст, должны быть оптимизированы в формате GIF или PNG-8. Формат PNG-24 также годится для фотографий, однако, в отличие от JPEG, этот формат занимает больше места для одного и того изображения. PNG-24 рекомендован для работы с полноцветными изображениями содержащих многоуровневую прозрачность. В зависимости от формата файла можно указывать качество, прозрачность и метод загрузки изображения. Фотография наиболее подходит для сжатия в JPEG или PNG-24 форматах , а иллюстрации в формате GIF или PNG-8 Список форматов, их описание и область применения приведены в таблице.
Вставка изображений в HTMLДля встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой. Файл с рисунком называется sample.gif и размещается в папке images корня сайта.
<html> <img src="http://www.htmlbook/images/sample.gif"> - это абсолютный адрес размещения изображения <img src="/images/sample.gif"> - адрес размещения изображения относительно корня сайта <img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа </body> Изменение размеров изображенийДля изменения размеров изображения средствами HTML предусмотрены параметры width и height тега IMG.
Обязательно задавайте размеры всех изображений на веб-странице. Это несколько ускоряет загрузку страницы, поскольку браузеру нет нужды вычислять размер каждого рисунка после его получения. Это утверждение особенно важно для изображений размещенных внутри таблицы. Такая таблица не будет показана до тех пор, пока рисунок не будет загружен полностью. Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту - размер изображения велик, но файл загружается быстро.
Алгоритм использующийся браузерами для ресемплирования (изменения размера) изображения весьма скверен и применять данный эффект нужно в крайних случаях, уж слишком качество картинки портится. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки содержащие прямоугольные области. Приведенный ниже файл узора занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150. |
