Pokročilé responzivní obrázky

Pokročilé responzivní obrázkyYou are challenged by prof. @robinpokorny

Breakthrough Internet Device

http://httparchive.org/interesting.php?a=All&l=Nov%201%202014

http://usecases.responsiveimages.org/ (zdroje následujících obrázků)

http://usecases.responsiveimages.org/ (zdroje následujících obrázků)

Resolution-based selection

Viewport-based selection

Device-pixel-ratio-based selection

Art direction

Design breakpoints

Matching media features and media types

Relative units

Image formats

User control over sources

Obraz je jakékoli konečné grafické vyjádření ve dvou rozměrech.

Zdroj, také fyzický obrázek, je libovolný prvek prostoru 2<ω (konečné posloupnosti nul a jedniček), který má přiřazen rozměr.

Zdroj reprezentuje obraz.

Vektor stavu popisuje všechny vlastnosti zobrazovacího zařízení včetně prostředí.

Display, okno, prohlížeč, síť…

Autorská představa o vyobrazení obrazu je funkce, která je pro daný zdroj obrazu a za daného stavu buď uspokojena (1) nebo neuspokojena (0).

Buď i obraz a s vektor stavu. Nechť Zi je množina zdrojů reprezentujích i, dále nechť αi je autorská představa o vyobrazení i.

Najděte z∊Zi, aby byla uspokojenaαi pro z a s.

Úloha responzivních obrázků:

fi: (s, Zi, αi) ↦ z∊Zi

αi(z, s) = 1že

,

Úloha responzivních obrázků:

Vektor stavu

Autorská představa

Zdroje a jejich rozměry

http://www.zdrojak.cz/clanky/adaptivni-obrazky-vyresena-otazka-s-novym-otaznikem/

https://html.spec.whatwg.org/multipage/embedded-content.html

<img src=“foto-320.jpg" />

<img src=“foto-320.jpg”

srcset=“foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w”

sizes=“(min-width: 800px) 25vw, 100vw” />

ericportis.com

srcset=“( [url] [integer]w, )+"

fyzická šířka v pixelech

srcset=“( [url] [float]x, )+"

pixel density (0.25x, 0.5x, 1x, 2x, 4x)

Pozor! Odlišný význam od starší specifikace.

sizes=“( [media query] [length], )* [length]"

první vyhovující, nebo

px em vw rem in calc(50vw - 2em)

sizes=“( [media query] [length], )* [length]"

<img src=“foto-320.jpg”

srcset=“foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w”

sizes=“(min-width: 800px) 25vw, 100vw” />

Art direction

<img class=“on-hd” srcset=“charizard-hd.jpg 1920w, …”>

<img class=“on-lg” srcset=“charmeleon-hd.jpg 1680w, …”>

<img class=“on-sm” srcset=“charmander-hd.jpg 800w, …”>

<source media="(min-width: 1200px)" srcset=“charizard-hd.jpg 1920w, …”>

<source media="(min-width: 40em)" srcset=“charmeleon-hd.jpg 1680w, …”>

<img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”>

<picture>

</picture>

<source media="(min-width: 1200px)" srcset=“charizard-hd.jpg 1920w, …”>

<source media="(min-width: 40em)" srcset=“charmeleon-hd.jpg 1680w, …”>

<img src=“charmander.jpg" srcset=“charmander-hd.jpg 800w, …”>

<picture>

</picture>

musí být poslední

epický fallback

může mít sizes (i v source)

class zde

a jiné

In a user agent-specific manner, choose one image source from source set.

Výňatek z algoritmu “select an image source”

fi: (s, Zi, αi) ↦ z∊Zi

αi(z, s) = 1že

,

Úloha responzivních obrázků:

fi, : (s, Zi, αi) ↦ z∊Zi

αi(z, s) = 1že

,

Úloha responzivních obrázků:

<img srcset=“foto-3000.jpg 3000w, foto-1000.jpg 1000w” sizes=“1100px”/>

10001100

3000

foto-1000.jpg

foto-3000.jpg

10001100

3000

foto-900.jpg

foto-3000.jpg

1732

√(1000 * 3000)

2000

1000 + 3000

2

@robinpokorny

"You must really like your <picture> and always keep it by your side!"