HTML – Учебник с тегами изображения

1656020655 html – uchebnik s tegami izobrazheniya

В HTML вы используете <img> тег для добавления изображений на веб-сайты. Это встроенный и пустой элемент, означающий, что он не начинается с новой строки и не принимает закрывающий тег (в отличие от абзаца (<p>) тег, например).

The <img> тег имеет несколько атрибутов, из которых src, height, widthи alt являются важнейшими.

Знание тонкостей и лучших практик <img> тег имеет решающее значение, поскольку изображения могут отрицательно повлиять на время загрузки вашего сайта и SEO.

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

Вот основной синтаксис для добавления <img> тег к вашему HTML:

<img 
    src=" 
    alt="A Group of Ring-tailed Lemurs" 
/>

Теперь давайте поговорим о его атрибутах и ​​как они работают.

HTML <img> Атрибуты тега

The src Атрибут

The src атрибут означает источник изображения. Без него сам тэг не работал бы в реальном мире.

Он указывает браузеру, где можно найти изображение. Поэтому он принимает относительный путь, если изображение размещено локально, или абсолютный URL-адрес, если изображение размещено в Интернете.

The alt Атрибут

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

Во фрагменте кода, приведенном ниже, источник изображения указан неправильно, показывая роль, которую выполняет alt атрибут играет:

<img
     src="
     alt="A Group of Ring-tailed Lemurs"
/>

Это CSS, центрирующий изображение по горизонтали и вертикали:

body {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   height: 100vh;
  }

И это выглядит так:
alt-text-1

Атрибут alt очень важен по двум другим причинам:

  • SEO: он указывает веб-сканерам, о чем идет речь в изображении
  • Доступность: это помогает пользователям считывать с экрана знать, о чем говорится на изображении, чтобы они могли сообщить об этом людям с недостатками зрения. Кроме того, он позволяет пользователям с низкой пропускной способностью знать, о чем идет речь в изображении.

The width и height Атрибуты

Эти атрибуты можно использовать для определения определенной ширины и высоты для изображений. С помощью этих атрибутов можно изменить размер изображения вверх или вверх.

Однако в идеале не следует изменять размер изображения с помощью этих атрибутов. Мы подробнее коснемся этого в разделе лучших практик.

HTML <img> Отметьте лучшие методы

Не изменяйте размер изображения с помощью атрибутов ширины и высоты.

Это плохая практика, поскольку это может привести к искривлению изображения и повлиять на качество.

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

Во фрагменте кода ниже я указываю ширину и высоту изображения – плохая практика:

<img
      src="
      height="440px"
      width="440px"
      alt="A Group of Ring-tailed Lemurs"
/>

Изображение выглядит так:
неправильная-ширина-высота-использование-1

Без использования атрибутов ширины и высоты изображения выглядит следующим образом:
no-width-height-1

Выглядит лучше? Да!

Назовите свои изображения должным образом

Правильное название изображений может помочь поисковым системам понять, о чем изображение. Например, назовите изображение ring-tailed-lemurs.webp вместо photo-1580855733764-084b90737008.webp. Последнего недостаточно для поисковой оптимизации (SEO).

Уменьшить размер файла изображения

Размер файла изображения имеет решающее значение, когда речь идет о скорости страницы. Меньший размер изображения (сохраняющий качество изображения) сокращает время загрузки, в то время как большие изображения загружаются вечно.

Существует несколько инструментов и различных программ, которые могут помочь вам в этом. Некоторые примеры: imageOptim, jStrip и PNGGauntet. И если вас беспокоит SEO, вы захотите рассмотреть их, поскольку скорость страницы является важнейшим фактором рейтинга.

Размещение изображений с помощью CDN

Представьте, что сайт находится в Соединенных Штатах, но пользователь из Африки хочет получить к нему доступ. Такие активы, как изображения и пиктограммы, должны были бы путешествовать из Штатов в Африку, что, в свою очередь, замедляет время загрузки.

Использование CDN (Сеть доставки содержимого) позволит кэшировать изображения веб-сайта в нескольких местах по всему миру. CDN может обслуживать их из ближайших к пользователю мест, улучшая время загрузки и обеспечивая лучшую работу пользователя.

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

Используйте описанный альтернативный текст

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

Например, воспользуйтесь этим:

<img
   src="
   alt="A Group of Ring-tailed Lemurs"
/>

Вместо этого:

<img src=" alt="Lemurs" />

Использовать title Атрибут Показать подсказки

Так же, как и alt атрибут, вы можете использовать title атрибут, чтобы показать дополнительную информацию об изображении. Браузеры отображают это как подсказку, когда пользователь наводит курсор на изображение.

<img
    src="
    alt="A Group of Ring-tailed Lemurs"
    title="Ring-tailed lemurs are led by females"
/>

подсказка-1

<img> Тег Современные подходы

Существуют разные способы использования <img> чуть более современные и современные. Давайте сейчас рассмотрим некоторые из них.

Отложенная загрузка изображений

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

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

Чтобы применить отложенную загрузку, добавьте атрибут loading к <img> и установите значение «lazy».

<img
      src="
      alt="A Group of Ring-tailed Lemurs"
      title="Ring-tailed lemurs are led by females"
      loading="lazy"
/>

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

Использовать <figure> и <figcaption> Теги

Зачастую вам может потребоваться указать пользователю подпись на изображение. Многие разработчики делают это, размещая a <p> тег сразу после <img>.

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

<img
      src="
      alt="A Group of Ring-tailed Lemurs"
      title="Ring-tailed lemurs are led by females"
      loading="lazy"
/>
<p>Ring-tailed lemurs are social animals</p>

неправильный субтитр-1

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

HTML5 представил <figure> и <figcaption> элементы, которые помогут в этом. Вы заворачиваете <img> тег внутри a <figure> элемент, и вы указываете подпись внутри <figcaption> элемент.

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

Фрагменты кода ниже и снимки экрана показывают изображение с и без <figure> и <figcaption> элементы:

<figure>
   <img
     src="
     alt="A Group of Ring-tailed Lemurs"
     title="Ring-tailed lemurs are led by females"
     loading="lazy"
   />
<figcaption>Ring-tailed lemures are social animals</figcaption>
</figure>

справа

Теперь вы можете увидеть, что изображение и подпись хорошо связаны.

Используйте формат изображения .webP

.webP – это формат изображений, созданный Google. По словам создателя, это формат изображения, меньший по размеру, чем его аналоги – JPG, JPEG, PNG, но с таким же качеством.

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

Вывод

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

Большое спасибо, что читаете, и продолжайте кодировать.

Добавить комментарий

Ваш адрес email не будет опубликован.