This is the documentation for v8 but the latest version is v10 . You can switch versions in the menu on the left/at the top. Check your current version with the following command:


                                composer show spatie/laravel-medialibrary

Responsive images demo

Name: Spatie
Address: Kruikstraat 22 bus 12, Antwerp, Antwerp, 2060, Belgium
Telephone: +32 3 292 56 79

The example above demonstrates the responsive images technique used in the Laravel MediaLibrary.

Try this:

Throttle your network in Chrome and disable the cache to see this in full effect
Start with a small browser and reload this page
Make your browser larger to start loading bigger versions

What happens?

We start with an image that has srcset values, rendered by the Laravel MediaLibrary
An initial sizes="1px" attribute is used to render an inline base64-encoded SVG placeholder first
Once the page is loaded, JavaScript sets the sizes to the actual width of the image in the layout
Since we use a vw value for this width, a bigger image will be loaded when you upscale the browser