Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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


Prochain SlideShare
Chargement dans…5
×

Responzivní obrázky v praxi

3 542 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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 


×