Websites are viewed on various devices with widely differing screen sizes and connection speeds. When serving images it's best not to use the same image for all devices. A large image might be fine on a desktop computer with a fast internet connection, but on a small mobile device with limited bandwith, the download might take a long time.
The medialibrary has support for generating the necessary files and html markup for responsive images. In addition the medialibrary also has support for progressive image loading.
When using srcset and sizes, the browser will automatically figure out which image is best to use.
Say your browser is 1200 pixels wide, the sizes attribute demands for an image half the size (50vw = 600px). You'll end up with the small.jpg version. But presume you have a retina screen with pixel density 2, the browser knows we'd need the medium.jpg to render the image crisply.
The sizes attribute requires a lot of work though: you'd need to co-ordinate between your responsive CSS and the output HTML to set the right sizes for every image and every layout scenario.
If you leave out the sizes attribute, the browser will presume that the image will be rendered full width, which is also not optimal in many cases — eg. thumbnails.
We set this width in a vw value: if you make your browser wider, an even better version will be loaded.
At the same time we can use this technique to use this smallest picture as the placeholder.
When visiting a Medium blog you might have noticed (on a slower connection) that before a full image is displayed a blurred version of the image is shown. The blurred image is replace by a high res one as soon as that big version has been downloaded. The blurred image is actually a very tiny image that's being sized up.
The advantage of displaying a blurred version is that a visitor has a hint of what is going to be displayed very early on and that your page layout is ready right away.
This placeholder is base64-encoded as SVG inside the srcset attribute, so it is available in the initial response right away without extra network request.
The SVG has the exact same ratio as the original image, so the layout should not flicker during the swap.
If you want to leverage responsive images but don't want the progressive image loading, you can set the responsive_images.use_tiny_placeholders key in the medialibrary config file to false.