Responsive images with Cloudinary


Here is what I implemented here. It will be an almost cut and paste from the Cloudinary blog.

Possible Full-Width Image Dimensions by Screen Sizes

Large/X-Large commercial screens: 2000+ pixels Websites: 760 - 1200 pixels Mobile Phones: < 760 pixels Let’s assume you have a mobile-first strategy for building responsive apps. You may decide to use 760px images throughout, without considering larger screens. If these images are meant to take the full width of the devices on which they are rendered, then your content will look distorted and unprofessional on websites or commercial screens.

Your next attempt would be to use the largest possible image (2000px) and scale it down based on the screen sizes on which it is displayed.

So basically Cloudinary gets the size that fits the image on the user’s computer and modifies the image and sends it to the user, all in just milliseconds.

This mothod should adapt to the new image format on the block AVIF.