--- title: "Browser Client Hints are awesome!" description: "Learn how to use Browser Client Hints and Cloudinary to serve responsive images with minimal markup and maximum performance. Browser Client Hints tell Cloudinary the optimal size and resolution of each image request, and Cloudinary delivers it on the fly!" date: "2023-07-24T14:00:11.000Z" url: "https://timbenniks.dev/videos/tim/014-h3rlwn27ga8" youtube_url: "https://www.youtube.com/watch?v=H3rLwN27Ga8" playlist: "tim" image: "https://i.ytimg.com/vi/H3rLwN27Ga8/maxresdefault.jpg" tags: ["content-ops", "performance", "cloud-infra", "frontend", "media-production"] --- # Browser Client Hints are awesome! Learn how to use Browser Client Hints and Cloudinary to serve responsive images with minimal markup and maximum performance. Browser Client Hints tell Cloudinary the optimal size and resolution of each image request, and Cloudinary delivers it on the fly! Watch on YouTube: https://www.youtube.com/watch?v=H3rLwN27Ga8 ## Transcript I've been living under a rock recently and I don't know what happened I guess life happened busy jobs things summer whatever anyways I was speaking to my friend Colby fayak who is devrel at cloudinary and we were talking about this thing called browser client hints and I had no idea what he was talking about but actually I should have known because I am one of these people that really loves media on the web how to deal with images optimization cropping performance videos all the things and I should have known about client hints and if I didn't know either I really lived under a rock or maybe you also didn't fully know because this is not fully browser compatible but it really changes the game and makes images on the web a lot easier to deal with so let's dive into what this actually is what are browser client hints all right let's dive into what client hints actually are so as it turns out you can add a meta deck to the head of your browser for now only chromium based and that meta tag allows the browser to send information about the browser and the user and the width and the pixel density in a few other things to the server and in the server uses that data and return to the exact image that you need to the browser again which means you don't actually have to make this whole complicated image tag with a source set and the sizes probe and all the stuff together trying to figure out what is best for this image in this context what you literally have to do is you make one image stack then you add a sizes probe that says this is 33 width of the image of the browser for this image right now when it gets a bit bigger it goes to 100 so just the sizes prop and the fact that you have the matte attack in your header will actually send everything to the server and the server when it's capable return to the image exactly for that size based on the context of the user which is awesome and so now of course canalinary clumps into play because they are really smart so what you can do is use W Auto rather than the specific width of the W like 300 pixels or something that you want and if you send the client hints and you have W Auto and there's a sizes prop Cloud andery knows exactly what to send back and this is just magical and it has a few other things you can also check okay what is my pixel density for this screen maybe it's a retina screen or it's a triple one you know these new iPhones now and essentially you can then send you back an automated three times the size because of your retina screen and this is just amazing and why didn't I know this before I could have used that all the time but no I insisted on explaining all my colleagues what source sets were in picture tags in the super complicated things and in the end we could just have send browser hints to the server the server Returns the image that is just needed for that instance it's so much cooler anyways um to prevent um sending back any image at any size because that would cost you a lot of transformations in cloudinary you can also just say just take into account these breakpoints and only send an image back when the width of the browser is in that breakpoint and cloudinary has a set of default breakpoints but you can also customize these and say these are my breakpoints for my website and now you give you client hints and Within These breakpoints Cloud owner just always gives back that image and so yeah this is a short video but it's just so magical I just wanted to talk to you about it because I will be using this from now on and also if your browser doesn't you know have this feature yet like Safari or Firefox Cloud an area actually has fallbacks here right you can just say W Auto inside the breakpoints and then you can say you know what if if that doesn't work just give me the 500 pixel image back and then you're good to go um anyways that's it cheers