В этой статье мы узнаем, как использовать тег HTML IMG для вставки изображений или гифок на ваши HTML-страницы. Поэтому здесь вы найдете следующие темы:
- Тег HTML <img>
- Вставка изображения локально с помощью HTML img
- Вставка глобального изображения с HTML img
- Атрибуты заголовка и альтернативного текста
- Ширина и высота HTML img
- Плавающие изображения
- Рекомендации для HTML img
Тег HTML <img>
В самом начале сети страницы содержали только текст и ссылки. Это сделало контент ограниченным и однообразным. Создание ресурсов для размещения изображений на страницах не заняло много времени.
В HTML тегом, отвечающим за вставку изображений, является тег <img>. Однако технически HTML не включает само изображение, он просто связывает изображение со страницей. Таким образом, вы можете использовать его, как если бы он был вставлен на страницу. Вы можете видеть, что это похоже на процесс тега ссылки <a>. Следовательно, мы можем добавлять изображения как локально, так и глобально, то есть через внешний URL-адрес в основной домен.
Кроме того, важно подчеркнуть, что тег HTML img не имеет закрывающего тега и содержит шаблон отображения встроенного блока CSS. Вы также можете заметить, что стандартная регулировка ширины и высоты производится автоматически.
Вставка изображения локально с помощью HTML img
Чтобы вставить изображение в HTML, просто используйте тег img с атрибутом src. То есть: атрибут src или источник будет содержать URL-адрес вставляемого изображения.
Таким образом, окончательный синтаксис будет таким:
<img src="URL">
Чтобы вставить локальное изображение, мы можем включить только имя изображения с его расширением, как в примере ниже:
<img src="image.jpg">
Если он содержится в локальной папке, мы также должны ссылаться на эту папку. Например, если моя главная страница содержится в папке public_html и внутри нее у нас есть папка с именем images, где находится наше изображение, мы будем использовать следующий URL:
<img src="images/image.jpg">
Теперь предположим, что у нас есть папка public_html. Если вы не знакомы, полезно знать, что каталог public_html часто используется по умолчанию для файлов вашего веб-сайта на большинстве веб-серверов. В него мы включаем два каталога, папки изображений и страниц. В папке наших страниц вы можете найти HTML-код наших страниц. В папке изображений вы найдете локальные файлы изображений, которые мы будем использовать, как в нашем примере image.jpg. Таким образом, мы можем использовать ../, чтобы указать, что необходимо вернуть каталог. Позже мы сможем получить доступ к нужной папке (изображениям). См. Пример ниже:
<img src="../images/image.jpg">
С другой стороны, мы также можем включить полный URL-адрес нашего изображения. Предположим, что наш домен https://mydomain.ru и в предыдущем примере. Таким образом, мы будем использовать следующий код:
<img src="https://mydomain.ru/images/image.jpg">
Теперь вы можете включать любое изображение локально на свою страницу, используя функцию HTML img.
Вставка глобального изображения с HTML img
Теперь, когда мы изучили базовый синтаксис HTML img и как вставлять локальные изображения, давайте изучим, как вставлять глобальное изображение. Глобальный образ означает, что он находится за пределами нашей области. Для этого просто добавьте абсолютный URL-адрес изображения в атрибут src.
Допустим, вы хотите включить изображение, которое находится по абсолютному URL-адресу https://www.example.ru/pictures/picture_01.png. Таким образом, просто используйте следующий код:
<img src="https://www.example.ru/pictures/picture_01">
Однако при использовании глобального образа, то есть внешнего, мы сталкиваемся с проблемой. При этом вы можете зависеть от того, что другой домен всегда работает. Это потому, что если в какой-то момент этот домен перестанет работать, изображение не будет загружено.
Чтобы избежать проблем с вашим HTML-изображением, мы рекомендуем избегать использования внешних изображений. Кроме того, еще одной серьезной проблемой может быть использование изображений, содержащих авторские права. Поэтому всегда помните об этих проблемах и при необходимости не забывайте обращаться к ним должным образом.
Атрибуты заголовка и альтернативного текста
Помимо атрибута src, тег <img> имеет другие атрибуты, дополняющие его структуру. Вы можете включить атрибут заголовка для изображения. Этот заголовок будет отображаться только тогда, когда пользователь наводит курсор на изображение. Поэтому, чтобы включить заголовок в изображение, просто вызовите его с помощью атрибута title=»…». Посмотрим на пример ниже:
<img src="/logo.png" title="Логотип AndreyEx">
Таким же образом мы можем включить альтернативный текст . Этот текст появится вместо изображения, если изображение загружено неправильно. Обычно это может происходить из-за неправильного URL-адреса изображения, неподдерживаемого формата изображения или из-за того, что изображение загружается. Чтобы включить альтернативный текст, вы можете использовать атрибут alt=”…” . Этот атрибут также высоко ценится поисковыми системами. Поэтому вам следует использовать его, если вы хотите выполнить оптимизацию SEO . Ниже приведен пример использования альтернативного текста в HTML img:
<img src="picture_01.png" alt="Альтернативный текст для описания моего изображения">
Ширина и высота HTML img
Тег <img> имеет автоматическую высоту и ширину по умолчанию. Следовательно, при его использовании он будет включать исходный размер изображения без искажений. Однако вы можете управлять этими размерами напрямую через CSS или через атрибуты высоты и ширины.
Если мы будем использовать только один из них, другой будет регулироваться автоматически, пропорционально, без искажения изображения. Используя оба, он будет содержать точно определенные высоту и ширину, поэтому вы можете исказить изображение. Кроме того, если вы используете изображения с низким разрешением и размером больше оригинала, они, скорее всего, также будут искажены. Поэтому очень важно использовать изображения с разрешением, подходящим для ваших страниц, или в векторных форматах.
В этом исходном изображении стандартное разрешение составляет 250 пикселей в ширину и 100 пикселей в высоту. Однако вы можете определить для него размер. Итак, давайте установим ширину 100 пикселей, чтобы увидеть, что произойдет.
<img src="/logo.png" width="100">
Обратите внимание, что даже при регулировке только ширины высота регулируется автоматически, без искажения изображения. Вы можете добиться того же результата, отрегулировав только высоту, чтобы ширина регулировалась автоматически.
Плавающие изображения
Хотя HTML img по умолчанию имеет отображение встроенных блоков, вы можете часто захотеть, чтобы он перемещался в тексте. Это делается для того, чтобы текст мог адаптироваться к своему положению без потери исходного форматирования.
Следовательно, вы можете использовать поплавок в изображении через CSS. Давайте посмотрим на приведенный ниже пример применения CSS в атрибуте style и с текстом:
<!DOCTYPE html> <html> <body> <h2> Плавающие изображения </h2> <p> <strong> Плавающее изображение вправо </strong> </p> <p> <img src="logoAndreyEx.png" alt="Логотип AndreyEx" style="float: right; width: 200px"> </p> <p> <strong> Плавающее изображение слева </strong> </p> <p> <img src="logoAndreyEx.png" alt="Логотип AndreyEx" style="float: left; width: 200px"> </p> </body> </html>
Изображения перемещаются в нужную сторону, а текст правильно адаптируется к ним.
Рекомендации для HTML img
Наиболее приемлемыми форматами изображений во всех браузерах являются .jpeg или .jpg , .png и .gif. Допустимы и другие форматы, и вы можете их использовать. Однако принятые форматы могут отличаться в зависимости от версии браузера. Поэтому мы рекомендуем использовать изображения в указанных форматах.
С помощью этого руководства вы теперь можете вставлять любое изображение на свои HTML- страницы. Кроме того, вы можете изменять коды, описанные в этом руководстве, по своему желанию. Мы рекомендуем прочитать официальную документацию W3C о теге <img> или эту другую статью W3C, в которой объясняются несколько способов стилизации изображений.