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

Описание

Атрибут src указывает URL-адрес изображения, которое будет отображаться элементом <img>. Это обязательный атрибут для работы тега изображения (кроме случаев использования srcset).

Пример использования:
<img src="images/photo.jpg" alt="Описание изображения" width="800" height="600">

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

Тип Пример Примечание
Абсолютный URL src="https://example.com/image.jpg" Требует CORS для canvas
Относительный путь src="../assets/image.png" Относительно текущей страницы
Data URL src="data:image/png;base64,..." Встроенное изображение
Blob URL src="blob:https://example.com/..." Для динамически создаваемых изображений

Оптимизированный пример с srcset:

<img src="images/fallback.jpg" srcset="images/small.jpg 480w, images/medium.jpg 768w, images/large.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 1000px) 768px, 1200px" alt="Адаптивное изображение" loading="lazy">

Рекомендации по использованию:

  • Всегда указывайте атрибут alt для доступности
  • Для адаптивных изображений используйте srcset и sizes
  • Используйте HTTPS для внешних ресурсов
  • Указывайте width и height для предотвращения скачков макета

Обработка ошибок загрузки:

<img src="possibly-missing.jpg" onerror="this.src='fallback.jpg';this.alt='Изображение не загружено'" alt="Основное изображение">

Ограничения и совместимость:

  • Поддерживается всеми браузерами
  • Для CORS-запросов требуется crossorigin
  • Data URL имеет ограничения по длине
  • Относительные пути зависят от URL страницы

Примечание: Хотя атрибут src является базовым для работы изображений, современные веб-стандарты рекомендуют использовать его в сочетании с srcset для адаптивной загрузки изображений, что особенно важно для производительности на мобильных устройствах.