HTML-код вставки является этапом оптимизации изображений, т. к. может влиять на их отображение, а также на ранжирование как самого изображения, так и всей веб-страницы в поисковой выдаче.
Содержание
На что может влиять HTML-код изображений?
Наличие и качество оформления картинок на веб-страницах могут повлиять на их восприятие не только живыми пользователями, но и поисковыми роботами. В частности, HTML-код вставки картинки может влиять на:
- Релевантность и ранжирование изображения и контента
- Это обеспечивается правильным применением атрибутов Alt и Title тега img, а также другими особенностями вставки картинок в HTML-код.
- Отображение картинки на веб-странице
- Условия, влияющие на отображение картинок, могут отличаться в зависимости от настроек браузера, размеров экрана устройства вывода, скорости передачи данных.
HTML-тег <img>
Для вставки картинки в HTML применяется одинарный тег img с указанием обязательных по стандарту атрибутов src и alt:
<!-- код вставки картинки в HTML: --> <img src="/image.jpg" alt="[альтернативный текст]" />
После вставки данного тега в HTML-код на веб-странице будет отображено изображение, размещенное по указаному пути (в атрибуте src) в своём реальном геометрическом размере (если он не задан атрибутами width и height тега img или соответствующими CSS-свойствами). Например:
Тег img является строчным HTML-элементом. Это значит, что он может применяться внутри текста и к нему применимы соответствующие CSS-свойства (такие как text-align и vertical-align), но не применимы свойства для блочных элементов (например, картинку нельзя выровнять по центру с помощью свойства margin: auto).
К HTML-тегу img применяются следующие атрибуты:
Атрибут Src тега <img>
Атрибут src должен содержать прямой или относительный путь к изображению:
<img src="/image.jpg" alt="" /> <!-- или --> <img src="/seoportal.net/image.jpg" alt="" />
Атрибут Alt тега <img>
В качестве значения атрибута alt указывается альтернативный текст для изображения, отображаемый в случае проблем с отображением самой картинки. Если в альтернативном тексте нет необходимости, то следует оставлять пустое значение атрибута:
<img src="/image.jpg" alt="" />
О влиянии значения атрибута alt на релевантность изображений и текста читайте в материале по ссылке.
Атрибут Title тега <img>
В качестве значения атрибута title указывается текст, отображаемый при наведении на картинку в качестве всплывающей подсказки:
<img src="/image.jpg" alt="" title="Всплывающая подсказка" />
На практике это будет выглядеть так (наведите курсор на изображение):
О влиянии значения атрибута title на релевантность изображений и текста читайте в соответствующем материале.
Атрибуты Width и Height тега <img>
С помощью атрибутов width (ширина) и height (высота) можно задавать геометрический размер отображения картинки на веб-странице. В HTML5 значение данных атрибутов может указываться в виде положительных чисел, выраженных в пикселях (для обоих атрибутов) или процентах (для атрибута width) от размера родительского элемента:
<img src="/image.jpg" width="100" height="100" alt="" /> <!-- или --> <img src="/image.jpg" width="100px" height="100px" alt="" /> <!-- или --> <img src="/image.jpg" width="100%" alt="" />
При применении только одного из указанных атрибутов значение второй величины регулируется автоматически с сохранением пропорций изображения.
Указание размера картинки ускоряет скорость загрузки веб-страницы, сообщая браузеру данную информацию.
Для стилизации изображений на сайте, в том числе для указания их размеров можно применять CSS-свойства:
width(ширина),height(высота)max-width(максимальная ширина),max-height(максимальная высота),min-width(минимальная ширина),min-height(минимальная высота).
Для указания размеров картинок на сайте рекомендуется применять CSS-свойства.
Пример указания размера картинки с помощью CSS в HTML-коде:
<img src="/image.jpg" style="width:100px" alt="" />
Атрибут Border тега <img>
Атрибут border должен содержать значение толщины границы вокруг изображения. Стиль и цвет границы определяется посредством CSS:
Атрибут border является устаревшим, вместо него следует применять CSS-свойство border или другие соответствующие свойства с префиксом border-.
Атрибут Align тега <img>
Атрибут align применяется для выравнивания картинки относительно текста и других строчных элементов:
Атрибут align является устаревшим, вместо него следует применять CSS-свойства.
Как вставить картинку в HTML?
Как вставить картинку в HTML-страницу?
Чтобы добавить картинку в HTML применяется тег img.
Как вставить картинку в таблицу в HTML?
HTML-код вставки изображения в ячейку таблицы может выглядеть следующим образом:
<table> <tr> <td> <img src="/image.jpg" alt="" /> </td> </tr> </table>
Как вставить картинку в HTML в блокноте?
Для этого достаточно открыть необходимый HTML-файл в блокноте и в нужном месте прописать тег вставки изображения, в атрибуте src которого следует указать путь к файлу.
Как вставить картинку в качестве фона?
Чтобы применить изображение в качестве фона применяются CSS-свойства background и background-image. Тег <img> для таких целей применять не целесообразно.
Как вставить ссылку в картинку?
Для этого необходимо разместить тег <img> в тег a:
<a href="/seoportal.net"> <img src="/image.jpg" alt="" /> </a>
В результате в качестве анкора ссылки будет применено указанное изображение.
Как вставить картинку по центру?
Чтобы выровнять изображение по центру веб-страницы применяются CSS-свойства.
Т. к. img является строчным HTML-элементом, можно прописать родительскому элементу изображения CSS-свойство text-align со значением center:
<p style="text-align:center"> <img src="/image.jpg" alt="" /> </p>
Также можно переопределить свойства тега img, сделав его блочным с помощью CSS-свойства display со значением block. В результате к элементу изображения можно применить стандартный способ выравнивания блочных элементов по центру:
<img src="/image.jpg" alt="" style="display:block; margin: auto" />
Комментарии