Раз в неделю мы отправляем дайджест с самыми популярными статьями.

# source

Определяет источник для элемента <audio>, <video>, или <picture>.

Пример: Копировать

Picture of a Ha Long Bay sunset
<picture>
 <source
  media="(min-width: 800px)"
  srcset="/htmlref/images/sunset-360.jpg 360w,
          /htmlref/images/sunset-720.jpg 720w,
          /htmlref/images/sunset-1440.jpg 1440w"
  sizes="33.3vw">
 <source
  srcset="/htmlref/images/sunset-720.jpg 2x,
          /htmlref/images/sunset-360.jpg 1x">
 <img src="https://atomcss.ru/htmlref/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">
</picture>

src

URL-адрес, на котором размещены файлы.

"/htmlref/images/tiramisu.jpg"

Вы можете использовать относительный URL-адрес.

"https://atomcss.ru/htmlref/images/traffic.jpg"

Вы можете использовать абсолютный URL-адрес.

srcset

Определяет список разных источников для одних и тех же медиа-файлов. Браузер выберет лучший и использует его.

"/htmlref/images/sunset-360.jpg 360w,
/htmlref/images/sunset-720.jpg 720w,
/htmlref/images/sunset-1440.jpg 1440w"

Вы можете использовать дескриптор ширины как 360w. Это значение делится на один из исходных размеров (определенно в аттрибутеsizes) для получения плотности пикселей .

@html

sizes

Определяет список файлов различных размеров. Вы можете комбинировать каждый из них с помощью медиа-запросов.

"(min-width: 800px) 1440px, 720px"

Браузер будет использовать картинку с разрешением 1440px (определено в srcset) если область просмотра больше 800 пикселей.
В противном случае будет использовать разрешение в 720px.

@html

type

Определяет MIME-тип источника файла.

"image/jpg"

Вы можете использоватьп только аудио, видео, или картинковый MIME-тип .

media

Определяет медиа-запрос для источника с <picture>.

"(min-width: 800px)"

<media> будет работать только на мониторах с разрешением больше чем 800px.