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

@UKAndroidGrant Kemp LondonWeb: Image Performance Talk
I M A G I N AT I O N
TA K I N G I M A G E P E R F O R M A N C E TO 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

G R A N T K E M P
@ U K A N D R O I D

W H E R E I W O R K

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,770I 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 …

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

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 RT 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 RT
T H I S R E P O RT 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 RT 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 RY 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 RT - 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 E
J 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 NT 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 RY 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 / WAT C H ? V = P 4 F H R U T T C G Y
C L O U D I N A RY 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

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 WA 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 YO 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 RT I C L E : H T T P : / / B I T. LY / 1 RY F M N Y

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 RY 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 ( @ukdatageek) for London Web Meetup

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (20)

Similar to Image performance talk by Grant Kemp ( @ukdatageek) for London Web Meetup

Similar to Image performance talk by Grant Kemp ( @ukdatageek) for London Web Meetup (20)

Recently uploaded

Recently uploaded (20)

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