» » » Разные картинки под разные разрешения экрана
20 0  

Разные картинки под разные разрешения экрана

В самом теле HTML можно задать 2 или более картинок для отображения в зависимости от разрешения экрана. Как правило нужно для того чтобы в мобильной версии сайта показвать маленькое изображение вместо большого.

Нужно учесть!

  • <picture> требует <img> в качестве своего последнего потомка. Без этого ничего не выведется. Это хорошо для совместимости, так как есть только одно традиционное место для вашего альтернативного текста и это хорошо для поддержки содержимого в старых браузерах, которые показывают только <img> элемент.
  • Думайте об атрибутах sizes и srcset элемента <picture>, как о перезаписи src в <img>. Проверяйте currentSrc в jаvascript для того, чтобы узнать что выбирает браузер. Старые браузеры конечно же будут использовать только <img src>, поэтому вам нужно будет использовать что-то наподобие image.currentSrc || image.src, чтобы обработать все случаи.
  • В srcset и sizes список – это подсказка для браузеров, а не команда. Например, устройство с device-pixel-ratio в 1.5 будет свободно использовать 1x или 2x изображение в зависимости от того, что оно знает о своих возможностях, сети и т.д.
  • <img sizes="(max-width: 30em) 100vw …"> сообщает: если это медиавыражение верно, показать изображение с 100vw шириной. Первое медиавыражение выигрывает, поэтому порядок источников важен.

Разные картинки до и после 1024рх:

<picture>
	<source	media="(min-width: 1024px)" srcset="opera-fullshot.jpg">
	<img src="opera-closeup.jpg" alt="">
</picture>

Разные типы изображения.

Браузеры, которые поддерживают WebP получают WebP изображения; остальные получают JPG.

<picture>
	<source	srcset="opera.webp" type="image/webp">
	<img src="opera.jpg" alt="">
</picture>


Различные типы изображений и разное содержимое.

Для окон браузеров с шириной в 1024 CSS пиксела и шире будет использоваться полноэкранное фото; меньшие окна браузера получат приближённое фото. Это фото будет выдаваться в 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="">
</picture>

Изображения с высоким разрешением.

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

<img src="opera-1x.jpg" alt="" srcset="opera-2x.jpg 2x, opera-3x.jpg 3x" />

Изображения с высоким разрешением и разным содержимым.

<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="" srcset="opera-closeup-2x.jpg 2x, opera-closeup-3x.jpg 3x">
</picture>

Изображения высокого разрешения и различные типы изображений.

<picture>
	<source	srcset="opera-1x.webp 1x,opera-2x.webp 2x,opera-3x.webp 3x" type="image/webp">
	<img src="opera-1x.jpg" alt=""	srcset="opera-2x.jpg 2x, opera-3x.jpg 3x">
</picture>

Изображения с высоким разрешением, различные типы изображений и различное содержимое

<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="" srcset="opera-closeup-2x.jpg 2x,	opera-closeup-3x.jpg 3x">
</picture>

Смена размеров изображений:

Для окон браузеров с шириной в 640 CSS пикселов и шире используется фото с шириной 60% области просмотра; для браузеров с меньшей шириной окна используется фото равное полной ширине области просмотра. Браузер выбирает оптимальное изображение из выборки изображений с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину изображения и разрешение экрана.

<img src="opera-fallback.jpg" alt=""
	sizes="(min-width: 640px) 60vw, 100vw"
	srcset="opera-200.jpg 200w,
		opera-400.jpg 400w,
		opera-800.jpg 800w,
		opera-1200.jpg 1200w">

Смена размеров изображения и разное содержимое.

Для окон браузеров с шириной в 1280 CSS пикселов и шире используется полноэкранное изображение с шириной просмотра в 50%; для браузеров с шириной в 640-1279 CSS пикселов используется фото с 60% ширины области просмотра; для меньших окон браузера используется фото равное полной ширине области просмотра. В каждом случае браузер берёт оптимальное изображение из выборки с шириной в 200px, 400px, 800px и 1200px, принимая во внимание ширину и разрешение экрана устройства.

<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-fallback.jpg" alt=""
		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-fallback.jpg" alt=""
		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-fallback.jpg" alt=""
		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>

Замена изображения и изображения высокого разрешения

<img src="opera-fallback.jpg" alt=""
	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>
	<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-fallback.jpg" alt=""
		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>

Смена размеров изображения, изображения высокого разрешения и различные типы изображения

<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-fallback.jpg" alt=""
		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-fallback.jpg" alt=""
		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>



Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019