Нет такого сайта, на котором не было бы изображений, но использовать их нужно разумно и не забывать о том, что переизбыток графики утяжеляет сайт. Графика используется и в качестве фона для сайта и в качестве отдельных изображений. Как правило, для всех изображений в корневой папке сайта создаётся отдельная папка “images”.
Форматы изображений.
Для размещения на сайте рекомендуется использовать только три формата изображений: JPG, GIF, PNG.
Чем они отличаются?
JPG (Jpeg).
Это самый часто используемый формат в web-дизайне, хорошо подходит для публикации на сайте фотографий, может отображать более 16 млн. цветов. Обладает гибкой возможностью сжатия данных с потерями, поэтому изображения JPG можно сделать маловесными, что не повлияет на скорость загрузки страниц, но качество при этом сохраняется. Недостатком этого формата является то, что он не подходит для логотипов и графики, где важны чёткие линии и прозрачность.
GIF.
Идеально подходит для логотипов, но для фотографий имеет мало цветов, всего 8 бит. Поддерживает прозрачность и анимацию.
PNG.
Сочетает в себе преимущества Jpg и Gif. Его можно использовать и для фотографий и для логотипов, поддерживает прозрачность. Единственный недостаток – большой размер файла.
Размещение изображений на сайте.
Для всех изображений, которые будут использованы на сайте, создаётся отдельная папка “images”, путь к которой прописывается в атрибуте src.
Для добавления изображения на сайт используется тег <img>. Это не парный тег и закрывать его не нужно. Обязательным является атрибут «src», который указывает путь к изображению.
Обязательным атрибутом также является «alt», т.е. альтернативный текст. Для чего он нужен? Для SEO! Поисковики индексируют изображение, используя в первую очередь атрибут «alt». Также альтернативный текст показывается, когда картинка на сайте не загружается.
Изображение можно использовать и как ссылку.
Для определения размеров изображения используются атрибуты “width”(ширина) и “height”(высота).
Если “width”и “height” указать в процентах, то размер изображения будет зависеть от разрешения экрана.
Размер, рамку, отступы, обтекание и прочие стили лучше всего прописывать в файле CSS.