Как вставить картинку в HTML

kirilljsx

Чтобы добавить изображение на веб-страницу, используется тег <img>. Вот основные шаги:

1. Базовый синтаксис

<img src="путь/к/файлу.jpg" alt="Описание изображения">

src — путь к изображению (обязательный атрибут).
alt — текст, отображаемый, если изображение не загрузилось (важно для SEO и доступности).

2. Форматы изображений

Поддерживаемые форматы:

JPEG — для фотографий.
PNG — для изображений с прозрачностью.
GIF — для анимации.
SVG — векторные изображения (масштабируются без потерь качества).
WebP — современный формат с отличным сжатием.

Пример:

<img src="logo.png" alt="Логотип компании">

3. Пути к файлам

Относительный путь (файл в папке сайта):
```
<img src="images/photo.jpg" alt="Фотография">
```

Абсолютный путь (файл на другом сайте):

<img src="https://example.com/photo.jpg" alt="Внешнее изображение">

4. Размеры изображения

Можно задать ширину и высоту:

<img src="photo.jpg" width="300" height="200" alt="Картинка">

️ Совет: Лучше использовать CSS для управления размерами:

<img src="photo.jpg" style="width: 300px; height: auto;" alt="Картинка">

5. Дополнительные атрибуты

title — всплывающая подсказка при наведении:

<img src="photo.jpg" alt="Картинка" title="Наведите сюда">

loading="lazy" — отложенная загрузка (для ускорения страницы):
```
<img src="big-image.jpg" alt="Большая картинка" loading="lazy">
```

6. Пример готового кода

<!DOCTYPE html>
<html>
<head>
  <title>Пример</title>
</head>
<body>
  <h1>Моя страница</h1>
  <img src="images/sunset.jpg" alt="Закат над морем" width="600" height="400">
</body>
</html>

7. Полезные советы

Храните изображения в отдельной папке (например, images/).
Используйте описательные имена файлов (например, dog-running.jpg вместо img123.jpg).
Оптимизируйте изображения перед загрузкой (сжатие через инструменты вроде TinyPNG или Squoosh).

Теперь вы знаете, как вставить картинку в HTML!

SkitRa

Всё, что касается изображений, моя самая любимая часть. Несмотря на то, что функции весьма ограничены, с ними можно поиграть и подобрать четкую форму и размер для картинки. Особенно если картинка в формате без фона SVG, PNG или WebP

itrace

Ну насколько я знаю это не все функции.
Есть например align, что позволяет работать над выравниваени, относительно текста,
а ещё longdesc добавляет адрес с расширенным описанием для выбранного фото.
Касательно текста очень много дополнительных функций. Или здесь речь просто о самой вставке текста без всякий дополнений?)))