😎 » HTML5 » Разная информация » Разные картинки под разные разрешения экрана
4 585 2  

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

В самом теле 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 шириной. Первое медиавыражение выигрывает, поэтому порядок источников важен.

Разные картинки до 520рх, до 900рх и больше:

		<picture class="logotip">
			<source	media="(max-width: 520px)" srcset="images/logo-520px.png">
			<source	media="(max-width: 900px)" srcset="images/logo-1260px.png">			
			<img src="images/logo.png" alt="Реставрація ванн" />			
		</picture> 

Или так

<img "src="https://i.etsystatic.com/isbl/1b1ee8/48158756/isbl_1680x420.48158756_czkqwthb.jpg?version=0"
                srcset="https://i.etsystatic.com/isbl/1b1ee8/48158756/isbl_3360x840.48158756_czkqwthb.jpg?version=0 3360w,
                        https://i.etsystatic.com/isbl/1b1ee8/48158756/isbl_1680x420.48158756_czkqwthb.jpg?version=0 1680w,
                        https://i.etsystatic.com/isbl/1b1ee8/48158756/isbl_1200x300.48158756_czkqwthb.jpg?version=0 1200w,
                        https://i.etsystatic.com/isbl/1b1ee8/48158756/isbl_900x225.48158756_czkqwthb.jpg?version=0 900w,
                        https://i.etsystatic.com/isbl/1b1ee8/48158756/isbl_640x160.48158756_czkqwthb.jpg?version=0 640w,
                        https://i.etsystatic.com/isbl/1b1ee8/48158756/isbl_480x120.48158756_czkqwthb.jpg?version=0 480w"
                sizes="100vw"
                alt="" />

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

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

	<picture itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject">
		<source  type="image/webp" srcset="foto.webp">
		<source  type="image/jpg" srcset="foto.jpg">
		<img src="foto.webp" alt="" title="">	
	</picture>

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

Для окон браузеров с шириной в 1024 CSS пиксела и шире будет использоваться полноэкранное фото; меньшие окна браузера получат приближённое фото. Это фото будет выдаваться в WebP формате для браузеров, которые его поддерживают; другие будут получать в формате JPG.

	<picture itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject">
		
		<source	media="(max-width: 450px)" srcset="foto-450.webp" type="image/webp">
		<source	media="(max-width: 450px)" srcset="foto-450.jpg" type="image/jpeg">
		
		<source  type="image/webp" srcset="foto.webp">
		<source  type="image/jpg" srcset="foto.jpg">
		<img src="foto.webp" alt="" title="" />	
		
			<meta itemprop="width" content="788"><meta itemprop="height" content="302">
			<meta itemprop="author" content="автор">
			<meta itemprop="url" content="foto.webp">
			<meta itemprop="name" content="название">
			<meta itemprop="description" content="описание">
	</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>



Коментарі 2

User
User
14 лютого 2020 17:20

Інформація про jаvascript і ReactJS буде?


21 лютого 2020 15:29

fellow Найближчий рік точно не буде! - це не мій профіль...


Залишити свій коментар:

Досвід у веброзробці:

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