Image performance talk by Grant Kemp ( @UKAndroid) for London Web Meetup

@UKAndroidGrant Kemp LondonWeb: Image Performance Talk

I M A G I N AT I O NTA K I N G I M A G E P E R F O R M A N C E T O A N E W L E V E L

I H AV E A D D E D S O M E A N N O TAT I O N S M A R K E D I N Y E L L O W A F T E R T H E P R E S E N TAT I O N T O H E L P T H O S E W H O C O U L D N ’ T AT T E N D . P L E A S E G E T I N T O U C H V I A C O N N E C T E D W I N D O W. C O M I F Y O U H AV E Q U E S T I O N S , A N D I F I H AV E T I M E , I

W I L L D O M Y B E S T T O R E S P O N D .

TA L K P R E S E N T E D F O R L O N D O N W E B M E E T U P G R O U P 2 2 J A N 2 0 1 6 B Y G R A N T K E M P

http://connectedwindow.com


G R A N T K E M P

@ U K A N D R O I D

http://www.connectedwindow.com


W H E R E I W O R K

http://www.apple.com


I M A G E S A R E N ’ T A P R O B L E M ? ?

A R E T H E Y ?


£264,770 I N E X T R A R E V E N U E F O R S I T E S

B Y F I X I N G I M A G E S


W H AT W E ’ L L C O V E R

• What is performance?

• The Image Problem

• Strategies to fix the problem

• Some of the tools out there

• Some results from fixing it



W E T H I N K A B O U T C A R S


“ T H E E X E C U T I O N O R A C C O M P L I S H M E N T O F W O R K , A C T S , F E AT S , E T C . ”


H I G H P E R F O R M A N C E ?


R E V O L U T I O N

T H E R E H A S B E E N A C O V E R T


L E T ’ S G O B A C K T O 2 0 1 0 …


F R O M I N T E R N E T A R C H I V E S TAT S


2 0 1 5 …


F R O M I N T E R N E T A R C H I V E S TAT S



P R O B L E M 1 : I M A G E S A R E G E T T I N G L A R G E R

L A R G E S T L C D S C R E E N I N W O R L D I N T I M E S S Q U A R E ( G O O G L E )


I M A G E S A C T I VAT E A N D S E L L


I T B U I L D S B R A N D W I T H V I S I T O R S

F R O M M I S S G U I D E D . C O M

http://missguided.com


I M A G E S M A K E P E O P L E B U Y


P R O B L E M 2 : C R E AT I N G I M A G E S I S C O M P L I C AT E D A N D E X P E N S I V E


P R O B L E M 3 : S O M A N Y D E V I C E S


W E S T I L L N E E D T O G I V E A C O N S I S T E N T LY G O O D E X P E R I E N C E


S TA R T W I T H T H E D ATA

I S T H E R E A N I M A G E P R O B L E M ?

I A M A N A N A LY T I C S G E E K - S O I A LWAY S S TA R T W I T H L O O K I N G F O R D ATA .


PA G E T I M I N G S R E P O R T

D I S R E G A R D T O P B I T J U S T L O O K H E R E . R E D M E A N S S L O W E R , G R E E N M E A N S FA S T E R


G O O G L E PA G E S P E E D I N G A

C L I C K T H E PA G E S P E E D L I N K T O G O S T R A I G H T T O T H E PA G E S P E E D R E P O R T

T H I S R E P O R T S H O W S T H E PA G E S P E E D F O R Y O U R M O S T P O P U L A R PA G E S . I T S T H E B E S T

R E P O R T I N G O O G L E A N A LY T I C S


E X A M P L E G O O G L E PA G E S P E E D R E P O R T

G O O G L E PA G E S P E E D T O O L ( J U S T G O O G L E I T - I T S A M A Z I N G A N D V E R Y U S E F U L . ( A N D

F R E E ) )


S P E C I F I C R E C O M M E N D AT I O N S

G O O G L E PA G E S P E E D R E P O R T - D E TA I L F E E D B A C K W H I C H I S A U T O M AT I C A L LY

G E N E R AT E D


S T R AT E G I E S T O I M P R O V E I M A G E P E R F O R M A N C E

T H E I M A G E P E R F O R M A N C E P L AY B O O K


S O L U T I O N 1 : O N E I M A G E S O U R C E F O R A L L D E V I C E S A N D O P T I M I S E A U T O M AT I C A L LY


S O L U T I O N 2 : U S E O N E W O R K F L O W F O R I M A G E S


S O L U T I O N 3 : U S E T H E R I G H T I M A G EJ P G , P N G A N D G I F A R E N O T T H E O N LY O P T I O N S

“Give the best image to the Customer as fast as possible…. automatically”


S O L U T I O N 3 B : U S E T H E R I G H T S I Z E I M A G E

T H I S I M A G E I S R E S I Z E D B Y T H E B R O W S E R . I T S A C T U A L LY L A R G E R T H A N A F U L L H D T V

S C R E E N


L O T S O F O V E R S I Z E D I M A G E S A D D U P T O S L O W A N D H E AV Y PA G E S !

T H I S I S T H E A C T U A L S I Z E S H O W N B Y B R O W S E R . N AT U R A L I S T H E A C T U A L S I Z E O F

T H E I M A G E .


L E T ’ S F I X I M A G E P E R F O R M A N C E

H O W D O W E I M P L E M E N T T H E P L A Y S ?


R E S P O N S I V E I S N O T R E S P O N S I V E E N O U G H

Study: https://timkadlec.com/2013/06/why-we-need-responsive-images/

AT 3 6 0 P X W I D E , T H E S E 4 0 2 S I T E S C O M B I N E T O S E R V E 1 7 1 . 6 2 M B O F U N N E C E S S A R Y W E I G H T T O

T H E I R V I S I T O R S . T H AT ’ S A W H O P P I N G 7 2 . 2 % O F I M A G E W E I G H T T H AT C O U L D B E D I T C H E D B Y

U S I N G A R E S P O N S I V E I M A G E T E C H N I Q U E .


R E S P O N S I V E I S N O T R E S P O N S I V E E N O U G H

RESS Responsive Encompassing Server

Side.


B U I L D Y O U R O W N S O L U T I O N

• Open Source Tools to create your perfect image setup

• ImageMagick

• GraphicsMagick


N E W G E N E R AT I O N O F I M A G E P R O C E S S I N G P L AT F O R M S

+ L O A D S M O R E W I L L H AV E C O M E O U T B Y T H E E N D O F T H I S O F T H I S S P E E C H

S O M E O F T H E T O O L S I H AV E U S E D B E F O R E


O N E I M A G E S O U R C E F O R A L L D E V I C E S , M A K E I T T H E R I G H T F O R M AT A N D S I Z E A S W E L L .

V I D E O A B O V E L I N K : H T T P S : / /W W W. Y O U T U B E . C O M / W AT C H ? V = P 4 F H R U T T C G Y

C L O U D I N A R Y D E M O V I D E O S H O W I N G H O W T O M A N I P U L AT E I M A G E S B Y J U S T C H A N G I N G

T H E U R L . M O S T O F T H E P L AT F O R M S U S E A S I M I L A R M E T H O D T O I N T E R FA C E W I T H

S Y S T E M S

https://www.youtube.com/watch?v=P4FhRuttCgY


S TA N D A R D I S E D W O R K F L O W U S I N G A P I S / C D N S A U T O M AT I C A L LY


S A N D B O X D E M O

B U T W A I T. . T H E R E ’ S M O R E

I M G I X H AV E A N I C E S A N D B O X F E AT U R E T O L E A R N W H AT P O S S I B I L I T I E S T H E R E A R E


D E M O O P T I M I S AT I O N O F A S I T E

W E D I D A L I V E D E M O W H E R E W E R E S I Z E D H A R V E Y N I C H O L S I M A G E S H O W N O N S L I D E

3 4 F R O M 3 3 3 K B D O W N T O 3 3 K B I N L E S S T H A N A M I N U T E


W H AT I S T H E P R I Z E ?W H A T ’ S H A P P E N ’ S W H E N Y O U W I N ?


I M A G E D R O P

387.6 KB PNG

Look out for the drop in image sizes.. Its amazing

3.53 KB Optimized


R E S U LT S A F T E R I M P R O V I N G B Y 0 . 5 S


L I N K T O A R T I C L E : H T T P : / / B I T. LY / 1 R Y F M N Y

http://bit.ly/1RYFmNY


M Y T E S T S

W E M A D E M A G E N T O D E FA U LT VA N I L L A I N S TA N C E O N AW S G O F R O M 1 . 7 1 S U N

O P T I M I S E D T O 1 . 0 1 S J U S T B Y O P T I M I S I N G I M A G E S


F R O M 1 . 7 1 S I N A W S T O …


F R O M C O M PA N I E S W H O H AV E U S E D I M A G E P R O C E S S I N G S O FA R

• Home Page 30% increase in Speed

• Category pages - 70% decrease in page load times from 7.5s to 3s

• and more…


B

L U S H H AV E B E E N U S I N G I M A G E O P T I M I S AT I O N F O R Y E A R S A N D H AV E B U I LT

T H E I R S I T E E X P E R I E N C E A R O U N D H I G H Q U A L I T Y M E D I A . L O O K AT T H E L I V E S I T E !




S O W H Y I S N ’ T E V E R Y O N E D O I N G I T ?

• In most cases websites aren’t benchmarking performance.

• websites also aren’t tracking things like conversion rate per devices

• Customers only track sales which aren’t consistent.

• Telling them they are leaving money on the table is tough- as its not easy to quantify.

• If they improve performance its not always clear what you will get.

• You often need to try it and using the tools I showed you - its really easy to try.


T H E F U T U R E R E V O L U T I O N S TA R T S H E R E

I TA L K E D A B O U T S O M E O F T H E I N N O VAT I O N S T H AT W E A R E D O I N G T O TA K E

I M A G E O P T I M I S AT I O N T O T H E N E X T L E V E L


F O C U S O N E X P E R I E N C E

T H A N K S F O R R E A D I N G


A N Y Q U E S T I O N S

Grant Kemp

www.connectedwindow.com

@UKAndroid


F R E E B I E S

Being a data geek - I Iike to track reaction.

Cloudinary offering special education plan for London Web Peeps: cloudinary.com/londonweb

• ImgIx: Free Credit: email them with londonweb

akamai/ Scene7 : didn’t return my emails and probably thought I was a bit looney for asking

for a deal for London web members

Image performance talk by Grant Kemp ( @UKAndroid) for London Web Meetup

Technology