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

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. Osnova
• Motivace
• Řešení
• Praxe, použití ve Wordpressu
• Další tipy

3. Motivace

4. Jak pracujeme s obrázky
• <img src="kometa.jpg" />

5. Jak pracujeme s obrázky
• <img src="kometa-1024.jpg" width="1024"
height="768" />

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. Šablona

8. Responsivní šablona

9. Velikosti zařízení

10. Parametry displeje
• Retina, 3K, 4K …

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. Rychlost připojení
• Edge
• 3G
• 4G
• LTE
• WIFI

13. První nápad – CSS řešení
.header {background: url(header-small.png)}
@media (min-width: 800px) {
.header {background: url(header.png)}
}

14. První nápad – HTML řešení
<img class="on-mobile"
src="header-small.png" />
<img class="on-desktop"
src="header.png" />

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. Řešení

17. detekce zařízení na serveru
vs.
detekce v prohlížeči

18. Serverová detekce
• už na serveru známe zařízení
• můžeme servírovat různé HTML, data apod
• šetříme data (CDN)

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. 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. wp_is_mobile()

22. DETECT MOBILE BROWSERS
http://detectmobilebrowsers.com/
• obdoba wp_is_mobile() mimo wordpress

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. 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. WURFL - doplňky
• JS detekce – http://wurfl.io/
• WURFL Image Tailor – http://wurfl.io/#wit

26. Detekce v prohlížeči
• server nezná nastavení browseru
• detekce na serveru nemusí být 100%, problém
s aktualizací databáze

27. HTML + CSS media queries třídy
<img class="on-mobile" src="header-small.
png" />
<img class="on-desktop" src="header.png"
/>

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. 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. HTML + JS + data atributy

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. 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. Art direction

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>

36. 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

37. Praxe
Wordpress

38. 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'),
) );
}

39. Zpracování obsahu
• Ručně v šabloně
• Využít filtry
– the_content
– post_gallery
• Shortcodes

40. 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]

41. 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()

42. Další tipy na
optimalizaci obrázků

43. 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

44. Lazy load

45. Vektory
• Iconfont

46. Vektory
• SVG

47. • PNG vs. JPG
• používejte sprity
• nastavení serveru (gZIP, headers, cache)

48. WP konference Praha, 29. 11. 2014
Děkuji za pozornost
Tomáš Hejč
@taccz
tomas.hejc@superkoderi.cz
www.superkoderi.cz