Zoom Logo

Faster media = faster websites by Cloudinary team - Shared screen with speaker view
Eric Pereira
06:11
Hi there! :)
Daria Shabala
10:08
Let us know where you’re watching us from!
Akshay Ranganath
11:37
Hello everyone! Good morning, afternoon and evening! We’ll be getting started in a few minutes.
Akshay Ranganath
13:07
Hi Karim - welcome to the session!
Jean-Marie Porchet
14:48
Hi! I’m watching from the French speaking part of Switzerland!
jordy
14:49
Hi!
Pramod Shenoy
16:09
Jean-Marie, Jordy and Filipe.. hi and welcome to the session.
Carolina Lagos
16:31
Hi! 👋🏼
jordy
16:44
Thanks Pramod!
Akshay Ranganath
18:31
Let us use the Q&A section for specific questions.
@AlienRoom - Computer Science
21:58
Hello everybody from @AlienRoom Computer Science Community happy to be here
Akshay Ranganath
23:13
Hi @AlienRoom Computer Science Community! Welcome to the session. We are just getting started. We’re covering the basics of typical performance measures. We’ll see why they matter and how to optimize for them - with a focus on your media objects.
Akshay Ranganath
28:19
The pain point we’re trying to address here is that building a work-flow to create multiple formats could get complex. In the recent months, Google (and a few others) have added support for AVIF. In a few months, a new format, JPEG-XL will be added to the list.
Akshay Ranganath
29:19
Similarly, transcoding videos (MOV-> MP4), supporting adaptive bit rate streaming (MP4 -> MPEG-DASH) requires specific tools like Imagemagick, ffmpeg and so on.
Akshay Ranganath
31:00
We’re showing the value in delivering browser-specific format (like WebP). Cloudinary is just a tool. There are open source options available as well like Thumbor that can support in format conversion for images.
jordy
32:18
I'm assuming Cloudinary uses the user agent to determine what browser I'm using, would images break if a user has altered their user agent?
Akshay Ranganath
32:27
Quality is a hard value to express. One of the mechanism is called SIMULACRA which is used by Cloudinary. Other measures are SSIM and Butteragli.
jordy
32:39
Ah, hold on, I'll put it in q&a
Akshay Ranganath
32:49
Thank you, Jordy.
Jean-Marie Porchet
34:05
If we resize on the server size, do we not need to still specify width and height attributes?
Greg Ives
35:13
It’s probably best to do both, because specifying the width and height on the client-side can help to reduce layout shift https://web.dev/optimize-cls/
Akshay Ranganath
35:37
Yes Jean. You’d still need to specify the size for server size resizing.
Pramod Shenoy
35:55
Agreed with Greg.. https://web.dev/optimize-cls/#images-without-dimensions
Akshay Ranganath
36:03
One mechanism is to identify patterns for size and then using that as a template for re-sizing.
Akshay Ranganath
37:00
Here are the links I’ll be referencing in the talk now.
Akshay Ranganath
37:01
Baseline Code: https://github.com/akshay-ranganath/react-summit-baselineOptimized Code: https://github.com/akshay-ranganath/react-summit-optimizedBaseline Netlify App: https://cld-react-summit-baseline.netlify.app/Optimized Netlify App: https://cld-react-summit-pm.netlify.app/WebPageTest Baseline: https://www.webpagetest.org/result/210413_AiDc49_72fd693b9e46e67f1e1392db9a366d7e/WebPageTest Optimized: https://www.webpagetest.org/result/210413_AiDcB0_955f321e4f2e48de954860c8926cf811/Typical transformations Sandbox: https://codesandbox.io/s/cloudinary-react-summit-inzh3Product Gallery Sandbox: https://codesandbox.io/s/zealous-wood-3rbus
Jean-Marie Porchet
37:51
Suggestion: update the code snippet that shows the cloudinary vs self hosted, which lacks the width and height attributes :)
Eric Pereira
41:11
Guys, the Optimised Code repo link is broken…
Jean-Marie Porchet
41:56
It’s probably hidden
Jean-Marie Porchet
42:18
(Private)
jordy
54:04
Not sure if width does something on <Transformation/>, but there's a typo so It probably won't work
jordy
54:56
"widht" -> "width"
Akshay Ranganath
01:13:59
Thanks Jordy. I was trying to make some changes yesterday and introduced the type. I’ll fix and push the code change.
jordy
01:15:21
You're welcome =), thanks for the in depth talk about how to measure performance & how we can use Cloudinary to improve metrics related to media!
Akshay Ranganath
01:16:25
I’m glad it was useful, Jordy.
Akshay Ranganath
01:16:32
I fixed the typo and pushed out the change.
jordy
01:16:46
Awesome!
Pramod Shenoy
01:20:24
https://res.cloudinary.com/demo/image/upload/w_500,q_auto,f_auto/sample.jpg
Pramod Shenoy
01:22:13
https://res.cloudinary.com/demo/image/upload/w_200,h_300,c_fill/basketball_in_net.jpg
Pramod Shenoy
01:22:52
https://res.cloudinary.com/demo/image/upload/w_200,h_300,c_fill,g_auto/basketball_in_net.jpg
Pramod Shenoy
01:26:17
https://cld-workshop-user-upload.netlify.app/
jordy
01:31:25
Thanks Marissa, Akshay, and Pramod for your awesome workshop! I like how you explained why we should care about web vitals, how to measure metrics and also what we can do to improve our metrics aided by Cloudinary! Definitely learned interesting things today =)
Jean-Marie Porchet
01:31:35
Thanks for the presentation!
@AlienRoom - Computer Science
01:31:47
i am interested
Carolina Lagos
01:32:00
thanks!
@AlienRoom - Computer Science
01:32:12
were can i sign up?
Greg Ives
01:32:25
Thank you very much!
Marissa Masangcay
01:33:35
Link for our Americas Course next week - https://training.cloudinary.com/courses/fundamentals-for-developers-virtual-for-americas-april-27-28-2021
Jean-Marie Porchet
01:33:38
Any promo code we could benefit from if we sign up? :)
jordy
01:33:41
Thanks!
@AlienRoom - Computer Science
01:33:47
thanks for the link
Marissa Masangcay
01:34:36
Link for our EMEA training next week - https://training.cloudinary.com/courses/fundamentals-for-developers-virtual-for-emea-april-27-28-2021
This is Alexey
01:34:53
Hey, I'm wondering if image optimizations are suitable for Retina-displays and cases where you need to have a high-res image on demand?
This is Alexey
01:38:15
thanks for the answer!
This is Alexey
01:38:51
What I'm specifically interested in: on mobile you can pinch-and-zoom on a regular image, so it should stay sharp on Retina devices
This is Alexey
01:39:14
while being optimized by default
jordy
01:41:30
Not right now, thanks!
Jean-Marie Porchet
01:41:32
I wanted to know if there were any promo codes going on?
This is Alexey
01:41:34
it's a sort of ecommerce site where you see images of a complex devices, which users might want to look closer
This is Alexey
01:41:40
thanks for answers!
Jean-Marie Porchet
01:42:31
Thanks!
Jean-Marie Porchet
01:44:47
Bye!