Responsive Images in WordPress with Cloudinary

If you’re reading this, you’re probably already familiar with responsive images. Even so, it may be helpful to have a little background. (Then we’ll get to the WordPress part, and how to make them even better with Cloudinary.) For most of the Web’s existence, any time you wanted to include an image on a web page, you would create markup that looked like this: <img src="/path/to/my/image.jpg" alt="a very nice image">
In this example, the <img> element references a single image file named `image.jpg` located on a server at `/path/to/my`. This markup is straightforward in that it tells the browser to download and render a specific image file, referenced by the src element, onto the web page.
This arrangement was fine until 2010, when Ethan Marcotte published his seminal article, Responsive Web Design, which popularized the technique of using Cascading Style Sheet media queries to modify the layout of web pages to fit whatever size device a person is using. Responsive web design also increased interest in optimizing the performance of websites based on screen size. This focus made clear just how big a pain point images are for performance, accounting for
Source: https://managewp.org/articles/14476/responsive-images-in-wordpress-with-cloudinary

source https://williechiu40.wordpress.com/2017/02/28/responsive-images-in-wordpress-with-cloudinary/