+ All Categories
Home > Technology > Optimalizace obrázků v (responsivních) šablonách

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

Date post: 12-Jul-2015
Category:
Upload: superkoderi
View: 446 times
Download: 1 times
Share this document with a friend
48
Optimalizace obrázků v (responsivních) šablonách Tomáš Hejč @taccz [email protected] www.superkoderi.cz WP konference Praha, 29. 11. 2014
Transcript
Page 1: Optimalizace obrázků v (responsivních) šablonách

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

Tomáš Hejč

@[email protected]

www.superkoderi.cz

WP konference Praha, 29. 11. 2014

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

Osnova

• Motivace

• Řešení

• Praxe, použití ve Wordpressu

• Další tipy

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

Motivace

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

Jak pracujeme s obrázky

• <img src="kometa.jpg" />

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

Jak pracujeme s obrázky

• <img src="kometa-1024.jpg" width="1024"

height="768" />

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

Wordpress

• Standardně 4 rozměry:

– Thumbnail

– Medium

– Large

– Full

• Jednoduše lze přidávat další velikosti:add_image_size('img1024', 1024, 1024, false);

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

Šablona

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

Responsivní šablona

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

Velikosti zařízení

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

Parametry displeje

• Retina, 3K, 4K …

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

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/

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

Rychlost připojení

• Edge

• 3G

• 4G

• LTE

• WIFI

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

První nápad – CSS řešení

.header {background: url(header-small.png)}

@media (min-width: 800px) {

.header {background: url(header.png)}

}

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

První nápad – HTML řešení

<img class="on-mobile"

src="header-small.png" />

<img class="on-desktop"

src="header.png" />

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

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

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

Řešení

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

detekce zařízení na serveru

vs.

detekce v prohlížeči

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

Serverová detekce

• už na serveru známe zařízení

• můžeme servírovat různé HTML, data apod

• šetříme data (CDN)

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

Rozpoznání zařízení

• analýza user-agenta pomocí regulárníhovýrazu

• analýza user-agenta na základě databázezařízení

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

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

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

wp_is_mobile()

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

DETECT MOBILE BROWSERS http://detectmobilebrowsers.com/

• obdoba wp_is_mobile() mimo wordpress

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

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

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

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)

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

WURFL - doplňky

• JS detekce – http://wurfl.io/

• WURFL Image Tailor – http://wurfl.io/#wit

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

Detekce v prohlížeči

• server nezná nastavení browseru

• detekce na serveru nemusí být 100%, probléms aktualizací databáze

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

HTML + CSS media queries třídy

<img class="on-mobile" src="header-

small.png" />

<img class="on-desktop" src="header.png"

/>

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

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}

}

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

HTML + JS + data atributy

<img

src="image-small.png" data-tablet="image-medium.png" data-desktop="image-big.png"

/>

Př: http://www.responsejs.com

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

HTML + JS + data atributy

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

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"

/>

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

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)

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

Art direction

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

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

Page 35: Optimalizace obrázků v (responsivních) šablonách
Page 36: Optimalizace obrázků v (responsivních) šablonách

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

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

Praxe

Wordpress

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

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'),

) );

}

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

Zpracování obsahu

• Ručně v šabloně

• Využít filtry

– the_content

– post_gallery

• Shortcodes

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

Zpracování přes shortcodehttps://github.com/ractoon/wordpress-picturefill

• [picture img="image-small.png,

[email protected] 2x"][/picture]

• [picture img="image-small.png,

[email protected] 2x"][source

srcset="image-medium.png, [email protected] 2x"

media="(min-width: 400px)"] [/picture]

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

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

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

Další tipy na

optimalizaci obrázků

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

Compressive images

• příklad:

velikost 400×300px 90% kvalita 70kBvelikost 1024×768px 0% kvalita 27kB

• http://www.filamentgroup.com/lab/compressive-images.html

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

Lazy load

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

Vektory

• Iconfont

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

Vektory

• SVG

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

• PNG vs. JPG

• používejte sprity

• nastavení serveru (gZIP, headers, cache)

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

Děkuji za pozornost

Tomáš Hejč

@[email protected]

www.superkoderi.cz

WP konference Praha, 29. 11. 2014


Recommended