When using the Cloudinary WordPress plugin, you can apply responsive breakpoints to images.
You can set 4 values:
- How many breakpoints you want to create for your images.
- The byte step between each size.
- The min-width and max-width.
This allows you to generate a number of images and serve up an optimal image size depending on the size of the browser or device. These settings use Cloudinary's responsive breakpoint generator to balance the number of image versions generated vs. the file size reduction between each version.
Here is a short video demonstrating how to apply those responsive breakpoints to all the images on my website: