RIMAGES (rimg) is a Joomla! plugin to make the images on your website responsive.
rimg can compress your images and display resized images on mobile devices. Both compressed and resized images are generated automatically. CSS selectors can be used to limit this process to specific images.
Using rimg helps to significantly decrease the page loading time and increase the Google PageSpeed rating, which contributes to the Google search ranking of your website. Thus rimg is a great addition to your Search Engine Optimization (SEO) toolbox.
Features:
- display smaller or different images on smaller devices
- automatically compress and/or resize images according to the Google recommendation for image optimization
- limit image processing via CSS selectors
- increase Google PageSpeed and improve Google search ranking in return
- support for external images (from URL)
- languages: English, German
The usage of the plugin heavily depends on the configuration of breakpoint packages and breakpoints, see examples below.
You configure breakpoint packages with a CSS selector to tell the plugin which images to compress and/or resize. Breakpoints in the package specify which image dimension is desired for which device size.
Our collection of example configurations covers use cases such as:
- compress all images (without resizing) - see below
- show alternative images on small devices - see below
- offer resized article images to each Bootstrap 3 device class
- use custom breakpoints (e.g. for a specific smartphone size)
- resize images of a particular extension (e.g. a slider)
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.
By default, the original image is downscaled for smaller devices. Though this is a great default, it may not be ideal for certain images. Your image may put a focus on a particular object or subject, in which case you might want to crop the image to the area of interest, or you might want to use completely different images on smaller (i.e. mobile) devices.
Thus, you can provide alternative (e.g. cropped) originals for breakpoints (following the plugin's naming convention) which are then - instead of the original image - compressed and downscaled to be shown on devices with the respective dimensions.
Download the latest extension package and use the Joomla! extension manager to install it. The plugin is compatible with Joomla! 3.x and can be updated via the extension manager.
Use the Joomla! extension manager to uninstall the plugin and remove the configured image folder if you no longer need the responsive images.
rimg is compatible with modern browsers and with caching. Incompatible browsers will neither benefit nor suffer from issues. Please consider pitfalls for CSS directives and JavaScript at the wiki page on compatibility.
ImageMagick is required on your server to generate compressed and/or resized images automatically.