Case study on the FT's Responsive Image Service

Slide 1

Slide 1 text

Alice Bartlett Senior Developer, Financial Times @alicebartlett Case study: moving from a hand rolled image service to a 3rd party solution

Slide 2

Slide 2 text

@alicebartlett Hello

Slide 3

Slide 3 text

Photo credit: Nicky Wrightson I’m from the

Slide 4

Slide 4 text

I lead a project at the FT called Origami. @alicebartlett

Slide 5

Slide 5 text

Origami is a 4 person team who develop frontend tools and services at the FT @alicebartlett

Slide 6

Slide 6 text

@alicebartlett Team aims 1. Reduce time spent repeating work 2. Unify design across the FT

Slide 7

Slide 7 text

Components, tools and services @alicebartlett

Slide 8

Slide 8 text

Today I’m going to talk about one of our services: the Image Service @alicebartlett

Slide 9

Slide 9 text

1. How the FT works 2. Image Service V1 3. Why rebuild 4. How’s that rebuild going?

Slide 10

Slide 10 text

FIRST:

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

But it has a lot of other businesses too @alicebartlett

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

https://ft.com

Slide 15

Slide 15 text

www.ftchinese.com

Slide 16

Slide 16 text

https://discover.ft.com

Slide 17

Slide 17 text

https://ftadviser.com

Slide 18

Slide 18 text

http://the125.ft.com

Slide 19

Slide 19 text

https://howtospendit.ft.com

Slide 20

Slide 20 text

http://thebanker.com

Slide 21

Slide 21 text

https://non-execs.com

Slide 22

Slide 22 text

@alicebartlett The FT owns about 30 branded businesses

Slide 23

Slide 23 text

Teams all over the world Some are built in-house Some are built by agencies Some are actively maintained Some aren’t @alicebartlett

Slide 24

Slide 24 text

It isn’t practical to assume that everyone building websites at the FT understands the latest image technologies @alicebartlett

Slide 25

Slide 25 text

“FREE MARKET SOFTWARE TEAMS”

Slide 26

Slide 26 text

“teams are allowed and encouraged to pick the best value tools for the job at hand, be they things developed and supported by internal teams or external to the company” Matt Chadburn, Principal Developer Next.ft.com http://matt.chadburn.co.uk/notes/teams-as-services.html

Slide 27

Slide 27 text

Origami’s Image Service must be really easy to use or people won’t use it. @alicebartlett

Slide 28

Slide 28 text

1. How the FT works 2. Image Service V1 3. Why rebuild 4. How’s that rebuild going?

Slide 29

Slide 29 text

@alicebartlett We started building V1 of our Image Service in January 2014.

Slide 30

Slide 30 text

@alicebartlett Caching Load balancer AWS instances V1 architecture request

Slide 31

Slide 31 text

@alicebartlett

Example request

Slide 32

Slide 32 text

@alicebartlett

Example request

Slide 33

Slide 33 text

@alicebartlett

Example request

Slide 34

Slide 34 text

@alicebartlett V1 architecture Caching Load balancer AWS instances request

Slide 35

Slide 35 text

@alicebartlett

Example request

Slide 36

Slide 36 text

• resizing • compression • conversion between formats • tinting • sprite creation • imagesets • meta-data • dpr • background color fallback • quality • utf-data hacks @alicebartlett v1 features:

Slide 37

Slide 37 text

181 Million Image Service requests (edge) for w/c 11-jul-16 via Akamai

Slide 38

Slide 38 text

1. How the FT works 2. Image Service V1 3. Why rebuild 4. How’s that rebuild going?

Slide 39

Slide 39 text

@alicebartlett The Image Service was very popular and well used by teams all over the FT

Slide 40

Slide 40 text

@alicebartlett So we decided to rebuild it!

Slide 41

Slide 41 text

@alicebartlett The Origami Team is 4 people

Slide 42

Slide 42 text

@alicebartlett We also maintain a component system of ~50 components, and three other services

Slide 43

Slide 43 text

@alicebartlett The Image Service had a key man dependency on Kornel Lesiński, who wrote most of it.

Slide 44

Slide 44 text

RISK

Slide 45

Slide 45 text

@alicebartlett In April of last year, the Image Tragick vulnerability was disclosed

Slide 46

Slide 46 text

@alicebartlett Our SVG handling was quite bad too

Slide 47

Slide 47 text

@alicebartlett In the time since we built the Image Service, some new SaaS image handling providers had come along

Slide 48

Slide 48 text

@alicebartlett So we decided to see if switching to one of those would be good

Slide 49

Slide 49 text

@alicebartlett Primarily this was about reducing risk

Slide 50

Slide 50 text

@alicebartlett V1 architecture Caching Load balancer AWS instances request

Slide 51

Slide 51 text

@alicebartlett Proposed architecture Caching Heroku request 3rd party service

Slide 52

Slide 52 text

@alicebartlett Proposed architecture Caching Heroku request 3rd party service

Slide 53

Slide 53 text

@alicebartlett Caching Heroku request Proposed architecture 3rd party service

Slide 54

Slide 54 text

@alicebartlett

Slide 55

Slide 55 text

https://www.ft.com/__origami/service/image/v2/docs/compare

Slide 56

Slide 56 text

1. How the FT works 2. Image Service V1 3. Why rebuild 4. How’d that rebuild work out?

Slide 57

Slide 57 text

It took us about 3 months to ship v2 of the Image Service (1.5 people working on it) @alicebartlett

Slide 58

Slide 58 text

@alicebartlett Caching Heroku request V2 architecture Cloudinary EU US Other image sources

Slide 59

Slide 59 text

@alicebartlett V2 architecture Caching Heroku request Cloudinary EU US Other image sources

Slide 60

Slide 60 text

@alicebartlett V2 architecture Caching Heroku request Cloudinary EU US Other image sources

Slide 61

Slide 61 text

Caching Heroku request Cloudinary EU US Other image sources @alicebartlett V2 architecture

Slide 62

Slide 62 text

@alicebartlett V2 architecture Caching Heroku request Cloudinary EU US Other image sources

Slide 63

Slide 63 text

So we now have a MUCH SIMPLER system to maintain @alicebartlett

Slide 64

Slide 64 text

Switching to an oﬀ-the-shelf solution has given us a lot of other beneﬁts @alicebartlett

Slide 65

Slide 65 text

@alicebartlett Adaptive image formats request JPEG image IMAGE SERVICE V2

Slide 66

Slide 66 text

@alicebartlett Adaptive image formats request WebP Image IMAGE SERVICE V2

Slide 67

Slide 67 text

@alicebartlett Adaptive image formats request JPEG XR image IMAGE SERVICE V2

Slide 68

Slide 68 text

This change has brought the size of the FT.com homepage from 2Mb of images to 727Kb* @alicebartlett

Slide 69

Slide 69 text

Overall, by switching to Cloudinary we saw a drop in ﬁle size for the same quality @alicebartlett

Slide 70

Slide 70 text

Overall compression quality (eg number of compression artefacts) remained the same @alicebartlett

Slide 71

Slide 71 text

The running cost of a Cloudinary backed service is working out at about the same as running our V1 service @alicebartlett