Post on 12-Jul-2015
transcript
Optimalizace obrázků v (responsivních) šablonách
Tomáš Hejč
@taccztomas.hejc@superkoderi.cz
www.superkoderi.cz
WP konference Praha, 29. 11. 2014
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_image_size('img1024', 1024, 1024, false);
Š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 napolovinu
• plugin: WP Retina 2xhttps://wordpress.org/plugins/wp-retina-2x/
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: url(header.png)}
}
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ázkuve stránce
ANO NE
kvalita displeje NE ANO
rozměry obrázku ANO NE
Ř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íhovýrazu
• analýza user-agenta na základě databázezařízení
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
wp_is_mobile()
DETECT MOBILE BROWSERS http://detectmobilebrowsers.com/
• obdoba wp_is_mobile() mimo wordpress
MOBILE DETECThttp://mobiledetect.net/
• analýza na základě databáze zařízení
• poměrně častá aktualizace databáze(cca 1x měsíčně)
• zdarma
WURFLhttp://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)
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éms aktualizací databáze
HTML + CSS media queries třídy
<img class="on-mobile" src="header-
small.png" />
<img class="on-desktop" src="header.png"
/>
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}
}
HTML + JS + data atributy
<img
src="image-small.png" data-tablet="image-medium.png" data-desktop="image-big.png"
/>
Př: http://www.responsejs.com
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.jpg 320w"
sizes="(min-width: 800px) 25vw,
100vw"
/>
Prohlížeč ví vše
vlastnost zná vývojář? zná prohlížeč?
velikost obrazovky NE ANO
velikost obrázkuve stránce
ANO ANO (sizes)
kvalita displeje NE ANO
rozměry obrázku ANO ANO (srcset)
Art direction
<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>
Picturefill2http://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
Praxe
Wordpress
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'),
) );
}
Zpracování obsahu
• Ručně v šabloně
• Využít filtry
– the_content
– post_gallery
• Shortcodes
Zpracování přes shortcodehttps://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]
Plugin - <picture> + Picturefill2https://github.com/kylereicks/picturefill.js.wp
• automaticky projde content, najde img a provede nahrazení
• srcsety se registrují přespicturefill_wp_register_srcset()
• sizes se registrují přes picturefill_wp_register_sizes()
Další tipy na
optimalizaci obrázků
Compressive images
• příklad:
velikost 400×300px 90% kvalita 70kBvelikost 1024×768px 0% kvalita 27kB
• http://www.filamentgroup.com/lab/compressive-images.html
Lazy load
Vektory
• Iconfont
Vektory
• SVG
• PNG vs. JPG
• používejte sprity
• nastavení serveru (gZIP, headers, cache)
Děkuji za pozornost
Tomáš Hejč
@taccztomas.hejc@superkoderi.cz
www.superkoderi.cz
WP konference Praha, 29. 11. 2014