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 full-size slide

  2. @alicebartlett
    Hello

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Components, tools
    and services
    @alicebartlett

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. https://ft.com

    View full-size slide

  12. www.ftchinese.com

    View full-size slide

  13. https://discover.ft.com

    View full-size slide

  14. https://ftadviser.com

    View full-size slide

  15. http://the125.ft.com

    View full-size slide

  16. https://howtospendit.ft.com

    View full-size slide

  17. http://thebanker.com

    View full-size slide

  18. https://non-execs.com

    View full-size slide

  19. @alicebartlett
    The FT owns about 30
    branded businesses

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. “FREE MARKET
    SOFTWARE
    TEAMS”

    View full-size slide

  23. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. @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 full-size slide

  29. @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 full-size slide

  30. @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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. @alicebartlett
    So we decided to rebuild it!

    View full-size slide

  38. @alicebartlett
    The Origami Team is 4 people

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. @alicebartlett
    Our SVG handling
    was quite bad too

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. @alicebartlett
    Primarily this was
    about reducing risk

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. @alicebartlett

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. @alicebartlett

    View full-size slide

  69. @alicebartlett

    View full-size slide

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

    View full-size slide