Case study on the FT's Responsive Image Service

Presentation given at a Cloudinary meetup on moving from our hand rolled image service to one backed by cloudinary

Transcript

1. Alice Bartlett Senior Developer, Financial Times @alicebartlett Case study: moving from a hand rolled image service to a 3rd party solution
2. @alicebartlett Hello
3. Photo credit: Nicky Wrightson I’m from the
4. I lead a project at the FT called Origami. @alicebartlett
5. Origami is a 4 person team who develop frontend tools and services at the FT @alicebartlett
6. @alicebartlett Team aims 1. Reduce time spent repeating work 2. Unify design across the FT
7. Components, tools and services @alicebartlett
8. Today I’m going to talk about one of our services: the Image Service @alicebartlett
9. 1. How the FT works 2. Image Service V1 3. Why rebuild 4. How’s that rebuild going?
10. FIRST:
12. But it has a lot of other businesses too @alicebartlett
14. https://ft.com
15. www.ftchinese.com
16. https://discover.ft.com
17. https://ftadviser.com
18. http://the125.ft.com
19. https://howtospendit.ft.com
20. http://thebanker.com
21. https://non-execs.com
22. @alicebartlett The FT owns about 30 branded businesses
23. Teams all over the world Some are built in-house Some are built by agencies Some are actively maintained Some aren’t @alicebartlett
24. It isn’t practical to assume that everyone building websites at the FT understands the latest image technologies @alicebartlett
25. “FREE MARKET SOFTWARE TEAMS”
26. “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
27. Origami’s Image Service must be really easy to use or people won’t use it. @alicebartlett
28. 1. How the FT works 2. Image Service V1 3. Why rebuild 4. How’s that rebuild going?
29. @alicebartlett We started building V1 of our Image Service in January 2014.
30. @alicebartlett Caching Load balancer AWS instances V1 architecture request
31. @alicebartlett <img src=“https://www.ft.com/__origami/service/ image/v2/images/raw/http%3A%2F%2Fim.ft- static.com%2Fcontent%2Fimages%2Fa60ae24b- b87f-439c-bf1b-6e54946b4cf2.png? source=alice&width=200&format=jpg”/> Example request
32. @alicebartlett <img src=“https://www.ft.com/__origami/service/ image/v2/images/raw/http%3A%2F%2Fim.ft- static.com%2Fcontent%2Fimages%2Fa60ae24b- b87f-439c-bf1b-6e54946b4cf2.png? source=alice&width=200&format=jpg”/> Example request
33. @alicebartlett <img src=“https://www.ft.com/__origami/service/ image/v2/images/raw/http%3A%2F%2Fim.ft- static.com%2Fcontent%2Fimages%2Fa60ae24b- b87f-439c-bf1b-6e54946b4cf2.png? source=alice&width=200&format=jpg”/> Example request
34. @alicebartlett V1 architecture Caching Load balancer AWS instances request
35. @alicebartlett <img src=“https://www.ft.com/__origami/service/ image/v2/images/raw/http%3A%2F%2Fim.ft- static.com%2Fcontent%2Fimages%2Fa60ae24b- b87f-439c-bf1b-6e54946b4cf2.png? source=alice&width=200&format=jpg”/> Example request
36. • resizing • compression • conversion between formats • tinting • sprite creation • imagesets • meta-data • dpr • background color fallback • quality • utf-data hacks @alicebartlett v1 features:
37. 181 Million Image Service requests (edge) for w/c 11-jul-16 via Akamai
38. 1. How the FT works 2. Image Service V1 3. Why rebuild 4. How’s that rebuild going?
39. @alicebartlett The Image Service was very popular and well used by teams all over the FT
40. @alicebartlett So we decided to rebuild it!
41. @alicebartlett The Origami Team is 4 people
42. @alicebartlett We also maintain a component system of ~50 components, and three other services
43. @alicebartlett The Image Service had a key man dependency on Kornel Lesiński, who wrote most of it.
44. RISK
45. @alicebartlett In April of last year, the Image Tragick vulnerability was disclosed
46. @alicebartlett Our SVG handling was quite bad too
47. @alicebartlett In the time since we built the Image Service, some new SaaS image handling providers had come along
48. @alicebartlett So we decided to see if switching to one of those would be good
49. @alicebartlett Primarily this was about reducing risk
50. @alicebartlett V1 architecture Caching Load balancer AWS instances request
51. @alicebartlett Proposed architecture Caching Heroku request 3rd party service
52. @alicebartlett Proposed architecture Caching Heroku request 3rd party service
53. @alicebartlett Caching Heroku request Proposed architecture 3rd party service
54. @alicebartlett
55. https://www.ft.com/__origami/service/image/v2/docs/compare
56. 1. How the FT works 2. Image Service V1 3. Why rebuild 4. How’d that rebuild work out?
57. It took us about 3 months to ship v2 of the Image Service (1.5 people working on it) @alicebartlett
58. @alicebartlett Caching Heroku request V2 architecture Cloudinary EU US Other image sources
59. @alicebartlett V2 architecture Caching Heroku request Cloudinary EU US Other image sources
60. @alicebartlett V2 architecture Caching Heroku request Cloudinary EU US Other image sources
61. Caching Heroku request Cloudinary EU US Other image sources @alicebartlett V2 architecture
62. @alicebartlett V2 architecture Caching Heroku request Cloudinary EU US Other image sources
63. So we now have a MUCH SIMPLER system to maintain @alicebartlett
64. Switching to an off-the-shelf solution has given us a lot of other benefits @alicebartlett
65. @alicebartlett Adaptive image formats request JPEG image IMAGE SERVICE V2
66. @alicebartlett Adaptive image formats request WebP Image IMAGE SERVICE V2
67. @alicebartlett Adaptive image formats request JPEG XR image IMAGE SERVICE V2
68. This change has brought the size of the FT.com homepage from 2Mb of images to 727Kb* @alicebartlett
69. Overall, by switching to Cloudinary we saw a drop in file size for the same quality @alicebartlett
70. Overall compression quality (eg number of compression artefacts) remained the same @alicebartlett
71. The running cost of a Cloudinary backed service is working out at about the same as running our V1 service @alicebartlett
72. @alicebartlett
73. @alicebartlett
74. Alice Bartlett Senior Developer, Financial Times @alicebartlett FIN!