Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Alice Bartlett

April 24, 2017
Tweet

More Decks by Alice Bartlett

Other Decks in Technology

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