Адаптивные изображения

HTML Блог

Адаптивные изображения

Обычное изображение

<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.

Вернуться наверх