The purpose of this tutorial is to teach you how to use the Adaptive Image module, with the aim of making your images ..... adaptive; i.e. their size will vary according to the size of your window.
To best see the effects of the module, I recommend using very large images, like 3000*3000.
Site for creating test images: http://dummyimage.com
This module is extremely simple to use, so simple that I didn't see any change when I first used it, and so simple that I found very few tutorials and videos on this module (for the part on CKEditor, I found a youtube video talking about it). The few tutorials I did find all said the same thing as what's written on the module page which didn't help me much.
Rendering is better if your theme is adaptive.
Using with image styles
In Admistration menu: Configuration > Media > Image styles edit the image style you're interested in.
Add AFTER all the effects you want, the "Adaptive" effect and you're done. (This is where the tutorials I've come across end)
You can leave the effect settings as they are.
Using with CKEditor
In a field using CKEditor, when you add an image, you have access to its properties.
In the "Advanced" tab, in the "Stylesheet Classes" field, put "adaptive-image".
Your image is now adaptive even if it is not managed by an image field and image styles.
Explanations
Now, a little explanation of what's going on and the numbers 1382, 992, 768, 480 in the "Adaptive" effect. Explanations from tests, they may be wrong.
To make images adaptive, Adaptive Image uses the CSS property (and value) "max-width: 100%;". It adds the adaptive-image class to the img tag and adds the following css img.adaptive-image{max-width: 100%}.
So we can make images adaptive with just CSS, no need for this module. Even though this module allows those who know nothing about CSS to render adaptive images and especially the use of breakpoints, and this is where we come to the values 1382, 992, 768, 480
If we take a 3000*3000 image put into a variable size container, let's say the container is the width of the browser window.
- With no effect applied: the image will pop out of the frame
- With an adaptive effect with no breakpoint (no value where there is 1382, 992, 768, 480): the image will make the width size of the container. If you change the size of the container the size of the image will change dynamically with it.
- With an adaptive effect and with a breakpoint of 800: if the window is smaller than 800px and you enlarge it the image will adapt to a maximum width of 800px.
- With several breakpoints, for example 1382, 992, 768, 480, let W (for width) be the width of your terminal :
- if W > 1382 : the image will adapt with a maximum width of 1382px
- if 1382 > W > 992: the image will adapt with a maximum width of 992px
- if .....
- if W unknown: the "Mobile first" option tells Adaptive Image that the maximum width will be that of the smallest breakpoint.