Обычное изображение
<picture>
<source
media="(min-width: 1024px)"
srcset="opera-fullshot.jpg">
<img
src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>Варианты использования различных типов изображений
<picture>
<source
srcset="opera.webp"
type="image/webp">
<img
src="opera.jpg" alt="The Oslo Opera House">
</picture>Браузеры, поддерживающие WebP, получат изображение WebP; другие браузеры получат JPG.
Различных типы изображений и обычное изображение
<picture>
<source
media="(min-width: 1024px)"
srcset="opera-fullshot.webp"
type="image/webp">
<source
media="(min-width: 1024px)"
srcset="opera-fullshot.jpg">
<source
srcset="opera-closeup.webp"
type="image/webp">
<img
src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>High-DPI изображения
<img
src="opera-1x.jpg" alt="The Oslo Opera House"
srcset="opera-2x.jpg 2x, opera-3x.jpg 3x">Браузеры на устройствах с экранами с высоким разрешением получат изображение с высоким разрешением; другие браузеры получат обычное изображение.
High-DPI изображения и обычное изображение
<picture>
<source
media="(min-width: 1024px)"
srcset="opera-fullshot-1x.jpg 1x,
opera-fullshot-2x.jpg 2x,
opera-fullshot-3x.jpg 3x">
<img
src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
srcset="opera-closeup-2x.jpg 2x,
opera-closeup-3x.jpg 3x">
</picture>High-DPI изображения и различные типы изображений
<picture>
<source
srcset="opera-1x.webp 1x,
opera-2x.webp 2x,
opera-3x.webp 3x"
type="image/webp">
<img
src="opera-1x.jpg" alt="The Oslo Opera House"
srcset="opera-2x.jpg 2x,
opera-3x.jpg 3x">
</picture>Браузеры на устройствах с экранами с высоким разрешением получат изображение с 2 или даже 3 большим количеством пикселей; другие браузеры получат обычное изображение. Также фотографии в WebP получат браузеры, которые его поддерживают; другие браузеры получат JPG.
High-DPI изображения, различные типы изображений и обычное изображение.
<picture>
<source
media="(min-width: 1024px)"
srcset="opera-fullshot-1x.webp 1x,
opera-fullshot-2x.webp 2x,
opera-fullshot-3x.webp 3x"
type="image/webp">
<source
media="(min-width: 1024px)"
srcset="opera-fullshot-1x.jpg 1x,
opera-fullshot-2x.jpg 2x,
opera-fullshot-3x.jpg 3x">
<source
srcset="opera-closeup-1x.webp 1x,
opera-closeup-2x.webp 2x,
opera-closeup-3x.webp 3x"
type="image/webp">
<img
src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
srcset="opera-closeup-2x.jpg 2x,
opera-closeup-3x.jpg 3x">
</picture>Адаптивные изображения с разными размерами
<img
src="opera-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.jpg 200w,
opera-400.jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w">Адаптивные изображения с разными размерами и обычное изображение
<picture>
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.jpg 200w,
opera-fullshot-400.jpg 400w,
opera-fullshot-800.jpg 800w,
opera-fullshot-1200.jpg 1200w">
<img
src="opera-closeup-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.jpg 200w,
opera-closeup-400.jpg 400w,
opera-closeup-800.jpg 800w,
opera-closeup-1200.jpg 1200w">
</picture>Адаптивные изображения с разными размерами и различные типы изображений
<picture>
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.webp 200w,
opera-400.webp 400w,
opera-800.webp 800w,
opera-1200.webp 1200w"
type="image/webp">
<img
src="opera-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.jpg 200w,
opera-400.jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w">
</picture>Адаптивные изображения с разными размерами, различные типы изображений и обычное изображение
<picture>
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.webp 200w,
opera-fullshot-400.webp 400w,
opera-fullshot-800.webp 800w,
opera-fullshot-1200.webp 1200w"
type="image/webp">
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.webp 200w,
opera-closeup-400.webp 400w,
opera-closeup-800.webp 800w,
opera-closeup-1200.webp 1200w"
type="image/webp">
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.jpg 200w,
opera-fullshot-400.jpg 400w,
opera-fullshot-800.jpg 800w,
opera-fullshot-1200.jpg 1200w">
<img
src="opera-closeup-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.jpg 200w,
opera-closeup-400.jpg 400w,
opera-closeup-800.jpg 800w,
opera-closeup-1200.jpg 1200w">
</picture>Адаптивные изображения с разными размерами и High-DPI изображения
<img
src="opera-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.jpg 200w,
opera-400.jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w,
opera-1600.jpg 1600w,
opera-2000.jpg 2000w">Адаптивные изображения с разными размерами, High-DPI изображения и обычное изображение
<picture>
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.jpg 200w,
opera-fullshot-400.jpg 400w,
opera-fullshot-800.jpg 800w,
opera-fullshot-1200.jpg 1200w,
opera-fullshot-1600.jpg 1600w,
opera-fullshot-2000.jpg 2000w">
<img
src="opera-closeup-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.jpg 200w,
opera-closeup-400.jpg 400w,
opera-closeup-800.jpg 800w,
opera-closeup-1200.jpg 1200w,
opera-closeup-1600.jpg 1600w,
opera-closeup-2000.jpg 2000w">
</picture>Адаптивные изображения с разными размерами, High-DPI изображения и различные типы изображений
<picture>
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.webp 200w,
opera-400.webp 400w,
opera-800.webp 800w,
opera-1200.webp 1200w,
opera-1600.webp 1600w,
opera-2000.webp 2000w"
type="image/webp">
<img
src="opera-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.jpg 200w,
opera-400.jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w,
opera-1600.jpg 1600w,
opera-2000.jpg 2000w">
</picture>Все вместе
<picture>
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.webp 200w,
opera-fullshot-400.webp 400w,
opera-fullshot-800.webp 800w,
opera-fullshot-1200.webp 1200w,
opera-fullshot-1600.webp 1600w,
opera-fullshot-2000.webp 2000w"
type="image/webp">
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.webp 200w,
opera-closeup-400.webp 400w,
opera-closeup-800.webp 800w,
opera-closeup-1200.webp 1200w,
opera-closeup-1600.webp 1600w,
opera-closeup-2000.webp 2000w"
type="image/webp">
<source
media="(min-width: 1280px)"
sizes="50vw"
srcset="opera-fullshot-200.jpg 200w,
opera-fullshot-400.jpg 400w,
opera-fullshot-800.jpg 800w,
opera-fullshot-1200.jpg 1200w,
opera-fullshot-1600.jpg 1800w,
opera-fullshot-2000.jpg 2000w">
<img
src="opera-closeup-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-closeup-200.jpg 200w,
opera-closeup-400.jpg 400w,
opera-closeup-800.jpg 800w,
opera-closeup-1200.jpg 1200w,
opera-closeup-1600.jpg 1600w,
opera-closeup-2000.jpg 2000w">
</picture>Для окон браузера шириной 1280 пикселей CSS и шире используется полноэкранная фотография шириной 50% от ширины окна просмотра; для окон браузера шириной 640-1279 пикселей CSS используется фотография шириной 60% от ширины окна просмотра; для менее широких окон браузера используется фотография шириной, равной полной ширине окна просмотра. В каждом случае браузер выбирает дополнительное изображение из набора изображений шириной 200 пикселей, 400 пикселей, 800 пикселей, 1200 пикселей, 1600 пикселей и 2000 пикселей, учитывая ширину изображения и разрешение экрана. Эти фотографии подаются в качестве WebP, которые его поддерживают; другие браузеры получат JPG.
