Сравнение атрибутов img в HTML: data-src и src

Быстрый ответ

Атрибут src предназначен для немедленной загрузки ресурсов (например, изображений) в HTML-документ. Изображение <img src="image.jpg"> отображается сразу же после загрузки страницы.

Атрибут data-src выступает в роли заглушки для URL-ссылок ресурсов, которые ожидают своего момента для загрузки. Часто используется для отложенной загрузки: <img data-src="image.jpg"> не будет загружено до тех пор, пока JavaScript не заменит data-src на src по определенному условию, например, когда изображение появляется в области видимости пользователя.

src: стандартный атрибут

Атрибут src является стандартным способом внедрения внешних ресурсов (изображений, скриптов, видео) в HTML-документ. Он поддерживается всеми браузерами и необходим для корректного отображения медиаконтента. Чтобы контент был доступен сразу после загрузки страницы, используется src.

data-src: атрибут отложенной загрузки

Атрибут data-src выбирается с целью повышения эффективности и производительности. Он сообщает браузеру о необходимости отложить загрузку медиаконтента до момента получения сигнала о готовности к загрузке. Этот атрибут полезен, когда требуется загрузка ресурса по требованию — обычно при его появлении на экране. Использование data-src позволяет оптимизировать загрузку и улучшить скорость отдачи страницы с помощью специализированных скриптов или библиотек для отложенной загрузки.

Пользовательский опыт на первом месте

Вышеописанный атрибут data-src, помимо оптимизации ресурсов, существенно улучшает взаимодействие с пользователем. На мобильных устройствах, где сетевые условия и технические характеристики устройства варьируются, отсрочка загрузки "тяжелых" медиафайлов, которые находятся за пределами видимой области, может увеличить производительность веб-страницы, обеспечивая более плавную прокрутку.

Умное управление ресурсами

API IntersectionObserver в JavaScript могут помочь управлять ресурсами более осознанно. Он слежит за нахождением ресурсов в области видимости и инициирует замену data-src на src, что приводит к загрузке ресурса. Это не только сохраняет ресурсы, т.к. пропускная способность и процессорное время теперь расходуются только на видимые ресурсы, но и делает загрузку ориентированной на пользователя, уделяя приоритет контенту на экране.

Лучшие практики использования src и data-src

Приоритет загрузки

Используйте data-src как стратегический инструмент для отложенной загрузки второстепенных ресурсов, в то время как src должен обеспечивать немедленную загрузку важных ресурсов, которыми лучше запастись заранее. Это гарантирует доступность приоритетного контента с минимальной задержкой.

Подробнее об этом расскажет наш спикер на видео

Адаптация под все браузеры

Несмотря на то, что и src, и data-src поддерживаются современными браузерами, всегда важно иметь резервные решения для работы со сценариями, в которых отложенная загрузка или data-src могут быть недоступны.

Использование библиотек

Подобные библиотеки, как lazysizes, значительно облегчают реализацию отложенной загрузки и могут автоматически настраивать стратегию загрузки, учитывая сетевые условия и возможности браузера. С lazysizes использование data-src становится более мощным и гибким.

Технические детали

Получение значений

Чтобы получить значения атрибута data-src, можно использовать метод getAttribute или свойство dataset элемента в JavaScript. Это позволяет разработчикам записывать источник изображения в src и начинать его загрузку динамически.

Совместимость с HTML5

Атрибуты src и data-src соответствуют спецификации контента HTML5 и разработчики могут выбирать их исходя из стратегии загрузки ресурсов и необходимости оптимизации производительности.

Визуализация

Мы можем представить атрибуты src и data-src через простую аналогию:

src символизирует Мгновенную Отправку: 🚚💨

Изображение 🖼️ ==> [🚚💨] ==> Веб-сайт 🌐
"src – это мгновенная доставка в мире изображений – без задержек!"

data-src означает Планируемое Прибытие: 🚚⏰

Изображение 🖼️ ==> [🚚⏰] ==> Веб-сайт 🌐 (при необходимости)
"data-src – это точность в расписании при загрузке изображений – приходит строго по графику, ни раньше, ни позже."

Таким образом, src обеспечивает быструю публикацию контента в сети, в то время как data-src позволяет точно запланировать доставку, экономя ресурсы, где это возможно.