Отображение изображений на сайте требует знания HTML-разметки и правил размещения графических файлов. Рассмотрим основные методы вставки картинок в веб-документы.
Содержание
Отображение изображений на сайте требует знания HTML-разметки и правил размещения графических файлов. Рассмотрим основные методы вставки картинок в веб-документы.
Базовый синтаксис вывода изображения
| Атрибут | Назначение | Пример |
| src | Путь к файлу изображения | src="images/photo.jpg" |
| alt | Альтернативный текст | alt="Описание изображения" |
| width/height | Размеры изображения | width="300" height="200" |
Способы указания пути к изображению
1. Относительный путь
- Из той же папки: src="image.png"
- Из подпапки: src="images/photo.jpg"
- На уровень выше: src="../picture.gif"
2. Абсолютный путь
- Полный путь на сервере: src="/var/www/images/logo.png"
- URL изображения: src="https://example.com/pic.jpg"
Рекомендации по работе с изображениями
| Параметр | Рекомендация |
| Форматы | JPEG для фото, PNG для графики, WebP для современной оптимизации |
| Размеры | Оптимизировать под целевое разрешение экрана |
| Имена файлов | Латинские буквы, без пробелов, описательные |
Дополнительные атрибуты
- loading="lazy" - отложенная загрузка
- decoding="async" - асинхронное декодирование
- title - всплывающая подсказка
- srcset - разные версии для разных разрешений
Примеры кода
Простое изображение
| Код | Результат |
| <img src="logo.png" alt="Логотип компании"> | Выведет изображение логотипа |
Изображение с размерами
- <img src="photo.jpg" width="800" height="600" alt="Фотография">
- Рекомендуется указывать либо width, либо height для сохранения пропорций
Оптимизация производительности
- Используйте сжатие изображений без потери качества
- Применяйте формат WebP для браузеров, которые его поддерживают
- Реализуйте lazy loading для изображений ниже сгиба
- Указывайте явные размеры для предотвращения layout shift
Правильное отображение изображений улучшает пользовательский опыт и способствует SEO-оптимизации веб-страницы.
