This plugin provides a middleware that adds
sizes attributes to all locally served images in your html response.
It turns this
<img width="500" src="/storage/app/media/image.jpg">
<img width="500" src="/storage/app/media/image.jpg" srcset="/storage/temp/public/be7/4d6/0cc/image__400.jpg 400w, /storage/temp/public/be7/4d6/0cc/image__768.jpg 768w, /storage/temp/public/be7/4d6/0cc/image__1024.jpg 1024w" sizes="(max-width: 500px) 100vw, 500px">
It automatically creates resized copies of the image and serves the most fitting one to your visitor. All image copies are saved in your public temp path. Remote file systems are currently untested.
The images are generated on the first page load. Depending on the source image size this may take a few seconds. Subsequent page loads will be faster since the images are only resized once.
See the Documentation tab for the configuration and usage details.
I have tested this plugin on a page with 20 hd wallpapers from pixabay.
|Viewport width||Transferred file size|
|1920 px||21.8 MB|
|1024 px||3.1 MB|
|768 px||2.0 MB|
|400 px||0.8 MB|
It is very likely that there will be bugs with some specific html markup. If you encounter such a bug, please report it.
- Maybe a component to enable the middleware only on some pages
Three image sizes are created by default: 400, 768 and 1024 pixels.
You can change these values by changing the settings in the backend.
If you want to use an alternative
src attribute you can change this via the backend settings page.
This is useful if you are using a plugin like jQuery.lazyLoad where the image
is initially linked via a
If your plugin requires an alternative srcset attribute (like verlok/LazyLoad) this can also be specified via the backend settings.
If you want to add a class to every processed image you can configure this via the backend settings.
This is useful if you want to add Bootstrap's
img-responsive class to all images on your website.
Found the plugin useful on 23 Jul, 2016
Speed up my sites!
Found the plugin useful on 23 Mar, 2016
It breaks the <script type="text/template"> on Responsiv.Uploader (which is the file upload/image upload plugin). See below, if originally there was open and close <div></div>, close tags are not displayed.
<script type="text/template" id="uploaderTemplateimageUploader"> <div> </script>
Added compatibility with current edgeUpdate builds
Oct 28, 2016
Added settings page, support for lazy-loading plugins and responsive class attributes
Oct 28, 2016
Fixed handling of filenames containing spaces (Thanks to webeks!)
Oct 18, 2016
Added alternative-src config option to support jQuery.lazyLoad plugin
Feb 02, 2016
Fixed encoding problems
Jan 14, 2016
First version of ResponsiveImages
Dec 12, 2015