Digital publishers face a difficult task when looking to provide optimal delivery of visual media to subscribers. Massive media libraries must be optimized for viewing across a variety of different devices, browsers, screen sizes, networks and formats creating a virtual nightmare for developers tasked with managing the workflow of these assets. In this presentation, we will discuss how Complex integrated a scalable, cloud-based, image and video management solution into their existing editorial workflows to deliver optimized, fast loading and responsive content to their end users while reducing their development time to near zero. Gary Ballabio Head of Strategic Alliances, Cloudinary Aleksey Baksheyey CTO, Complex

1. Optimized Media Management in the Cloud:
Automating Digital Media Workflows
Gary Ballabio Aleksey Baksheyev
BD, Cloudinary CTO, Complex
Networks

2. ● Importance of Media in Site Experience
● Media Management Challenges for Digital Publishers
● Tools to Automate Media Management Workflows
● Case Studies - Complex Networks
● Architecture on AWS
● Helpful Resources
● Q&A
Agenda
2

3. Images and videos drive web payloads
3
Jan 2015 Jan 2018
85%INCREASE
1944kb
3588kb
25%
Fonts, CSS, HTML, Scripts
75%
Images and Video
Source: httparchive.org

4. Media enhances user engagement
4
60,000x
source: animoto.com4x
as many people prefer to watch a video
about a product than read about it
source: brafton.com
faster brain processing of
visual images versus text

5. Challenges for The Modern Digital Publisher
5
Handling multiple image
types across different
browsers: JPEG-XR,
WebP, etc.
Crop & Resize around
the most important
media aspects
Optimizing conversions
with fast delivery of
high quality images and
videos
Adapting media for
responsive delivery
across different
viewports

6. Browser Specific: Image Formats
6
30.3KB JPEG 23.5KB JPEG-XR21.3KB WebP

7. Quality 80 - Not always the best
7
QUALITY 80
42.37KB
QUALITY 50
24.73KB

8. Device Specific: Responsive Images
=230,000
WASTED BYTES
=70,000
WASTED BYTES
(600 x 600 – 550x550) x 4 (200 x 200 – 150x150) x 4

9. DPR 1.0 DPR 2.012.46KB 42.90KB
Considerations for DPR

10. Cropping isn’t always easy
10

11. Performance Impacts Engagement
11
WPOStats.com
Metrics related to
Performance and User
Engagement

12. Media Management Pipeline
12
Media Manipulation
OCR
Detect & Blur Faces
Add Watermark & Effects

13. THE BIG CHALLENGE
IMAGE QUALITY

14. Importance of a Media Management Platform
Deliver the optimal image format, quality and resolution
for every user, device, browser, graphic design and responsive layout
Dynamic applicative decisions needed, but still use a global CDN

15. Create & Edit without PhotoShop or Final Cut Pro
15
Resizing, Automated width, Responsive Breakpoint support, Interest based cropping, Rounded corners, Watermarks,
Personalized Text Overlay, captions, Effects and Zoom, Photo effects, filters and many more options
HTTP delivery through CDNs with
advanced caching. Custom CNAME available.
Cloudinary’s account
name and resource type.
Thumbnail cropping, Focus on the auto-detected area of interest
Crop and resize the image to the desired dimensions of 600x772.
Uploaded image ID.
JPG conversion.
http://res.cloudinary.com/idemo/image/upload/ar_192:247,c_thumb,dpr_1.0,g_auto,w_300/balloons.jpg
Interactive Demo

16. 16
1.1 Billion +
Video Views/Month
300 Million +
Users Worldwide

17. 17
Custom CMS

18. 18
Manual Crop & Resize
Sometimes up to 6 assets per
site
Manual Image
Optimization
Many times ignored
Duplicate versions
Across multiple media libraries
Same Format for all
Browsers
Non-responsive Images Complicated purging

19. 19
1 Image to upload 60% Less
In Media management
related development
tickets & bug reports
Increased
Editorial Productivity &
Output
Consolidated
One media library to
manage
Improved
Page loading speeds and
overall site performance

20. Lambda @ Edge
URL
Request headers, Client Hints
Adapted URL
Adapted request header
Cached image
Per user and browser dynamic decision
Dynamic content negotiation and URL rewriting
Adaptation at the CDN of image manipulation request
Dynamic responsive images
Cloudinary Solution Using Lambda on Edge
Best-fit manipulated image

21. Cloudinary Solution Using Lambda on Edge
21
http://idemo-cf.cloudinary.com/w_300,h_200,c_fill,q_90,f_auto/balloons.jpg
Same URL. Same great looking image. 30% bandwidth save!
30.3KB JPEG 23.5KB JPEG-XR21.3KB WebP

22. Some Tools To Help
22

23. Thank you!