ResponsiveImg

Free!
Download
ResponsiveImg
Description

Never think about creating responsive images again.

This addon makes it super simple to output an img with multiple srcset sizes defined to ensure browsers only ever download the size it needs based on the viewport. Additionally, a base64-encoded SVG will be inlined to show a tiny, blurred image while the real image is loading -- this will ensure the image renders at the correct size on initial page load without an extra network request.

For more info on how this works under the hood, read Spatie's Responsive Image docs.

Getting started

To get started and for a list of available options, check out the docs.

Example

Below is a simple example of a banner image with a width of 2500px:

---
banner: /assets/img/hero-banner.jpg
---
<div>
  {{ responsive_img:banner attr="class:w-full" }}
</div>

Rendered HTML:

<div>
  <img class="w-full" srcset="/img/containers/main/img/banner.jpg/3a679c0fc2a494827cd78b9facbaf696.jpg 2500w, /img/containers/main/img/banner.jpg/86eb8f18c80bc4adb298f7d4aba23d98.jpg 2091w, /img/containers/main/img/banner.jpg/c43a27815f3003963dfe551aa80c088e.jpg 1749w, /img/containers/main/img/banner.jpg/ac56820bdeeb5e996abc606b40945d83.jpg 1464w, /img/containers/main/img/banner.jpg/f5c1a4ee11018fcafe1f07f41d2da07a.jpg 1224w, /img/containers/main/img/banner.jpg/cd8d32990fb26bde830403f19d0a0662.jpg 1024w, /img/containers/main/img/banner.jpg/6561461f81d6540cd5a635bf5d44dde6.jpg 857w, /img/containers/main/img/banner.jpg/019b9c8a02a7dc1291f9e60b29a2fc15.jpg 717w, /img/containers/main/img/banner.jpg/3613eed0a83dcb41766e8afdc425a59b.jpg 600w, /img/containers/main/img/banner.jpg/5495e24e576ba9b9cc2b49a4b4a25957.jpg 502w, /img/containers/main/img/banner.jpg/ffb73621c90e0fe4e7c7d4901dc151cb.jpg 420w, /img/containers/main/img/banner.jpg/6960fb223088098ca0c9b02fc114a087.jpg 351w, /img/containers/main/img/banner.jpg/baaebfbfd6755aa87317a224f9be302a.jpg 294w, /img/containers/main/img/banner.jpg/36bb43d811cccde3d1d5cd63909c48b1.jpg 246w, /img/containers/main/img/banner.jpg/5d6d9b6e1caa09376b1a5b6198a57df4.jpg 205w, data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMjUwMCAxNjIwIj4KICA8aW1hZ2Ugd2lkdGg9IjI1MDAiIGhlaWdodD0iMTYyMCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPVEFwTENCeGRXRnNhWFI1SUQwZ056VUsvOXNBUXdBSUJnWUhCZ1VJQndjSENRa0lDZ3dVRFF3TEN3d1pFaE1QRkIwYUh4NGRHaHdjSUNRdUp5QWlMQ01jSENnM0tTd3dNVFEwTkI4bk9UMDRNand1TXpReS85c0FRd0VKQ1FrTUN3d1lEUTBZTWlFY0lUSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5LzhBQUVRZ0FGQUFnQXdFaUFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEFvd2FPOG82VmNqMEFoaG5wVGRKMTJOeUZiQXJjT3B3SGdNSytFeEN4Vk9mSTRuMUV1SVhVMWl4YkN4VzJYQXJUMmdyaXNoYjc1dU9sWElyc01Pb3J6YXRPbzNkbkhQR0tzN3Rua2R0SzZuaHNWbzI5ek1aQjg1b29yOW14TkdtNVhjVnNmQ2N6WFU2T3lsZGdNbW0zbHpMRko4akVVVVY4Zk9sRDJ6VmtkMUtVcmJuLzJRPT0iPjwvaW1hZ2U+Cjwvc3ZnPgo= 32w" onload="this.onload=null;this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';" sizes="1px">
</div>

Credits

A big thank you to Spatie for the idea and the recursive size calculation in their Laravel Medialibrary package.


Important Links
Details
Released September 2, 2018
Updated 2 months ago
Version v1.1.4
Downloads 475
Requires Statamic 2.10

Aryeh Raber

More by Aryeh Raber

Similar Addons

See All
An all-in-one site reporting, metadata mastering, OG managing, Twitter card making, sitemap generating addon. $49

SEO Pro

by Statamic in Enhancement, Social Media, Utility, Tag, Tool
An all-in-one site reporting, metadata mastering, OG managing, Twitter card making, sitemap generating addon.
This addon allows you to embed CodePen into your Statamic site. $1

CodePen Embeds

by Miguel Piedrafita in Tag
This addon allows you to embed CodePen into your Statamic site.
Request acceptance or confirmation before letting people access your site.

Entrance Gate

by IPX in Utility, Enhancement, Tag
Request acceptance or confirmation before letting people access your site.
This addon allows you to embed videos from different providers into your Statamic site. $1

Video Embeds

by Miguel Piedrafita in Tag
This addon allows you to embed videos from different providers into your Statamic site.