SlideShare a Scribd company logo

Responzivní obrázky v praxi

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

1 of 24
Download to read offline
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

Recommended

Retina displeje pro webdesignéry
Retina displeje pro webdesignéryRetina displeje pro webdesignéry
Retina displeje pro webdesignéryMartin Michálek
 
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)Martin Michálek
 
Optimalizace obrázků v (responsivních) šablonách
Optimalizace obrázků v (responsivních) šablonáchOptimalizace obrázků v (responsivních) šablonách
Optimalizace obrázků v (responsivních) šablonáchSUPERKODERS
 
O elementu picture v Ostravě
O elementu picture v OstravěO elementu picture v Ostravě
O elementu picture v OstravěRobin Pokorny
 
Design webů v prohlížeči
Design webů v prohlížečiDesign webů v prohlížeči
Design webů v prohlížečiMartin Michálek
 
Pokročilé responzivní obrázky
Pokročilé responzivní obrázkyPokročilé responzivní obrázky
Pokročilé responzivní obrázkyRobin Pokorny
 

More Related Content

More from Martin Michálek

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeRychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin Michálek
 
CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?Martin Michálek
 
Browsers: from competition to collaboration
Browsers: from competition to collaborationBrowsers: from competition to collaboration
Browsers: from competition to collaborationMartin Michálek
 
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webuMartin Michálek
 
17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webůMartin Michálek
 
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Martin Michálek
 
Blbosti kolem webové rychlosti
Blbosti kolem webové rychlostiBlbosti kolem webové rychlosti
Blbosti kolem webové rychlostiMartin Michálek
 
SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuSEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuMartin Michálek
 
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Martin Michálek
 
CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)Martin Michálek
 
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíAMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíMartin Michálek
 
Metriky rychlosti načítání
Metriky rychlosti načítáníMetriky rychlosti načítání
Metriky rychlosti načítáníMartin Michálek
 
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryWebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryMartin Michálek
 
Je CSS vážně tak podivné?
Je CSS vážně  tak podivné?Je CSS vážně  tak podivné?
Je CSS vážně tak podivné?Martin Michálek
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
 
Slasti a pasti prototypování v HTML
Slasti a pasti  prototypování v HTMLSlasti a pasti  prototypování v HTML
Slasti a pasti prototypování v HTMLMartin Michálek
 
10 praktických CSS3 a SVG řešení
10 praktických  CSS3 a SVG řešení10 praktických  CSS3 a SVG řešení
10 praktických CSS3 a SVG řešeníMartin Michálek
 
Debugování responzivních webů
Debugování responzivních webůDebugování responzivních webů
Debugování responzivních webůMartin Michálek
 

More from Martin Michálek (20)

Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeRychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
 
CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?
 
Browsers: from competition to collaboration
Browsers: from competition to collaborationBrowsers: from competition to collaboration
Browsers: from competition to collaboration
 
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
 
17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webů
 
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
 
Blbosti kolem webové rychlosti
Blbosti kolem webové rychlostiBlbosti kolem webové rychlosti
Blbosti kolem webové rychlosti
 
SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuSEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webu
 
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)
 
CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)
 
Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4
 
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíAMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízí
 
Metriky rychlosti načítání
Metriky rychlosti načítáníMetriky rychlosti načítání
Metriky rychlosti načítání
 
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryWebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
 
Je CSS vážně tak podivné?
Je CSS vážně  tak podivné?Je CSS vážně  tak podivné?
Je CSS vážně tak podivné?
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
 
Slasti a pasti prototypování v HTML
Slasti a pasti  prototypování v HTMLSlasti a pasti  prototypování v HTML
Slasti a pasti prototypování v HTML
 
10 praktických CSS3 a SVG řešení
10 praktických  CSS3 a SVG řešení10 praktických  CSS3 a SVG řešení
10 praktických CSS3 a SVG řešení
 
Debugování responzivních webů
Debugování responzivních webůDebugování responzivních webů
Debugování responzivních webů
 
Mobile First v praxi
Mobile First v praxiMobile First v praxi
Mobile First v praxi
 

Responzivní obrázky v praxi

  • 1. Responzivní obrázky Frontendisti Ostrava 27. 9. 2014 v praxi Co potřebujete vědět o implementaci responzivních fotek a vektorů?
  • 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
  • 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.
  • 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