You are viewing the documentation for an older version of this package. You can check the version you are using with the following command:

composer show spatie/laravel-medialibrary

Responsive images demo

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
Generating your own tiny placeholder
Downloading a single file
Help us improve this page