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
   

   View Slide

2. @alicebartlett
   Hello
   

   View Slide

3. Photo credit: Nicky Wrightson
   I’m from
   the
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Components, tools
   and services
   @alicebartlett
   

   View Slide

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

   View Slide

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

   View Slide

10. FIRST:
    

    View Slide

11. View Slide

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

    View Slide

13. View Slide

14. https://ft.com
    

    View Slide

15. www.ftchinese.com
    

    View Slide

16. https://discover.ft.com
    

    View Slide

17. https://ftadviser.com
    

    View Slide

18. http://the125.ft.com
    

    View Slide

19. https://howtospendit.ft.com
    

    View Slide

20. http://thebanker.com
    

    View Slide

21. https://non-execs.com
    

    View Slide

22. @alicebartlett
    The FT owns about 30
    branded businesses
    

    View Slide

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

    View Slide

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

    View Slide

25. “FREE MARKET
    SOFTWARE
    TEAMS”
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. @alicebartlett
    Caching Load balancer AWS instances
    V1 architecture
    request
    

    View Slide

31. @alicebartlett
    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
    

    View Slide

32. @alicebartlett
    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
    

    View Slide

33. @alicebartlett
    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
    

    View Slide

34. @alicebartlett
    V1 architecture
    Caching Load balancer AWS instances
    request
    

    View Slide

35. @alicebartlett
    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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

40. @alicebartlett
    So we decided to rebuild it!
    

    View Slide

41. @alicebartlett
    The Origami Team is 4 people
    

    View Slide

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

    View Slide

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

    View Slide

44. RISK
    

    View Slide

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

    View Slide

46. @alicebartlett
    Our SVG handling
    was quite bad too
    

    View Slide

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

    View Slide

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

    View Slide

49. @alicebartlett
    Primarily this was
    about reducing risk
    

    View Slide

50. @alicebartlett
    V1 architecture
    Caching Load balancer AWS instances
    request
    

    View Slide

51. @alicebartlett
    Proposed architecture
    Caching Heroku
    request
    3rd party service
    

    View Slide

52. @alicebartlett
    Proposed architecture
    Caching Heroku
    request
    3rd party service
    

    View Slide

53. @alicebartlett
    Caching Heroku
    request
    Proposed architecture
    3rd party service
    

    View Slide

54. @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. Switching to an off-the-shelf
    solution has given us a lot of
    other benefits
    @alicebartlett
    

    View Slide

65. @alicebartlett
    Adaptive image formats
    request
    JPEG image
    IMAGE SERVICE
    V2
    

    View Slide

66. @alicebartlett
    Adaptive image formats
    request
    WebP Image
    IMAGE SERVICE
    V2
    

    View Slide

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

    View Slide

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

    View Slide

69. Overall, by switching to
    Cloudinary we saw a drop in file
    size for the same quality
    @alicebartlett
    

    View Slide

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

    View Slide

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

    View Slide

72. @alicebartlett
    

    View Slide

73. @alicebartlett
    

    View Slide

74. Alice Bartlett
    Senior Developer, Financial Times
    @alicebartlett
    FIN!
    

    View Slide