Артём Мáлков

Как вставить изображение (картинку) на сайт в HTML?

8 фев0 комм

Использование сопутствующих изображений в тексте значительно улучшает восприятие предоставляемой вами информации читателями. В HTML для вставки изображений на страницу существует соответствующий тег <img>. И сегодня мы подробно рассмотрим то, как использовать этот тег, какие атрибуты он поддерживает, и ответим на несколько частых вопросов, которыми задаются начинающие вебмастера.

Вставка изображения (картинки) на страницу в HTML

Как уже говорилось ранее, для вставки изображений на страницу используют тег <img>. Краткая его форма выглядит следующим образом:

<img src="/img/logo.png">

в HTML, и так:

<img src="/img/logo.png" />

в XHTML. Из примера видно, что для последнего добавляется слеш (косая черта) в конце.

Все это, так сказать, быстрая вставка изображения, не содержащая в себе никаких атрибутов, за исключением ссылки на файл.

Этот тег (<img>), в отличие, например, от ссылки, не закрывается и пишется в той форме, что я привел выше. Рекомендуемым атрибутом является «alt»:

<img src="/img/logo.png" alt="Логотип">

который показывается в момент, пока изображение не загрузилось полностью или имеет битую (несуществующую) ссылку.

А теперь есть смысл рассказать обо всех атрибутах, которые поддерживает тег <img>.

Список существующих атрибутов тега <img> в HTML

Все атрибуты у изображений прописываются через пробел. А вот собственно и сам их перечень.

src – содержит ссылку до изображения, может быть как абсолютной (ссылка до файла, который находится на другом сайте), так и относительной (ссылка до файла, который находится на вашем сайте). Допустимые форматы: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, SVG и Base64. Пример использования с абсолютным адресом изображения:

<img src="https://example.com/img/logo.png" />

Пример использования с относительным адресом изображения:

<img src="/img/logo.png" />

alt – содержит текст – подсказку у не появившегося/отсутствующего изображения. Пример использования:

<img src="/img/logo.png" alt="Логотип" />

align – задает выравнивание изображения относительно рядом находящегося текста (создание обтекания изображения текстом). Допустимые значения: top, bottom, middle, left и right. Пример использования:

<img src="/img/logo.png" align="right" />

Атрибут не поддерживается в HTML5.

border – задает ширину границы (рамки) вокруг изображения. Допустимые значения: px, % и другие величины. Пример использования:

<img src="/img/logo.png" border="2px" />

Атрибут не поддерживается в HTML5.

height – задает высоту изображения. Допустимые значения: px, % и другие величины. Пример использования:

<img src="/img/logo.png" height="200px" />

width – задает ширину изображения. Допустимые значения: px, % и другие величины. Пример использования:

<img src="/img/logo.png" width="200px" />

hspace – задает горизонтальный (слева и справа) отступ у изображения. Допустимые значения: px, % и другие величины. Пример использования:

<img src="/img/logo.png" hspace="20px" />

Атрибут не поддерживается в HTML5.

vspace – задает вертикальный (сверху и снизу) отступ у изображения. Допустимые значения: px, % и другие величины. Пример использования:

<img src="/img/logo.png" vspace="20px" />

Атрибут не поддерживается в HTML5.

longdesc – содержит адрес до расширенного описания изображения. Допустимые значения: TXT-файл. Адрес, как и у атрибута src, может быть абсолютным или относительным. Пример использования:

<img src="/img/logo.png" longdesc="/img/desc-logo.txt" />

crossorigin – атрибут, позволяющий осуществить вставку изображения с другого сайта через кросс-доменный запроса (CORS). Допустимые значения: anonymous (анонимный запрос без передачи учетных данных) и use-credentials (запрос с передачей учетных данных). Пример использования:

<img src="https://example.com/img/logo.png" crossorigin="anonymous" />

Атрибут поддерживается только в HTML5.

srcset – задает список файлов, которые будут отображаться в зависимости от ширины или плотности экрана. Допустимые значения: Nw (где N – любое целое положительное число) и Kx (где K – положительное десятичное число). Пример использования:

<img src="/img/logo.png" srcset="/img/logo-min.png 320w, /img/logo-mid.png 480w, /img/logo-full.png 768w" />

<img src="/img/logo.png" srcset="/img/logo-mid.png 2x" />

Атрибут не поддерживается в браузерах Android и Internet Explorer.

sizes – задает размер для изображений, указанных в атрибуте srcset. Допустимые значения: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Nq, Nmm, Npc, Ncm, Npt и Npx, где N – положительное число. Пример использования:

<img src="/img/logo.png" srcset="/img/logo-min.png 320w, /img/logo-full.png 768w" sizes="(max-width: 600px) 300px, (min-width: 600px) 600px" />

Принцип действия примера такой: если разрешение экрана меньше 600 px, то задаем ширину изображений, равную 300 px, и наоборот, если больше 600 px – фиксируем ширину изображений на 600 px.

Атрибут, как и srcset, не поддерживается в браузерах Android и Internet Explorer.

usemap – связывает изображение с картой, которая задается с помощью тега <map>. Допустимые значения: #name (где name – значение атрибута name карты) и #id (где id – значение атрибута id карты). Пример использования:

<img src="/img/logo.png" usemap="#my_point">

Нельзя создавать связь, если карта (<map>) обернута в ссылку (<a>) или кнопку (<button>).

ismap – связывает изображение с некоторой областью серверной карты. При нажатии на такую картинку, считываются координаты нажатия от левого верхнего угла и посылаются запросом на указанный в ссылке адрес. Для работы атрибута, изображение должно быть обернуто в ссылку (<a>). Пример использования:

<a href="/map/ismap.php">
	<img src="/img/logo.png" ismap>
</a>

в HTML, и так:

<a href="/map/ismap.php">
	<img src="/img/logo.png" ismap="ismap" />
</a>

в XHTML.

Помимо этого, <map> поддерживает глобальные атрибуты class и id, а также напрямую встраивание стилей:

<img src="/img/logo.png" style="width: 200px; border: 0" />

По желанию, большая часть персональных атрибутов <map> может быть заменена соответствующими стилями.

Как вставить изображение (картинку) в таблицу?

Неважно, куда именно вы хотите вставить изображение на сайте, будь это таблица или, например, блок div, во всех случаях вставка осуществляется все по тому же принципу:

<table>
	<tr>
		<td>Наш логотип:</td>
		<td>
			<img src="/img/logo.png" alt="Логотип">
		</td>
	</tr>
</table>

Все просто.

Как сделать изображение (картинку) ссылкой в HTML?

Для того чтобы сделать вашу картинку кликабельной, добавив ей функцию перехода к другой странице вашего (и не только) сайта, оберните ее в тег <a>:

<a href="/about_us" title="О нас">
	<img src="/img/logo.png" alt="Логотип">
</a>

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

Остались вопросы? Не стесняйтесь и задавайте их в комментариях под данной статьей.

Рекомендуем к просмотру
Lazy Load 2.0 – ленивая (отложенная) загрузка изображений на JavaScript
Модули и скрипты
Выводим изображение в кодировке Base64 на HTML/CSS и сохраняем его на jQuery+PHP
Статьи и советы
Dompdf – мощнейший PHP-класс для конвертирования HTML-документов в PDF-файлы
Модули и скрипты
0
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Подняться наверх
«Pandoge» - помощник вебмастера