Вставка графических файлов в HTML-документ осуществляется при помощи тега img, где “img” – это сокращение от английского слова image (изображение). Сам тег не размещает картинку прямо на странице; он лишь хранит ссылку и создает нужный блок, в котором браузер выводит файл в формате GIF, JPEG или PNG.
- JPG – самый популярный формат для фотографий. Файлы с расширением .jpg способны отображать миллионы оттенков, что особенно важно при точном воспроизведении цветовых градиентов и нюансов снимка. К сожалению, в них нельзя задать прозрачные области.
- GIF предназначен для простой графики – логотипов, пиктограмм и подобных элементов. Такие изображения не подходят для фотоснимков из-за ограниченного цветового диапазона, но зато поддерживают прозрачность и анимацию, а размер файла обычно минимален.
- PNG сочетает в себе возможность отображать миллионы цветов с возможностью включения прозрачных зон. Однако PNG-файлы зачастую чуть крупнее, чем JPG или GIF.
Тег img обязателен иметь два атрибута: src и alt.
src указывает путь (URL) к изображению, которое фактически не «вставляется» в документ. Браузер загружает картинку по указанной ссылке и выводит её там, где находится тег.
alt задаёт альтернативный текст, который появится только тогда, когда изображение не может быть показано (неверный путь, файл удалён и т.п.).
Если нужно превратить картинку в ссылку, оберните тег img внутри элемента a. В результате вокруг изображения появится рамка, которую удобно убрать с помощью:
a href="#" img src="image.png" alt="красивая картинка" style="border: 0;" /a
Картинки можно использовать как карты-изображения – один файл содержит несколько активных областей разной формы, каждая из которых ведёт на отдельную ссылку. По внешнему виду они ничем не отличаются от обычного изображения.
Примечание: для добавления фонового рисунка можно воспользоваться CSS-свойством background-image, которое заменит обычный задний фон элемента на картинку.
Атрибуты - src:
- Указывает браузеру URL нужного изображения.
- alt:
- Предоставляет текстовое описание картинки, которое будет видно только в случае её недоступности.
Примечание: для создания всплывающей подсказки при наведении используйте глобальный атрибут title. Его значение – произвольная строка, содержащая дополнительную информацию о картинке.
Если изображение служит лишь украшением и не несёт смысловой нагрузки, можно оставить alt пустым (alt=""). - height:
- Указывает высоту изображения в пикселях.
- ismap:
- Булевый атрибут. Если он присутствует, браузер понимает, что картинка принадлежит к карте-изображению на сервере (т.е. содержит интерактивные области). Допустимые формы записи:
img ismap![]()
![]()
При клике координаты отправляются в URL-запрос. Примечание: атрибут ismap применим только тогда, когда элемент img находится внутри тега a, имеющего атрибут href.
- usemap:
- Определяет картинку как карту-изображение. Значение должно начинаться с символа «#» и связывается со значением атрибута
name или id тега map. Примечание: нельзя использовать usemap, если img является потомком a или другого элемента.
- width:
- Указывает ширину изображения в пикселях.
Примечание: всегда задавайте атрибуты width и height – браузер заранее резервирует нужное пространство, что предотвращает смещение контента во время загрузки страницы, особенно для пользователей с медленным интернетом.
Тег img поддерживает также атрибуты title, longdesc и другие, но они не обязательны.
Пример img src="images.jpg" alt="цветок"