Product support

Get help in the plugin support forum.


  • This plugin provides a middleware that adds srcset and sizes attributes to all locally served images in your html response.
  • It also adds a simple svg helper function to inline SVG files.

The auto-resize middleware turns this

<img width="500" src="/storage/app/media/image.jpg">

into this

<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.

Test results

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

Bug reports

It is very likely that there will be bugs with some specific html markup. If you encounter such a bug, please report it.

Future plans

  • Exclude/Include-Filters
  • Maybe a component to enable the middleware only on some pages

Inlining SVG images

This plugin registers a simple svg helper function that enables you to inline SVG images from your project.

<!-- search in theme directory -->
<div class="inline-svg-wrapper">
    {{ svg('assets/icon.svg') }}

<!-- start with a / to search relative to the project's root -->
<div class="inline-svg-wrapper">
    {{ svg('/plugins/vendor/plugin/assets/icon.svg') }}

Using variables

Aside from inlining the SVG itself the helper function will also pass any variables along to the SVG and parse it using October's Twig parser. This means you can easily create dynamic SVGs.

<!-- icon.svg -->
<svg fill="{{ fill }}" width="{{ width | default(800) }}"> ...
<!-- You can pass variables along as a second parameter -->
<img src="{{ svg('/plugins/xy/assets/icon.svg', {fill: '#f00', width: '200'}) }}">

Resize middleware


Three image sizes are created by default: 400, 768 and 1024 pixels.

You can change these values by changing the settings in the backend.

Alternative src and srcset attributes

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 data-original attribute.

If your plugin requires an alternative srcset attribute (like verlok/LazyLoad) this can also be specified via the backend settings.

Pre-generate images

You can use the php artisan responsive-images:generate command to pre-generate responsive images. The command uses October's pages.menuitem.* events to build a list of all available URLs and pre-generates all images used on these pages.

Global class attributes

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>


Another minor bugfix release

Oct 16, 2019


Fixed Settings form layout

Oct 16, 2019


Fixed bug where images were not resized under certain conditions

Oct 16, 2019


Added focuspoint feature

Oct 05, 2019


Reverted previous change until October's PNG resize bug is fixed (https://github.com/octobercms/library/pull/396)

May 06, 2019


Store copy of original image in the temp folder as well (makes image optimizations possible without the need to modify the original image, thanks to @mauserrifle)

Apr 29, 2019


Re-implemented compatibility fix (thanks to @mauserrifle)

Apr 25, 2019


Reverted previous change since it introduced performance issues

Apr 25, 2019


Fixed php-gd compatibility problem (thanks to @mauserrifle)

Apr 25, 2019


Allow `| media` and `| theme` filters in the `svg` helper function

Mar 07, 2019


Optimized image matching to also include images with custom attributes before the src attribute

Feb 25, 2019


Added missing relations for Theme and SVGInliner classes

Feb 22, 2019


Added `svg` helper function to inline SVGs (see README for usage)

Feb 20, 2019


Fixed handling of relative protocol urls

Jan 14, 2019


Fixed problem when using custom src attributes

Jan 06, 2019


Ignore image tags that don't have a src attribute

Dec 07, 2018


Implemented new image replacement technique (fixes lots of compatibility problems with other plugins)

Nov 29, 2018


Added `responsive-images:generate` artisan command to pre-generate all image sizes (thanks to kiselli)

Nov 27, 2018


Fixed resizing of image paths that contain spaces (thanks to adamo)

Oct 30, 2018


Optimized support for installations that serve multiple domains

Sep 03, 2018


Optimized support for multi-byte character strings (thanks to sergei3456)

Jul 25, 2018


Use correct app url to determine if an image is external or local

Jul 05, 2018


Reverted multi-byte optimization since the change removes the DOCTYPE while parsing the html

Jun 10, 2018


Optimized support for multi-byte character strings (thanks to sergei3456)

Jun 08, 2018


Added french translation (thanks to damsfx)

Jun 08, 2018


Fixed processing of relative pahts when October runs in a subdirectory

Jun 08, 2018


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