Основное использование. Чаще всего тег «img» используется для отображения изображения путем указания исходного файла в атрибуте «src». Например:

<img src="image.jpg" alt="Image description">

Размер и размеры изображения. Вы можете указать ширину и высоту изображения, используя атрибуты «ширина» и «высота». Это помогает браузерам выделить место для изображения до его загрузки, что может повысить производительность страницы. Однако обычно для стилизации рекомендуется использовать CSS вместо встроенных атрибутов.

<img src="image.jpg" alt="Image description" width="300" height="200">

Альтернативный текст. Атрибут «alt» предоставляет альтернативный текст для изображения, который отображается, если изображение не загружается или для пользователей, которые полагаются на программы чтения с экрана. В целях доступности важно предоставить описательный и содержательный альтернативный текст.

<img src="image.jpg" alt="Image description">

Адаптивные изображения. Чтобы обеспечить правильное отображение изображений на экранах разных размеров, вы можете использовать методы CSS или HTML, такие как медиа-запросы или атрибут «srcset», чтобы предоставить разные источники изображений для разных устройств.

<img srcset="image-large.jpg 1200w, image-medium.jpg 800w, image-small.jpg 400w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" alt="Image description">

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

<img src="placeholder.jpg" data-src="image.jpg" alt="Image description" loading="lazy">