Для размещения изображения в коде HTML нужно как минимум следующее: <img src="xs-shirt.png" alt="Extra-Small Shirt">. В этом примере изображение на странице отобразится в своем исходном размере. Если изображение не может быть показано по любым причинам, значение атрибута alt будет выведено на экран как текстовая замена.

Изображение нередко может появляться как часть заголовка или абзаца:

<p><img src="xs-shirt.png" alt="Extra-Small Shirt" style="float: left">Наши футболки сделаны из 100% хлопка…</p>

Обратите внимание, расположение кода изображения внутри элемента имеет значение: передвигание изображения в абзаце изменит, каким образом и где относительно него будет расположен текст.

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

Изображение не обязательно должны иметь свойство всплытия, но без него текст не будет оборачиваться вокруг изображения: вместо этого нижний край изображения будет выровнен с базовой линией текста.

Несколько советов по использованию изображений:

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

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

• Не используйте код CSS, чтобы создать уменьшенные изображения, вместо этого сделайте новые версии изображений уменьшенных размеров в программе Photoshop или другом редакторе изображений. Если уменьшать изображения с помощью CSS, они будут грузиться так же долго, как и большие изображения, при этом на этот процесс еще и будут тратиться ресурсы пользователя.

• Не используйте программу Photoshop и подобные для добавления рамок или фильтров изображениям. Это в любом случае увеличит количество пикселей в изображении и размер файла изображения, а также для любого изменения нужно будет опять использовать редактор изображений, а нередко придется еще и хранить исходную версию, так как не все изменения можно внести в уже отредактированный и сохраненный файл изображения. Гораздо эффективней создавать рамки и фильтры с помощью CSS, мы часто рассказываем, как именно это можно делать.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Фоновые узоры в виде чешуи и шестиугольников с использованием SVG
• Создание таблицы с возможностью удаления строк
• Использование истинных цветов при печати веб-страниц