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.
WP konference Praha, 29. 11. 2014 
Optimalizace obrázků v 
(responsivních) šablonách 
Tomáš Hejč 
@taccz 
tomas.hejc@super...
Osnova 
• Motivace 
• Řešení 
• Praxe, použití ve Wordpressu 
• Další tipy
Motivace
Jak pracujeme s obrázky 
• <img src="kometa.jpg" />
Jak pracujeme s obrázky 
• <img src="kometa-1024.jpg" width="1024" 
height="768" />
Wordpress 
• Standardně 4 rozměry: 
– Thumbnail 
– Medium 
– Large 
– Full 
• Jednoduše lze přidávat další velikosti: 
add...
Šablona
Responsivní šablona
Velikosti zařízení
Parametry displeje 
• Retina, 3K, 4K …
Retina ready obrázky 
• obrázek je fyzicky 2x větší 
• do stránky je vložen a atributy zmenšen na 
polovinu 
• plugin: WP ...
Rychlost připojení 
• Edge 
• 3G 
• 4G 
• LTE 
• WIFI
První nápad – CSS řešení 
.header {background: url(header-small.png)} 
@media (min-width: 800px) { 
.header {background: u...
První nápad – HTML řešení 
<img class="on-mobile" 
src="header-small.png" /> 
<img class="on-desktop" 
src="header.png" />
Co tedy potřebujeme vědět? 
vlastnost zná vývojář? zná prohlížeč? 
velikost obrazovky NE ANO 
velikost obrázku 
ve stránce...
Řešení
detekce zařízení na serveru 
vs. 
detekce v prohlížeči
Serverová detekce 
• už na serveru známe zařízení 
• můžeme servírovat různé HTML, data apod 
• šetříme data (CDN)
Rozpoznání zařízení 
• analýza user-agenta pomocí regulárního 
výrazu 
• analýza user-agenta na základě databáze 
zařízení
wp_is_mobile() 
• funkce přímo v jádru Wordpressu 
• analýza na základě reguláru 
• mobil ano / ne 
• http://codex.wordpre...
wp_is_mobile()
DETECT MOBILE BROWSERS 
http://detectmobilebrowsers.com/ 
• obdoba wp_is_mobile() mimo wordpress
MOBILE DETECT 
http://mobiledetect.net/ 
• analýza na základě databáze zařízení 
• poměrně častá aktualizace databáze 
(cc...
WURFL 
http://www.scientiamobile.com/ 
• rozpoznání na základě databáze zařízení 
• nejznámější a hojně používaný 
• place...
WURFL - doplňky 
• JS detekce – http://wurfl.io/ 
• WURFL Image Tailor – http://wurfl.io/#wit
Detekce v prohlížeči 
• server nezná nastavení browseru 
• detekce na serveru nemusí být 100%, problém 
s aktualizací data...
HTML + CSS media queries třídy 
<img class="on-mobile" src="header-small. 
png" /> 
<img class="on-desktop" src="header.pn...
HTML + CSS media queries třídy 
.on-mobile {display: block} 
.on-desktop {display: none} 
@media (min-width: 601px) { 
.on...
HTML + JS + data atributy 
<img 
src="image-small.png" 
data-tablet="image-medium.png" 
data-desktop="image-big.png" 
/> 
...
HTML + JS + data atributy
Picture element 
<img src="foto-320.jpg" 
srcset="foto-1920.jpg 1920w, 
foto-1024.jpg 1024w, 
foto-640.jpg 640w, 
foto-320...
Prohlížeč ví vše 
vlastnost zná vývojář? zná prohlížeč? 
velikost obrazovky NE ANO 
velikost obrázku 
ve stránce 
ANO ANO ...
Art direction
<picture> 
<picture> 
<source media="(min-width: 1200px)" 
srcset="port.jpg 1920w, 
barcelona-all-m.jpg 900w, …"> 
<source...
Picturefill2 
http://scottjehl.github.io/picturefill/ 
• Polyfill pro <picture> 
• Není ideální: 
– prohlížeče bez JS vidí...
Praxe 
Wordpress
Přidání velikostí 
• add_image_size( 'thumb-800', 800, 800, false ); 
add_image_size( 'thumb-400', 400, 400, false ); 
• a...
Zpracování obsahu 
• Ručně v šabloně 
• Využít filtry 
– the_content 
– post_gallery 
• Shortcodes
Zpracování přes shortcode 
https://github.com/ractoon/wordpress-picturefill 
• [picture 
img="image-small.png, 
image-smal...
Plugin - <picture> + Picturefill2 
https://github.com/kylereicks/picturefill.js.wp 
• automaticky projde content, najde im...
Další tipy na 
optimalizaci obrázků
Compressive images 
• příklad: 
velikost 400×300px 90% kvalita 70kB 
velikost 1024×768px 0% kvalita 27kB 
• http://www.fil...
Lazy load
Vektory 
• Iconfont
Vektory 
• SVG
• PNG vs. JPG 
• používejte sprity 
• nastavení serveru (gZIP, headers, cache)
WP konference Praha, 29. 11. 2014 
Děkuji za pozornost 
Tomáš Hejč 
@taccz 
tomas.hejc@superkoderi.cz 
www.superkoderi.cz
Optimalizace obrázků v (responsivních) šablonách
Upcoming SlideShare
Loading in …5
×

Optimalizace obrázků v (responsivních) šablonách

1,126 views

Published on

Práce s obrázky, nástroje pro detekci zařízení, tipy a triky

Published in: Technology
  • Be the first to comment

Optimalizace obrázků v (responsivních) šablonách

  1. 1. WP konference Praha, 29. 11. 2014 Optimalizace obrázků v (responsivních) šablonách Tomáš Hejč @taccz tomas.hejc@superkoderi.cz www.superkoderi.cz
  2. 2. Osnova • Motivace • Řešení • Praxe, použití ve Wordpressu • Další tipy
  3. 3. Motivace
  4. 4. Jak pracujeme s obrázky • <img src="kometa.jpg" />
  5. 5. Jak pracujeme s obrázky • <img src="kometa-1024.jpg" width="1024" height="768" />
  6. 6. Wordpress • Standardně 4 rozměry: – Thumbnail – Medium – Large – Full • Jednoduše lze přidávat další velikosti: add_image_size('img1024', 1024, 1024, false);
  7. 7. Šablona
  8. 8. Responsivní šablona
  9. 9. Velikosti zařízení
  10. 10. Parametry displeje • Retina, 3K, 4K …
  11. 11. Retina ready obrázky • obrázek je fyzicky 2x větší • do stránky je vložen a atributy zmenšen na polovinu • plugin: WP Retina 2x https://wordpress.org/plugins/wp-retina-2x/
  12. 12. Rychlost připojení • Edge • 3G • 4G • LTE • WIFI
  13. 13. První nápad – CSS řešení .header {background: url(header-small.png)} @media (min-width: 800px) { .header {background: url(header.png)} }
  14. 14. První nápad – HTML řešení <img class="on-mobile" src="header-small.png" /> <img class="on-desktop" src="header.png" />
  15. 15. Co tedy potřebujeme vědět? vlastnost zná vývojář? zná prohlížeč? velikost obrazovky NE ANO velikost obrázku ve stránce ANO NE kvalita displeje NE ANO rozměry obrázku ANO NE
  16. 16. Řešení
  17. 17. detekce zařízení na serveru vs. detekce v prohlížeči
  18. 18. Serverová detekce • už na serveru známe zařízení • můžeme servírovat různé HTML, data apod • šetříme data (CDN)
  19. 19. Rozpoznání zařízení • analýza user-agenta pomocí regulárního výrazu • analýza user-agenta na základě databáze zařízení
  20. 20. wp_is_mobile() • funkce přímo v jádru Wordpressu • analýza na základě reguláru • mobil ano / ne • http://codex.wordpress.org/Function_Reference/wp_is_ mobile
  21. 21. wp_is_mobile()
  22. 22. DETECT MOBILE BROWSERS http://detectmobilebrowsers.com/ • obdoba wp_is_mobile() mimo wordpress
  23. 23. MOBILE DETECT http://mobiledetect.net/ • analýza na základě databáze zařízení • poměrně častá aktualizace databáze (cca 1x měsíčně) • zdarma
  24. 24. WURFL http://www.scientiamobile.com/ • rozpoznání na základě databáze zařízení • nejznámější a hojně používaný • placené / na 5 vlastností zdarma • Cloud vs. Server (PHP, .NET, Java)
  25. 25. WURFL - doplňky • JS detekce – http://wurfl.io/ • WURFL Image Tailor – http://wurfl.io/#wit
  26. 26. Detekce v prohlížeči • server nezná nastavení browseru • detekce na serveru nemusí být 100%, problém s aktualizací databáze
  27. 27. HTML + CSS media queries třídy <img class="on-mobile" src="header-small. png" /> <img class="on-desktop" src="header.png" />
  28. 28. HTML + CSS media queries třídy .on-mobile {display: block} .on-desktop {display: none} @media (min-width: 601px) { .on-desktop {display: block} .on-mobile {display: none} }
  29. 29. HTML + JS + data atributy <img src="image-small.png" data-tablet="image-medium.png" data-desktop="image-big.png" /> Př: http://www.responsejs.com
  30. 30. HTML + JS + data atributy
  31. 31. Picture element <img src="foto-320.jpg" srcset="foto-1920.jpg 1920w, foto-1024.jpg 1024w, foto-640.jpg 640w, foto-320.jpg 320w" sizes="(min-width: 800px) 25vw, 100vw" />
  32. 32. Prohlížeč ví vše vlastnost zná vývojář? zná prohlížeč? velikost obrazovky NE ANO velikost obrázku ve stránce ANO ANO (sizes) kvalita displeje NE ANO rozměry obrázku ANO ANO (srcset)
  33. 33. Art direction
  34. 34. <picture> <picture> <source media="(min-width: 1200px)" srcset="port.jpg 1920w, barcelona-all-m.jpg 900w, …"> <source media="(min-width: 600px)" srcset="port-center.jpg 900w, …"> <img src="port-boat.jpg" srcset="port-boat.jpg 640w, …"> </picture>
  35. 35. Picturefill2 http://scottjehl.github.io/picturefill/ • Polyfill pro <picture> • Není ideální: – prohlížeče bez JS vidí jen alt – některé prohlížeče stáhnout více zdrojů – Android 2.3, IE9 – problémy
  36. 36. Praxe Wordpress
  37. 37. Přidání velikostí • add_image_size( 'thumb-800', 800, 800, false ); add_image_size( 'thumb-400', 400, 400, false ); • add_filter('image_size_names_choose', 'im_sizes'); function im_sizes ($sizes) { return array_merge( $sizes, array( 'thumb-800' => __('Desktop Image'), 'thumb-400' => __('Mobile Image'), ) ); }
  38. 38. Zpracování obsahu • Ručně v šabloně • Využít filtry – the_content – post_gallery • Shortcodes
  39. 39. Zpracování přes shortcode https://github.com/ractoon/wordpress-picturefill • [picture img="image-small.png, image-small@2x.png 2x"] [/picture] • [picture img="image-small.png, image-small@2x.png 2x"] [source srcset="image-medium.png, image-medium@2x.png 2x" media="(min-width: 400px)"] [/picture]
  40. 40. Plugin - <picture> + Picturefill2 https://github.com/kylereicks/picturefill.js.wp • automaticky projde content, najde img a provede nahrazení • srcsety se registrují přes picturefill_wp_register_srcset() • sizes se registrují přes picturefill_wp_register_sizes()
  41. 41. Další tipy na optimalizaci obrázků
  42. 42. Compressive images • příklad: velikost 400×300px 90% kvalita 70kB velikost 1024×768px 0% kvalita 27kB • http://www.filamentgroup.com/lab/compressi ve-images.html
  43. 43. Lazy load
  44. 44. Vektory • Iconfont
  45. 45. Vektory • SVG
  46. 46. • PNG vs. JPG • používejte sprity • nastavení serveru (gZIP, headers, cache)
  47. 47. WP konference Praha, 29. 11. 2014 Děkuji za pozornost Tomáš Hejč @taccz tomas.hejc@superkoderi.cz www.superkoderi.cz

×