Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responzivní
obrázky
Frontendisti Ostrava
27. 9. 2014
v praxi
Co potřebujete vědět o implementaci
responzivních fotek a vek...
Fotky
<img  alt="Obrázek"    
    width="300"  height="200"  
    src="image.jpg"    
    data-­‐src-­‐small="image_small.jpg">
...
Na specifikaci Responsive Images (srcset, sizes, <picture>…) se
výrobci prohlížečů shodli, na podpoře pracují. Zatím je nic...
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>  
...
Picturefill 1
    <span  data-­‐picture  data-­‐alt="Test  obrázek">  
            <span  data-­‐src="small.jpg"></span>  
...
Picturefill 1
    <span  data-­‐picture  data-­‐alt="Test  obrázek">  
            <span  data-­‐src="small.jpg"></span>  
...
Picturefill 2
<img  alt="Test  obrázek"  height="300"    
    srcset="large.jpg  1200w,    
        small.jpg  600w"    
  ...
Picturefill 2
<picture>  
   <source  media="(max-­‐width:  400px)"    
            srcset="small.jpg,  small@2x.jpg  2x"> ...
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"></sp...
VzhůruDolů.cz & Picturefill 2
<img  alt="Test  obrázek"  height="300"  
    srcset="1000.jpg  1000w,    
        500.jpg  5...
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.
~...
Picturefill 1 Picturefill 2
Pohodlí frontendisty ✔
RWD Images scénáře ✔
Řešení bez JS ✔
Podpora v prohlížečích ✔
Hezké HTML ...
grunt-responsive-images
responsive_images:  {  
    options:  {  
        sizes:  [  
            {  name:  "small",  widt...
grunt-responsive-images
https://github.com/andismith/grunt-responsive-images/
responsive_images:  {  
    options:  {  
  ...
Compressive Images
http://filamentgroup.com/lab/compressive-images.html
Stlačené obrázky vyexportujeme ve výrazně větší pix...
http://www.ck-rekrea.cz/zrychleni/
Původně 75x75
14kB
Nyní 150x150
6 kB
Retina ready
Compressive Images
Vektory
Ikony, 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/
...
Děkuji!
@machal
vzhurudolu.cz/kurzy/responzivni-webdesign


Upcoming SlideShare
Loading in …5
×

Responzivní obrázky v praxi

3,427 views

Published on

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

Published in: Technology
  • Be the first to comment

Responzivní obrázky v praxi

  1. 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. 2. Fotky
  3. 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. 4. Na specifikaci Responsive Images (srcset, sizes, <picture>…) se výrobci prohlížečů shodli, na podpoře pracují. Zatím je nicmoc.
  5. 5. Naštěstí ale máme Scotta Jehla. Foto
  6. 6. Picturefill
  7. 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. 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. 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. 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. 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. 12. VzhůruDolů.cz 100vw - 2*1em 46.625em Velikosti obrázků 46.625em 70.125em Zlomy layoutu
  13. 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. 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. 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. 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. 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. 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. 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. 20. http://www.ck-rekrea.cz/zrychleni/ Původně 75x75 14kB Nyní 150x150 6 kB Retina ready Compressive Images
  21. 21. Vektory Ikony, loga, schémata, dekorace…
  22. 22. Vektory vsIkonfonty SVG
  23. 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. 24. Děkuji! @machal vzhurudolu.cz/kurzy/responzivni-webdesign 


×