Examples
The following page introduces some example configurations of breakpoint packages that cover
- compression of all images
- resizing of article images, custom breakpoints
- resizing of extension images
Having a global breakpoint package with the selector img tells the plugin to compress all images on your page.
This simple step will most likely reduce your image transfer size by 20 to 50 percent.
Even if you're using highly compressed images already, you may still benefit from this plugin: Consider you're using a couple of images in your articles. You've placed high-quality but at the same time large images for a nice visual experience on large screens. Particularly mobile devices with small screens and low bandwidth would benefit from resized images that are just large enough to fill their viewport width.
Simply add a content breakpoint package with the selector article img and configure breakpoints for each device size that you'd like to treat separatedly.
For example, you could add a breakpoint for each Boootstrap 3 device class (extra-small, small, medium, large).
Each breakpoint will lead to a resized version of the image and devices can select the smallest version that fills their viewport. These version will be generated automatically for you, by default.
However, you're not limited to the Bootstrap classes, you can configure any breakpoint you like. For example, you could add another breakpoint at 480px to offer tiny images to smaller smartphones and similar devices.
Having CSS selectors gives you a great deal of flexibility. You aren't limited to process all or just article images but you could also process images of extensions.
Maybe you're using a slider (<div id="slider" />) which isn't using resized images.
To make this slider use resized images, add a breakpoint package with the selector #slider img and configure breakpoints for smaller devices, e.g. using the Bootstrap 3 device classes again.
