Responsive images demo

<!-- Note to future docs author: images are usually located 2 levels up (../../images/). This is an exception due to the raw HTML image tag being used. --> <article class="article"> <p> The example above demonstrates the <a href="https://spatie.be/docs/laravel-medialibrary/v11/responsive-images/getting-started-with-responsive-images">responsive images technique</a> used in the Laravel MediaLibrary. </p> <h3>Try this:</h3> <ul> <li>Throttle your network in Chrome and disable the cache to see this in full effect</li> <li>Start with a small browser and reload this page</li> <li>Make your browser larger to start loading bigger versions</li> </ul> <h3>What happens?</h3> <ul> <li> We start with an image that has <code>srcset</code> values, rendered by the <a href="https://spatie.be/docs/laravel-medialibrary/v11">Laravel MediaLibrary</a> </li> <li> An initial <code>sizes="1px"</code> attribute is used to render an inline base64-encoded SVG placeholder first </li> <li> Once the page is loaded, JavaScript sets the <code>sizes</code> to the actual width of the image in the layout </li> <li> Since we use a <code>vw</code> value for this width, a bigger image will be loaded when you upscale the browser </li> </ul> </article>