Размещение изображений на сайте. Прописываем картинки в HTML

Публикация размещена: 5-05-2019  Просмотров: 249 

Размещение изображений на сайте. Прописываем картинки в HTML

РАЗМЕЩЕНИЕ ИЗОБРАЖЕНИЙ


Как правило в шаблонах сайтов картинки хранятся в папке images или img (по обычаю).
Для хранения изображений можно создавать и другие папки. Допустим, для личных фото папку photos, для деловых папку business.
Главное при прописке картинки в HTML коде соблюдать путь (адрес) размещенного изображения. Примеры адресов ниже.

Если вы используете уже готовый шаблон при создании сайта с размещёнными изображениями, то способ размещения Ваших картинок, требует соблюдения следующих простых правил:
1. Ваша картинка должна быть переименована в имя заменяемой (чтобы не вносить изменения в html код).
2. Иметь такое же расширение: .jpg , .png, .gif (.jpg и .jpeg считаются разными форматами для html документа)
3. Иметь такой же размер вплоть до 1px, иначе пострадает качество картинки и возможно структура страницы.

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

Наиболее цивилизованный способ размещения изображений требует вмешательства в код страницы.
1. Создаете любые папки, размещаете в них любые изображения.
2. Прописываете их в коде страницы.

ПРОПИСКА АДРЕСА КАРТИНКИ


Для того, чтобы картинка появилась на сайте в код страницы необходимо добавить ссылку:

Упрощенные варианты:
<img src="photo/photo.jpg" />

<img src="photo/photo.jpg" width="200" height="250" />

photo - папка, в которой лежит картинка
photo.jpg - сама картинка, ее название

width - ширина в px (пикселах)
height - высота в px (пикселах)

Расширенный вариант:
<img src="photo/photo.jpg" width="200" height="250" alt="Текст если картинка не отображается" title="Всплывающий текст при наведении" />

Атрибут alt важен для поисковых систем и должен содержать в себе название картинки по теме статьи.

Как видно из примеров Ваша картинка photo.jpg лежит в папке photo, ее размеры 200х250px.
Этот код будет работать при условии, что страница сайта и папка photo лежат на одном уровне, т.е. в одной папке, допустим в корне сайта.

Размещение изображений на сайте. Прописываем картинки в HTML

Если картинка будет лежать в корне сайта вне папки, то код (путь) укорачивается до: <img src="photo.jpg" width="200" height="250" />

Если страница лежит не в корне сайта, а в какой-либо папке, то путь до картинки
(картинка в папке photo) станет таким: <img src="../photo/photo.jpg" width="200" height="250" />

Выше были рассмотрены относительные пути. Если у Вас возникли трудности с этими
заморочками, то используйте абсолютные пути, т.е. полный адрес месторасположения
картинки: <img src="http://ВАШСАЙТ.ru/photo/photo.jpg" width="200" height="250" />.

Проверить наличие картинки на сервере в конкретной папке можно просто. Введите полный адрес http://ВАШСАЙТ.ru/photo/photo.jpg в окно браузера - картинка откроется не зависимо от страницы. Если не появилась, значит адрес не правильный или Вы забыли загрузить изображение на сервер.

СОВЕТЫ ПО РАБОТЕ С КАРТИНКАМИ


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

Для увеличения скорости загрузки страниц заполняйте в изображениях теги width, height и обязательно ALT для поисковых роботов и валидности кода.
Если изображение имеет много цветов и высокого качества пользуйтесь форматом JPG. Он обеспечит меньший размер файла для этих изображений.
Если картинка с крупными монотонными областями или текстом, пользуйтесь форматом GIF. Формат JPG пачкает цвета и размазывает текст.

Если Вы работаете с Photoshop, то при сохранении картинок используйте: "Файл - Сохранить для Web и устройств...", после чего выберите оптимальное значение.
Вы просматриваете: » » Размещение изображений на сайте. Прописываем картинки в HTML