Разные картинки под разные разрешения экрана
В самом теле 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>