Изображения на веб-страницах

Важную роль в оформлении веб-страниц играют графические объекты: фотографии, рисунки, фоновые изображения («обои»), разделительные линии. Они делают страницы более привлекательными, а во многих случаях являются и основными источниками информации.

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

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

Для отображения рисунков предназначен непарный тег < IMG >. Его неотъемлемым атрибутом является имя графического файла < img src="имя_файла" >.

Веб-страницы и файлы с изображениями могут храниться в разных папках, тогда в атрибуте src тега < img > необходимо указывать путь. Указание путей обязательно для ссылок на все объекты, например на другие страницы, аудио- и видеофрагменты.

Тег < img > может содержать и другие атрибуты, которые определяют способ отображения рисунка.

Высоту и ширину отображаемого на экране рисунка в пикселях можно задать значениями атрибутов height и width соответственно, а толщину рамки вокруг изображения — значением атрибута border. По умолчанию рамки нет, т. е. border="0". Указание размеров позволяет увеличить или уменьшить видимое на экране изображение (при этом исходный рисунок и файл, в котором он хранится, остаются неизменными). Если размеры не заданы, то по мере загрузки рисунка может изменяться расположение текста и других объектов на экране. Чтобы этого не происходило, полезно всегда указывать эти атрибуты, даже если изображение не масштабируется.

Значения атрибута align задают выравнивание текста относительно рисунка (top — по верхнему краю; middle — по середине; bottom — по нижнему краю) или способ обтекания рисунка текстом (left — рисунок слева от текста; right — рисунок справа от текста).

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

В качестве фона страницы можно использовать изображение из файла. Фоновый рисунок («обои») задается с помощью атрибута background в теге < body >. Чтобы повторяющийся фоновый рисунок заполнял страницу без стыков, его верхняя и нижняя, левая и правая стороны не должны отличаться. Задать фоновый рисунок и одновременно закрасить его некоторым цветом нельзя.

От удачного выбора цвета фона или фонового рисунка, шрифта и цвета текста, а также других элементов оформления страницы зависит восприятие ее содержания. В Интернете свободно распространяется громадное количество «обоев» и готовых шаблонов веб-страниц разного назначения. Создание собственных веб-страниц на их основе сводится в основном к вводу текста и ссылок на нужные изображения.

23. Основы веб-конструирования. Подготовка изображения для интернета. Разработка фрагментов сайтов по различным предметным областям.

Подготовка изображений для Интернета

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

Нарисованные в графическом редакторе Paint картинки по умолчанию сохраняются в формате BMP (Bit Map Picture — битовая карта изображения). В этом формате изображения хранятся в файлах в неупакованном виде.

Информационный объем изображения в байтах равен произведению его ширины W (width) и высоты H (height) в пикселях и глубины цвета С в битах на 1 пиксель (W-H-С). Так, файл с небольшой картинкой размером 100*100 пикселей при глубине цвета 24 бит/пиксель будет иметь размер около 29 Кбайт. Объем файла с изображением 800⴬600 пикселей будет иметь размер около 1,4 Мбайт, а время его загрузки при скорости модема 56 кбит/с составит более 200 с, что совершенно неприемлемо.

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

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

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

Формат JPG позволяет передавать богатую палитру цветов и лучше всего подходит для изображений с плавным переходом тонов без четких линий и контуров, например портретов, пейзажей. Такие изображения называют полутоновыми. Оптимизация заключается в замене областей с небольшим градиентом цвета на однотонные. Степень сжатия характеризуют показателем качества от 0 до 100. Часто по умолчанию его принимают равным 65, что соответствует сжатию исходного неупакованного изображения в 6—10 раз. Сохранение изображений в формате JPG предусмотрено практически во всех современных цифровых фотоаппаратах.

При подготовке изображений для Интернета выработаны определенные рекомендации. Размеры сохраняемых в файлах изображений должны соответствовать размерам изображений, отображаемых на веб-страницах, несмотря на то, что их ширину и высоту можно задавать в теге <img>. Например, для мониторов 17′ с разрешением 1280*768 пикселей ширина изображения на странице чаще всего не превышает 600—800 пикселей, а высота — 400—600. Если изображение обтекается текстом, то его размер должен находиться в пределах 200—400 пикселей.

Процесс оптимизации изображения сводится к двум основным операциям:

• приведение изображения к требуемому размеру;

• сжатие изображения с сохранением оптимального качества

Пример: фотография размером 2560*1920 пикселей сохранена в файле объемом 2,4 Мбайт. Ее ширину и высоту уменьшили в 4 раза. Определить объем файла и размеры изображения.

Размер изображения станет равным 640*480 пикселей, при этом объем файла уменьшится в 4 * 4 = 16 раз и составит 0,15 Мбайт. В 16 раз уменьшится и время загрузки этого изображения!

Изменять размеры изображений и сохранять их в форматах GIF или JPG можно практически в любом растровом графическом редакторе, в том числе в Paint. Для сжатия изображений требуется более сложный редактор.

Возможность оптимизации изображений предоставляют графические редакторы, например, Paint.Net, Adobe Photoshop.

Пример: оптимизировать изображение из файла roza1200.jpg так, чтобы на веб-странице его размер составил 300*300 пикселей.

Откроем в редакторе Adobe Photoshop изображение из файла roza1200.jpg. Для изменения размера изображения из меню Изображение (Image) вызовем окно Размер изображения (Image Size) и установим значение Ширина (Width) 300 пикселей. При включенном флажке Сохранить пропорции в такой же пропорции изменится и высота.

Из меню Файл (File) вызовем окно Сохранить для веб и устройств (Save for Web) и с помощью вкладки 4 варианта получим четыре изображения: исходное (слева вверху) и оптимизированные с качеством 65 % (справа вверху), 30 % и 10 % (внизу)

Будем уменьшать показатель Качество до появления видимых изменений на оптимизированном изображении. Это можно сделать грубо, выбрав в поле Установки (Setting) один из показателей качества (Максимальное, Высокое, Среднее, Низкое), и точно, установив подходящее числовое значение. Остановимся, например, на значении 30 и нажмем кнопку Сохранить (Save).

Объем оптимизированного файла не превышает 10 Кбайт, т. е. уменьшился почти в 75 раз. Не забудем ввести новое имя файла, например roza300-30.jpg.