45
Pokročilé responzivní obrázky You are challenged by prof. @robinpokorny

Pokročilé responzivní obrázky

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

Page 1: Pokročilé responzivní obrázky

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

Page 2: Pokročilé responzivní obrázky

Breakthrough Internet Device

Page 3: Pokročilé responzivní obrázky
Page 4: Pokročilé responzivní obrázky

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

Page 5: Pokročilé responzivní obrázky

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

Page 6: Pokročilé responzivní obrázky

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

Page 7: Pokročilé responzivní obrázky

Resolution-based selection

Page 8: Pokročilé responzivní obrázky

Viewport-based selection

Page 9: Pokročilé responzivní obrázky

Device-pixel-ratio-based selection

Page 10: Pokročilé responzivní obrázky

Art direction

Page 11: Pokročilé responzivní obrázky

Design breakpoints

Page 12: Pokročilé responzivní obrázky

Matching media features and media types

Page 13: Pokročilé responzivní obrázky

Relative units

Image formats

User control over sources

Page 14: Pokročilé responzivní obrázky
Page 15: Pokročilé responzivní obrázky

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

Page 16: Pokročilé responzivní obrázky

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.

Page 17: Pokročilé responzivní obrázky

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

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

Page 18: Pokročilé responzivní obrázky

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).

Page 19: Pokročilé responzivní obrázky

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ů:

Page 20: Pokročilé responzivní obrázky

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

αi(z, s) = 1že

,

Úloha responzivních obrázků:

Page 21: Pokročilé responzivní obrázky

Vektor stavu

Autorská představa

Zdroje a jejich rozměry

Page 22: Pokročilé responzivní obrázky

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

Page 23: Pokročilé responzivní obrázky
Page 24: Pokročilé responzivní obrázky

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

Page 25: Pokročilé responzivní obrázky

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

Page 26: Pokročilé responzivní obrázky

<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” />

Page 27: Pokročilé responzivní obrázky

ericportis.com

Page 28: Pokročilé responzivní obrázky

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

fyzická šířka v pixelech

Page 29: Pokročilé responzivní obrázky

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

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

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

Page 30: Pokročilé responzivní obrázky

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

první vyhovující, nebo

Page 31: Pokročilé responzivní obrázky

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

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

Page 32: Pokročilé responzivní obrázky

<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” />

Page 33: Pokročilé responzivní obrázky

Art direction

Page 34: Pokročilé responzivní obrázky

<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, …”>

Page 35: Pokročilé responzivní obrázky

<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>

Page 36: Pokročilé responzivní obrázky

<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é

Page 37: Pokročilé responzivní obrázky
Page 38: Pokročilé responzivní obrázky

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

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

Page 39: Pokročilé responzivní obrázky

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

αi(z, s) = 1že

,

Úloha responzivních obrázků:

Page 40: Pokročilé responzivní obrázky

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

αi(z, s) = 1že

,

Úloha responzivních obrázků:

Page 41: Pokročilé responzivní obrázky

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

Page 42: Pokročilé responzivní obrázky

10001100

3000

foto-1000.jpg

foto-3000.jpg

Page 43: Pokročilé responzivní obrázky

10001100

3000

foto-900.jpg

foto-3000.jpg

1732

√(1000 * 3000)

2000

1000 + 3000

2

Page 44: Pokročilé responzivní obrázky
Page 45: Pokročilé responzivní obrázky

@robinpokorny

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