Как вставить гифку в html

Узнайте как легко вставить гифку в HTML-код с помощью тега , и примера использования этого тега.

Как вставить гифку в html

Чтобы вставить гифку в html, необходимо использовать тег

<img>

. Этот тег состоит из атрибутов, отвечающих за настройки изображения. Наиболее важные из них: src – адрес изображения; alt – альтернативный текст; width и height – размеры изображения. Пример кода для вставки гифки:

<img src="http://example.com/image.gif" alt="Example GIF" width="400" height="300">

В этом примере адрес изображения находится по адресу http://example.com/image.gif. Альтернативный текст пишется между кавычками после атрибута alt, а ширина и высота изображения задаются в пикселях, после атрибутов width и height соответственно.

Также можно использовать атрибуты, позволяющие повторно использовать изображение в разных размерах и обеспечивающие высокое качество изображения. Наиболее распространенные из них: sizes – используется для задания размера изображения; srcset – используется для указания набора изображений с разными разрешениями. Пример кода с использованием этих атрибутов:

<img src="http://example.com/image.gif" 
alt="Example GIF" 
sizes="(min-width: 800px) 400px, 80vw" 
srcset="image-1024.gif 1024w, image-2048.gif 2048w"
width="400" height="300">

В данном примере используются два дополнительных атрибута: sizes и srcset. Атрибут sizes задает ширину изображения в зависимости от ширины окна браузера. Атрибут srcset используется для определения изображений с разными разрешениями, которые будут использоваться в зависимости от разрешения экрана. В примере используются два изображения: image-1024.gif с разрешением 1024 пикселей и image-2048.gif с разрешением 2048 пикселей.

Таким образом, с помощью тега

<img>

и атрибутов, описанных выше, можно легко вставить гифку в html.