Веб-мастерская Ларисы ВоронинойРабота с изображениями в HTML. Изображения в HTML.
WEB-мастерская Ларисы Ворониной logo

Работа с изображениями в HTML. Ноя 2 2016


Нет такого сайта, на котором не было бы изображений, но использовать их нужно разумно и не забывать о том, что переизбыток графики утяжеляет сайт.  Графика используется и в качестве фона для сайта и в качестве отдельных изображений. Как правило, для всех изображений в корневой папке сайта создаётся отдельная папка “images”.

Форматы изображений.

Для размещения на сайте рекомендуется использовать только три формата изображений: JPG, GIF, PNG.

Чем они отличаются?

JPG (Jpeg).

Это самый часто используемый формат в web-дизайне, хорошо подходит для публикации на сайте фотографий, может отображать более 16 млн. цветов. Обладает гибкой возможностью сжатия данных с потерями, поэтому изображения JPG можно сделать маловесными, что не повлияет на скорость загрузки страниц, но качество при этом сохраняется. Недостатком этого формата является то, что он не подходит для логотипов и графики, где важны чёткие линии и прозрачность.

GIF.

Идеально подходит для логотипов, но для фотографий имеет мало цветов, всего 8 бит. Поддерживает прозрачность и анимацию.

PNG.

Сочетает в себе преимущества Jpg и Gif. Его можно использовать и для фотографий и для логотипов, поддерживает прозрачность. Единственный недостаток – большой размер файла.

Размещение изображений на сайте.

Для всех изображений, которые будут использованы на сайте, создаётся отдельная папка “images”, путь к которой прописывается в атрибуте src.

Для добавления изображения на сайт используется тег <img>. Это не парный тег и закрывать его не нужно. Обязательным является атрибут «src», который указывает путь к изображению.

<img src="images/logo.png">

Обязательным атрибутом также является «alt», т.е. альтернативный текст. Для чего он нужен? Для SEO! Поисковики индексируют изображение, используя в первую очередь атрибут «alt». Также альтернативный текст показывается, когда картинка на сайте не загружается.

<img src="images/logo.png" alt="Логотип сайта">

Изображение можно использовать и как ссылку.

<a href=”index.html”><img src=”logo.png” alt=”logotip saita”></a>

Для определения размеров изображения используются атрибуты “width”(ширина) и “height”(высота).

<img src="logo.png" width="100" height="100">

Если “width”и “height” указать в процентах, то размер изображения будет зависеть от разрешения экрана.

Размер, рамку, отступы, обтекание и прочие стили лучше всего прописывать в файле CSS.


Рейтинг@Mail.ru