Upload
robin-pokorny
View
2.403
Download
0
Embed Size (px)
DESCRIPTION
Motivace, definice, zadání a řešení úlohy responzivních obrázků pomocí elementu (především) c Google Chrome. Přednáška na pražském DevFest 2014 (http://devfest.cz/).
Citation preview
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!"