Атрибут srcset тега <source> — набір зображень під екран

Атрибут srcset вказує одну або кілька адрес альтернативних зображень.

Якщо даний атрибут має рядок URL-адреси альтернативного зображення з дескриптором ширини, то в елементі також необхідно вказати атрибут «sizes», значенням якого повинен бути список допустимих розмірів джерела.

автор: с3с

Загальний опис

автор: NagarD

Нотатка: Атрибут srcset має ефект тільки тоді, коли елемент <source> розташовується безпосередньо всередині елемента <picture>.
автор: с3с

Синтаксис

<picture>


 <source srcset="...">


</picture>

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
	38	38	9.1	25	13	—

Підтримка: мобільні переглядачі
Переглядач
	38	38	38	9.3

Приклади

+ запропонувати свій приклад у пісочниці

<h3>Приклад використання атрибуту srcset</h3> 
 <picture>
    <source srcset="data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27400%27%20height=%27200%27%20viewBox=%270%200%20100%2050%27%20preserveAspectRatio=%27none%27%3E%3Crect%20width=%27100%27%20height=%2750%27%20fill=%27%232a9d8f%27/%3E%3Ctext%20x=%2750%27%20y=%2730%27%20font-family=%27sans-serif%27%20font-size=%2712%27%20text-anchor=%27middle%27%20fill=%27%23fff%27%3Elandscape%3C/text%3E%3C/svg%3E" media="screen and (orientation: landscape)">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Crect width='100' height='50' fill='%23264653'/%3E%3Ctext x='50' y='30' font-family='sans-serif' font-size='12' text-anchor='middle' fill='%23fff'%3Ezapasne%3C/text%3E%3C/svg%3E" width="400" height="200" alt="Запасне зображення">
  </picture>

автор: с3с

HTML

<h4>1. Однаковий srcset, різне місце — вибирає браузер</h4>

<p>Вузьке місце, sizes="100px":</p>
<img class="narrow" alt="Файл, який обрав браузер" srcset="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%3E%3Crect%20width='400'%20height='200'%20fill='%23c0392b'/%3E%3Ctext%20x='200'%20y='128'%20fill='%23ffffff'%20font-family='sans-serif'%20font-size='72'%20text-anchor='middle'%3E400w%3C/text%3E%3C/svg%3E 400w,%20data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='300'%3E%3Crect%20width='1200'%20height='300'%20fill='%231d6fa5'/%3E%3Ctext%20x='600'%20y='205'%20fill='%23ffffff'%20font-family='sans-serif'%20font-size='150'%20text-anchor='middle'%3E1200w%3C/text%3E%3C/svg%3E 1200w" sizes="100px" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%3E%3Crect%20width='400'%20height='200'%20fill='%23c0392b'/%3E%3Ctext%20x='200'%20y='128'%20fill='%23ffffff'%20font-family='sans-serif'%20font-size='72'%20text-anchor='middle'%3E400w%3C/text%3E%3C/svg%3E">

<p>Широке місце, sizes="640px":</p>
<img class="wide" alt="Файл, який обрав браузер" srcset="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%3E%3Crect%20width='400'%20height='200'%20fill='%23c0392b'/%3E%3Ctext%20x='200'%20y='128'%20fill='%23ffffff'%20font-family='sans-serif'%20font-size='72'%20text-anchor='middle'%3E400w%3C/text%3E%3C/svg%3E 400w,%20data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='300'%3E%3Crect%20width='1200'%20height='300'%20fill='%231d6fa5'/%3E%3Ctext%20x='600'%20y='205'%20fill='%23ffffff'%20font-family='sans-serif'%20font-size='150'%20text-anchor='middle'%3E1200w%3C/text%3E%3C/svg%3E 1200w" sizes="640px" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%3E%3Crect%20width='400'%20height='200'%20fill='%23c0392b'/%3E%3Ctext%20x='200'%20y='128'%20fill='%23ffffff'%20font-family='sans-serif'%20font-size='72'%20text-anchor='middle'%3E400w%3C/text%3E%3C/svg%3E">

<h4>2. source з media — вибираєте ви</h4>

<p>Рамка ширша за 420px покаже синій файл, вужча — червоний:</p>
<picture>
  <source media="(min-width: 420px)" srcset="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='300'%3E%3Crect%20width='1200'%20height='300'%20fill='%231d6fa5'/%3E%3Ctext%20x='600'%20y='205'%20fill='%23ffffff'%20font-family='sans-serif'%20font-size='150'%20text-anchor='middle'%3E1200w%3C/text%3E%3C/svg%3E">
  <img class="wide" alt="Файл, обраний за media" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%3E%3Crect%20width='400'%20height='200'%20fill='%23c0392b'/%3E%3Ctext%20x='200'%20y='128'%20fill='%23ffffff'%20font-family='sans-serif'%20font-size='72'%20text-anchor='middle'%3E400w%3C/text%3E%3C/svg%3E">
</picture>

CSS

h4 { margin: 1.2em 0 .3em; }
p { margin: .3em 0; }
img { display: block; height: auto; border: 1px solid #ccc; }
.narrow { width: 100px; }
.wide { width: 640px; max-width: 100%; }

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Ваше ім'я Коментар

Як форматувати текст?

Пишемо	Виходить
`важливо` `акцент` `~~застаріле~~`	Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
`## Як працює каскад` `### Порядок оголошень`	Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
`[[css/property/color]]`	Посилання на сторінку довідника. Наберіть `[[` — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
`[[!sandbox/S0oh1hBm]]`	Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком `!`: наберіть `[[!` і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
`[MDN](https://developer.mozilla.org)`	Посилання на чужий сайт.
`![Схема каскаду](https://site.com/схема.png)`	Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру	Код усередині речення.
```css `.card { display: grid }` ```	Код блоком. Мова після трьох лапок вмикає підсвітку.
`- Походження` `1. Походження`	Перелік: маркований і нумерований.
`- [ ] дописати приклади` `- [x] перевірити в Firefox`	Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
`> Порядок важить лише за рівної ваги.`	Цитата на всю ширину абзацу.
`Специфічність` `: вага селектора; більша перемагає`	Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
`Каскад має три критерії[^1]` `[^1]: Походження, специфічність, порядок.`	Виноска: номер у тексті, примітка внизу сторінки. Без згадки `[^1]` у тексті примітка не з'явиться.
`Відповідь: \|\|сорок два\|\|`	Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
`\|\| Показати рішення` Задайте контейнеру `display: grid`. `\|\|`	Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок	Новий абзац. Щоб перенести рядок усередині абзацу, поставте `\` в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.