Атрибут data-* тега <picture>

Описание

Атрибуты data-* для тега <picture> позволяют хранить дополнительную информацию, связанную с адаптивным изображением. Эти пользовательские атрибуты не влияют на отображение, но могут использоваться JavaScript для расширенной функциональности.

Пример использования:
<picture data-image-id="hero-banner" data-lazy-load="true" data-version="2.1"> <source media="(min-width: 1200px)" srcset="large.jpg"> <source media="(min-width: 768px)" srcset="medium.jpg"> <img src="small.jpg" alt="Пример изображения"> </picture>

Типичные сценарии применения:

Атрибут Назначение
data-image-id Уникальный идентификатор для управления через JS
data-lazy-load Флаг отложенной загрузки изображения
data-sizes Дополнительная информация о размерах
data-priority Приоритет загрузки (high, low, auto)

Пример с динамической загрузкой:

<picture data-image-set="gallery" data-index="3"> <source srcset="image-3.webp" type="image/webp"> <img src="image-3.jpg" alt=""> </picture> <script> const picture = document.querySelector('[data-image-set="gallery"]'); console.log(picture.dataset.index); // "3" </script>

Особенности работы:

  • Имена атрибутов должны быть в kebab-case (дефисы между словами)
  • Значения всегда строковые (для других типов требуется преобразование)
  • Доступны через свойство dataset в JavaScript
  • Не влияют на SEO при правильном использовании

Рекомендации:

  • Используйте для хранения информации, связанной с управлением изображениями
  • Избегайте хранения больших объемов данных (лучше использовать JSON в одном атрибуте)
  • Для сложных структур данных используйте: data-config='{"zoomable":true}'
  • Сохраняйте согласованность именования в проекте

Пример с JSON-данными:

<picture data-image-meta='{"id":42,"author":"John Doe","license":"CC-BY"}'> <img src="image.jpg" alt=""> </picture> <script> const meta = JSON.parse(document.querySelector('picture').dataset.imageMeta); console.log(meta.author); // "John Doe" </script>

Примечание: Хотя data-атрибуты предоставляют гибкий способ хранения информации, для критически важных данных лучше использовать JavaScript-объекты или специализированные API. Data-атрибуты идеальны для разовой конфигурации и передачи мета-информации.