Co potřebujete vědět o implementaci responzivních fotek a vektorů?

1. Responzivní
obrázky
Frontendisti Ostrava
27. 9. 2014
v praxi
Co potřebujete vědět o implementaci
responzivních fotek a vektorů?

2. Fotky

3. <img alt="Obrázek"
width="300" height="200"
src="image.jpg"
data-­‐src-­‐small="image_small.jpg">
responsejs.com
❌
Problém Response.js a dalších řešení:
Obrázek v src="" vždy prohlížeč stáhne.

4. Na specifikaci Responsive Images (srcset, sizes, <picture>…) se
výrobci prohlížečů shodli, na podpoře pracují. Zatím je nicmoc.

5. Naštěstí ale máme Scotta Jehla.
Foto

6. Picturefill

7. Picturefill 1
<span data-­‐picture data-­‐alt="Test obrázek">
<span data-­‐src="small.jpg"></span>
<span data-­‐src="large.jpg" data-­‐media="(min-­‐width: 530px)"></span>
<!-­‐-­‐[if (lt IE 9) & (!IEMobile)]>
<span data-­‐src="large.jpg"></span>
<![endif]-­‐-­‐>
<noscript>
<img src="large.jpg" alt="Test obrázek">
</noscript>
</span>
https://github.com/scottjehl/picturefill/blob/1.2.1/README.md
Picturefill 1 má ošklivou syntaxi, ale načítání
různých obrázků pro různá rozlišení řeší spolehlivě.

8. Picturefill 1
<span data-­‐picture data-­‐alt="Test obrázek">
<span data-­‐src="small.jpg"></span>
<span data-­‐src="large.jpg" data-­‐media="(min-­‐width: 530px)"></span>
<!-­‐-­‐[if (lt IE 9) & (!IEMobile)]>
<span data-­‐src="large.jpg"></span>
<![endif]-­‐-­‐>
<noscript>
<img src="large.jpg" alt="Test obrázek">
</noscript>
</span>
Fallback pro prohlížeče bez podpory Media Queries.

9. Picturefill 1
<span data-­‐picture data-­‐alt="Test obrázek">
<span data-­‐src="small.jpg"></span>
<span data-­‐src="large.jpg" data-­‐media="(min-­‐width: 530px)"></span>
<!-­‐-­‐[if (lt IE 9) & (!IEMobile)]>
<span data-­‐src="large.jpg"></span>
<![endif]-­‐-­‐>
<noscript>
<img src="large.jpg" alt="Test obrázek">
</noscript>
</span>
Fallback pro prohlížeče bez podpory JavaScriptu.

10. Picturefill 2
<img alt="Test obrázek" height="300"
srcset="large.jpg 1200w,
small.jpg 600w"
sizes="(min-­‐width: 1024px) 30vw,
100vw">
http://scottjehl.github.io/picturefill/
Syntaxe pro Picturefill2 odpovídá
specifikaci Responsive Images.

11. Picturefill 2
<picture>
<source media="(max-­‐width: 400px)"
srcset="small.jpg, small@2x.jpg 2x">
<source media="(max-­‐width: 800px)"
srcset="medium.jpg, medium@2x.jpg 2x">
<img src="large.jpg" srcset="image@2x.jpg 2x" alt="Obrázek">
</picture>
Lze použít i <picture><source> varianty.

12. VzhůruDolů.cz
100vw - 2*1em 46.625em
Velikosti obrázků
46.625em 70.125em
Zlomy layoutu

13. VzhůruDolů.cz & Picturefill 1
<span data-­‐picture data-­‐alt="Test obrázek">
<span data-­‐src="500.jpg"></span>
<span data-­‐src="1000.jpg" data-­‐media="(min-­‐width: 530px)"></span>
<!-­‐-­‐[if (lt IE 9) & (!IEMobile)]>
<span data-­‐src="1000.jpg"></span>
<![endif]-­‐-­‐>
<noscript>
<img src="1000.jpg" alt="Test obrázek">
</noscript>
</span>
S Picturefill 1 musím šířku okna pro
breakpoint vypočíst sám. Zde 530px.

14. VzhůruDolů.cz & Picturefill 2
<img alt="Test obrázek" height="300"
srcset="1000.jpg 1000w,
500.jpg 500w"
sizes="(min-­‐width: 46.625em) 46.625em,
calc(100vw -­‐ 2*1em)">
V Picturefillu 2 (a ve specifikaci Responsive Images) stačí předat
seznam zdrojů obrázků (srcset) a velikosti v layoutu (sizes).

15. Picturefill 2 je ale v pubertě
~
<picture><source>
v Android 2.3 ne, v IE9 ošklivě.
Prohlížeče bez JS
vidí jen alt text.
~
Prohlížeče s podporou srcset
stáhnou vše.

16. Picturefill 1 Picturefill 2
Pohodlí frontendisty ✔
RWD Images scénáře ✔
Řešení bez JS ✔
Podpora v prohlížečích ✔
Hezké HTML ✔
Datový objem ✔
vzhurudolu.cz/data/test/vd/responsive-images.html

17. grunt-responsive-images
responsive_images: {
options: {
sizes: [
{ name: "small", width: 600, height: 335, quality: 100 },
{ name: "small-­‐2x", width: 1000, height: 565, quality: 75 },
{ name: "medium", width: 800, height: 450, quality: 100 },
{ name: "large", width: 1000, height: 565, quality: 100 }
]
},
files: {
expand: true,
src: ['**.{jpg,gif,png}'],
cwd: 'assets/img/content/src/',
dest: 'assets/img/content/dest/',
custom_dest: 'assets/img/content/dest/{%= name %}/'
},
}
Zdroje obrázků je možné
vygenerovat třeba Gruntem.

18. grunt-responsive-images
https://github.com/andismith/grunt-responsive-images/
responsive_images: {
options: {
sizes: [
{ name: "small", width: 600, height: 335, quality: 100 },
{ name: "small-­‐2x", width: 1000, height: 565, quality: 75 },
{ name: "medium", width: 800, height: 450, quality: 100 },
{ name: "large", width: 1000, height: 565, quality: 100 }
]
},
files: {
expand: true,
src: ['**.{jpg,gif,png}'],
cwd: 'assets/img/content/src/',
dest: 'assets/img/content/dest/',
custom_dest: 'assets/img/content/dest/{%= name %}/'
},
}

19. Compressive Images
http://filamentgroup.com/lab/compressive-images.html
Stlačené obrázky vyexportujeme ve výrazně větší pixelové
velikosti, snížíme jim kvalitu a v HTML změnšíme.

20. http://www.ck-rekrea.cz/zrychleni/
Původně 75x75
14kB
Nyní 150x150
6 kB
Retina ready
Compressive Images

21. Vektory
Ikony, loga, schémata,
dekorace…

22. Vektory
vsIkonfonty SVG

23. Ikonfonty SVG
Barvy a vykreslování ✔
Podpora v prohlížečích ✔
Workflow ✔
Fíčury ✔
http://css-tricks.com/icon-fonts-vs-svg/
Ikonfonty považuji za dočasný hack. Do budoucna
je lepší SVG s fallbackem pro starší prohlížeče.
http://www.vzhurudolu.cz/prirucka/svg

24. Děkuji!
@machal
vzhurudolu.cz/kurzy/responzivni-webdesign