Responsive images demo | laravel-medialibrary | Spatie SPATIE Laravel Media Library ======================== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-medialibrary](https://spatie.be/docs/laravel-medialibrary/v7) Responsive-images Responsive images demo Version v11 v10 v9 v8 v7 v6 v5 v4 v3 Other versions for crawler [v11](https://spatie.be/docs/laravel-medialibrary/v11) [v10](https://spatie.be/docs/laravel-medialibrary/v10) [v9](https://spatie.be/docs/laravel-medialibrary/v9) [v8](https://spatie.be/docs/laravel-medialibrary/v8) [v7](https://spatie.be/docs/laravel-medialibrary/v7) [v6](https://spatie.be/docs/laravel-medialibrary/v6) [v5](https://spatie.be/docs/laravel-medialibrary/v5) [v4](https://spatie.be/docs/laravel-medialibrary/v4) [v3](https://spatie.be/docs/laravel-medialibrary/v3) - [ Introduction ](https://spatie.be/docs/laravel-medialibrary/v7/introduction) - [ Support us ](https://spatie.be/docs/laravel-medialibrary/v7/support-us) - [ Requirements ](https://spatie.be/docs/laravel-medialibrary/v7/requirements) - [ Installation & setup ](https://spatie.be/docs/laravel-medialibrary/v7/installation-setup) - [ Questions and issues ](https://spatie.be/docs/laravel-medialibrary/v7/questions-issues) - [ Changelog ](https://spatie.be/docs/laravel-medialibrary/v7/changelog) - [ About us ](https://spatie.be/docs/laravel-medialibrary/v7/about-us) Basic usage ----------- - [ Preparing your model ](https://spatie.be/docs/laravel-medialibrary/v7/basic-usage/preparing-your-model) - [ Associating files ](https://spatie.be/docs/laravel-medialibrary/v7/basic-usage/associating-files) - [ Retrieving media ](https://spatie.be/docs/laravel-medialibrary/v7/basic-usage/retrieving-media) Working with media collections ------------------------------ - [ Simple media collections ](https://spatie.be/docs/laravel-medialibrary/v7/working-with-media-collections/simple-media-collections) - [ Defining media collections ](https://spatie.be/docs/laravel-medialibrary/v7/working-with-media-collections/defining-media-collections) Converting images ----------------- - [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v7/converting-images/defining-conversions) - [ Retrieving converted images ](https://spatie.be/docs/laravel-medialibrary/v7/converting-images/retrieving-converted-images) - [ Optimizing converted images ](https://spatie.be/docs/laravel-medialibrary/v7/converting-images/optimizing-converted-images) - [ Regenerating images ](https://spatie.be/docs/laravel-medialibrary/v7/converting-images/regenerating-images) Responsive images ----------------- - [ Getting started with responsive images ](https://spatie.be/docs/laravel-medialibrary/v7/responsive-images/getting-started-with-responsive-images) - [ Using your own width calculator ](https://spatie.be/docs/laravel-medialibrary/v7/responsive-images/using-your-own-width-calculator) - [ Customizing the rendered html ](https://spatie.be/docs/laravel-medialibrary/v7/responsive-images/customizing-the-rendered-html) - [ Generating your own tiny placeholder ](https://spatie.be/docs/laravel-medialibrary/v7/responsive-images/generating-your-own-tiny-placeholder) - [ Responsive images demo ](https://spatie.be/docs/laravel-medialibrary/v7/responsive-images/demo) Downloading media ----------------- - [ Downloading a single file ](https://spatie.be/docs/laravel-medialibrary/v7/downloading-media/downloading-a-single-file) - [ Downloading multiple files ](https://spatie.be/docs/laravel-medialibrary/v7/downloading-media/downloading-multiple-files) Converting other file types --------------------------- - [ Using image generators ](https://spatie.be/docs/laravel-medialibrary/v7/converting-other-file-types/using-image-generators) - [ Creating a custom image generator ](https://spatie.be/docs/laravel-medialibrary/v7/converting-other-file-types/creating-a-custom-image-generator) Advanced usage -------------- - [ Working with multiple filesystems ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/working-with-multiple-filesystems) - [ Using custom properties ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/using-custom-properties) - [ Storing media specific manipulations ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/storing-media-specific-manipulations) - [ Using your own model ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/using-your-own-model) - [ Using a custom directory structure ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/using-a-custom-directory-structure) - [ Ordering media ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/ordering-media) - [ Moving media ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/moving-media) - [ Consuming events ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/consuming-events) - [ Generating custom urls ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/generating-custom-urls) - [ Overriding default filesystem behavior ](https://spatie.be/docs/laravel-medialibrary/v7/advanced-usage/overriding-the-default-filesystem-behaviour) API --- - [ Adding files ](https://spatie.be/docs/laravel-medialibrary/v7/api/adding-files) - [ Defining conversions ](https://spatie.be/docs/laravel-medialibrary/v7/api/defining-conversions) 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 ====================== {{< rawhtml >}} <img style="margin-bottom: 2rem" srcset="../../images/demo/responsive-images/2400.jpg 2400w, ../../images/demo/responsive-images/1200.jpg 1200w, ../../images/demo/responsive-images/600.jpg 600w, ../../images/demo/responsive-images/300.jpg 300w, ../../images/demo/responsive-images/150.jpg 150w, data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDI0MDAgMTU4OSI+ICAgIDxpbWFnZSB3aWR0aD0iMjQwMCIgaGVpZ2h0PSIxNTg5IiB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80UUFZUlhocFpnQUFTVWtxQUFnQUFBQUFBQUFBQUFBQUFQL3NBQkZFZFdOcmVRQUJBQVFBQUFBeUFBRC80UU9CYUhSMGNEb3ZMMjV6TG1Ga2IySmxMbU52YlM5NFlYQXZNUzR3THdBOFAzaHdZV05yWlhRZ1ltVm5hVzQ5SXUrN3Z5SWdhV1E5SWxjMVRUQk5jRU5sYUdsSWVuSmxVM3BPVkdONmEyTTVaQ0kvUGlBOGVEcDRiWEJ0WlhSaElIaHRiRzV6T25nOUltRmtiMkpsT201ek9tMWxkR0V2SWlCNE9uaHRjSFJyUFNKQlpHOWlaU0JZVFZBZ1EyOXlaU0ExTGpZdFl6QTJOeUEzT1M0eE5UYzNORGNzSURJd01UVXZNRE12TXpBdE1qTTZOREE2TkRJZ0lDQWdJQ0FnSUNJK0lEeHlaR1k2VWtSR0lIaHRiRzV6T25Ka1pqMGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNVGs1T1M4d01pOHlNaTF5WkdZdGMzbHVkR0Y0TFc1ekl5SStJRHh5WkdZNlJHVnpZM0pwY0hScGIyNGdjbVJtT21GaWIzVjBQU0lpSUhodGJHNXpPbmh0Y0UxTlBTSm9kSFJ3T2k4dmJuTXVZV1J2WW1VdVkyOXRMM2hoY0M4eExqQXZiVzB2SWlCNGJXeHVjenB6ZEZKbFpqMGlhSFIwY0RvdkwyNXpMbUZrYjJKbExtTnZiUzk0WVhBdk1TNHdMM05VZVhCbEwxSmxjMjkxY21ObFVtVm1JeUlnZUcxc2JuTTZlRzF3UFNKb2RIUndPaTh2Ym5NdVlXUnZZbVV1WTI5dEwzaGhjQzh4TGpBdklpQjRiWEJOVFRwUGNtbG5hVzVoYkVSdlkzVnRaVzUwU1VROUlqTkdNekJCT1RNeU9VSXhRekJHUlVNMk1EaEdOek5FTURVeU5ERTFOVEF4SWlCNGJYQk5UVHBFYjJOMWJXVnVkRWxFUFNKNGJYQXVaR2xrT2pZMVFqSTFORVUwUkRKRVJURXhSVGM1TVRrM1JURXpPVEkyUlVGR09EaENJaUI0YlhCTlRUcEpibk4wWVc1alpVbEVQU0o0YlhBdWFXbGtPalkxUWpJMU5FVXpSREpFUlRFeFJUYzVNVGszUlRFek9USTJSVUZHT0RoQ0lpQjRiWEE2UTNKbFlYUnZjbFJ2YjJ3OUlrRmtiMkpsSUZCb2IzUnZjMmh2Y0NCRFF5QXlNREUxSUUxaFkybHVkRzl6YUNJK0lEeDRiWEJOVFRwRVpYSnBkbVZrUm5KdmJTQnpkRkpsWmpwcGJuTjBZVzVqWlVsRVBTSjRiWEF1YVdsa09qQmhNR1E0WVRCakxXWmlPVFF0TkdVd1ppMWlOMk01TFRjNVpqSmxaRFJoT1RFeE55SWdjM1JTWldZNlpHOWpkVzFsYm5SSlJEMGlZV1J2WW1VNlpHOWphV1E2Y0dodmRHOXphRzl3T21ZNVltSmtNVGRtTFRGaU5EY3RNVEUzWWkxaE5EVTVMVGc1Wm1NME9EZ3hORFEyWkNJdlBpQThMM0prWmpwRVpYTmpjbWx3ZEdsdmJqNGdQQzl5WkdZNlVrUkdQaUE4TDNnNmVHMXdiV1YwWVQ0Z1BEOTRjR0ZqYTJWMElHVnVaRDBpY2lJL1B2L3VBQTVCWkc5aVpRQmt3QUFBQUFILzJ3Q0VBQWdHQmdZR0JnZ0dCZ2dNQ0FjSURBNEtDQWdLRGhBTkRRNE5EUkFSREE0TkRRNE1FUThTRXhRVEVnOFlHQm9hR0JnaklpSWlJeWNuSnljbkp5Y25KeWNCQ1FnSUNRb0pDd2tKQ3c0TERRc09FUTRPRGc0UkV3ME5EZzBORXhnUkR3OFBEeEVZRmhjVUZCUVhGaG9hR0JnYUdpRWhJQ0VoSnljbkp5Y25KeWNuSi8vQUFCRUlBQlVBSUFNQklnQUNFUUVERVFIL3hBQm5BQUFCQkFNQUFBQUFBQUFBQUFBQUFBQUFBUVFHQndJREJRRUFBd0VBQUFBQUFBQUFBQUFBQUFBQUFBRUNBeEFBQVFNQ0J3RUFBQUFBQUFBQUFBQUFBQUVDQXdRRkVTRXhRUkl5QmhNUkFRRUFBZ01BQUFBQUFBQUFBQUFBQUFBQlFRSlJnWkgvMmdBTUF3RUFBaEVERVFBL0FJalEzVGc1TXlYV3owRFdZWXVLd2plNU5COURWeU0wVXcyMG1FeGROUDZlTkdkaHJXZW9aczRxMWx5bVJPeW1FbHdsZHE1U1pyZVRybFIvTTNweDJBQXZhdkM1aVpnQTRILy8yUT09Ij4gICAgPC9pbWFnZT48L3N2Zz4= 32w" sizes="1px" width="2400" src="../../images/demo/responsive-images/2400.jpg" oonload="this.onload=null;this.sizes='(min-width: '+window.innerWidth+'px) '+Math.ceil(this.getBoundingClientRect().width/window.innerWidth\*100)+'vw, 100vw';" ``` onload="this.onload=null;this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';" ``` > The example above demonstrates the [responsive images technique](https://docs.spatie.be/laravel-medialibrary/v7/responsive-images/getting-started-with-responsive-images) 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](https://docs.spatie.be/laravel-medialibrary/v7) - An initial `sizes="1px"` atribute 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 {{}}