View
1.260
Download
2
Category
Preview:
DESCRIPTION
Co potřebujete vědět o implementaci responzivních fotek a vektorů?
Citation preview
Responzivní obrázky
Frontendisti Ostrava 27. 9. 2014
v praxi
Co potřebujete vědět o implementaci responzivních fotek a vektorů?
Fotky
<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.
Na specifikaci Responsive Images (srcset, sizes, <picture>…) se výrobci prohlížečů shodli, na podpoře pracují. Zatím je nicmoc.
Naštěstí ale máme Scotta Jehla.
Foto
Picturefill
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ě.
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.
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.
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.
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.
VzhůruDolů.cz
100vw - 2*1em 46.625em
Velikosti obrázků
46.625em 70.125em
Zlomy layoutu
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.
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).
Picturefill 2 je ale v pubertě
~ <picture><source>
v Android 2.3 ne, v IE9 ošklivě.
Prohlížeče bez JSvidí jen alt text.
~ Prohlížeče s podporou srcset
stáhnou vše.
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
grunt-responsive-imagesresponsive_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.
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 %}/' }, }
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.
http://www.ck-rekrea.cz/zrychleni/
Původně 75x75 14kB
Nyní 150x150 6 kB Retina ready
Compressive Images
VektoryIkony, loga, schémata,
dekorace…
Vektory
vsIkonfonty SVG
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 budoucnaje lepší SVG s fallbackem pro starší prohlížeče.
http://www.vzhurudolu.cz/prirucka/svg
Děkuji!
@machal
vzhurudolu.cz/kurzy/responzivni-webdesign
Recommended