Responsive Images

SimplyEdit makes it easy for you to use responsive images. But you must tell it to, it is not automatic. This is so you can have full control, or choose to use another solution.

To enable responsive images support, add the following to the settings:

<script>
    var mySettings = {
        'simply-image' : {
            'responsive' : {
                'sizes' : [ 1024, 720, 640, 320, 160 ]
            }
        },
        'plugins' : [ 'plugin.simply-scaler.html' ]
    };
</script>

Then update the SimplyEdit script by telling it where to find your custom settings:

<script src="//cdn.simplyedit.io/1/simply-edit.js"
    data-api-key="demo"
    data-simply-settings="mySettings"></script>

Now any image inserted by SimplyEdit is automatically made responsive.

It is not magic though, so there are a few things to take into account. SimplyEdit can only make images responsive if they use the <img> tag. So there is no responsive background-image support.

In addition, SimplyEdit can only make an image responsive if it has a defined width or max-width. To allow 'natural' sized images be responsive, you could add the css rule max-width: 100%;.

Finally, only images uploaded using SimplyEdit, after you added the plugin.simply-scalar.html, will be responsive. This is because this plugin is responsible for generating the different sizes of the image. It does this in your browser when you upload an image. This also means that when you change the sizes array in the settings, the new sizes will only work with new images. So you may have to re-upload existing images again.

Making Design Images Responsive

SimplyEdit only makes images responsive that are uploaded using SimplyEdit. But you can reference those images in your design, for images that are not editable by the user. All you need to do is skip the normal src attribute and replace it with a data-simply-src attribute, so this:

<img src="logo.png" alt="Logo">

Becomes this:

<img data-simply-src="logo.png" alt="Logo">

Other things to consider

The SimplyEdit responsive images functionality is not magic. You still need to consider the quality and size of your images before uploading. If you upload a PNG of 6MB, it will still be quite big at 1024px wide, and above that, SimplyEdit will still use your 6MB file. SimplyEdit won't convert PNG images to JPG.

So if you have a design that calls for a large background image, make sure it is optimized before uploading. For background images it is often good enough to use a JPG with a quality setting as low as 35%. This means that you can get an image of 1920x1080 down to a file size around 100KB or less, instead of 6MB.