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 bandwidth, the download might take a long time.
The media library 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 media-library config file to false.
In the srcset attribute of img various image files can be specified. The media library can automatically generate those images for you.
When adding an images to the media library simply use the withResponsiveImages function.
// or if you want to add it based on a condition then use
->withResponsiveImagesIf($condition) // accepts "closure or boolean"
Behind the scenes, the media library will generate multiple size variations of your image. To learn which variations are generated and how to customize head over here.