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