Вставить картинки на страницу сайта. Работа с изображением


Вставляем картинки в шаблон страниц сайта, редактируем изображения.
Вставить картинки на страницу сайта. Работа с изображением

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

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

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

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

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

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

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

2. <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 лежат на одном уровне, т.е. в одной папке, допустим в корне сайта.



Если картинка будет лежать в корне сайта вне папки, то код (путь) укорачивается до:
<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 и устройств...", после чего выберите оптимальное значение.

Автор: Saah | Просмотров: 2 017 | 4-08-2013,Вс, 17:05  

Добавить свой комментарий:

@
Похожие публикации