Case study on the FT's Responsive Image Service

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

Df057cdadda4cd7a2a2db52576de1bf2?s=128

Alice Bartlett

April 24, 2017
Tweet

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:

  11. None
  12. But it has a lot of other businesses too @alicebartlett

  13. None
  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!