Contents
You will be amazed to see how much you can reduce your image sizes after having read this article! When your website uses many images, it is very important that they are optimized and as light as possible. Images often form the largest proportion of your resources. The biggest problem is often inexperienced users that upload images that are far too big and then simply make them fit in their editor window. This only reduces the dimensions with which the images are being viewed, but actually loads a really big image. You need to prevent that users actually upload those large images to begin with. Also, you should consider how your images are loaded for mobile devices! But simply reducing the pixel-dimensions in itself is not enough, there is much more you sould do.
Correct file format for images
Make sure to choose the correct file format. Usually, you will choose between the following 3 formats:
- GIF: Small in size, low quality, only use for small images, icons, or images with uniform, basic colors.
- JPG/JPEG: Larger in size, no transparency, but the only way to go to show photographs. Within this format, you also have the option to use either Progressive JPG or Baseline (can be set in Save for Web in Photoshop). Progressive JPG immediately shows a blurry preview while loading, getting sharper as the whole image loads, while baseline images are the ones that start showing from the top, first showing the top edge, and slowly displaying the whole image. Progressive is the advised option by Webpagetest.org and Google PageSpeed. However, some say it also takes more processing power, which could be bad for loading the image on mobile, so this is not an absolute answer. Personally, I try to follow everything Google tells me to do, choosing progressive.
- PNG: Choose this for smaller images, logo's etc, or anything that needs transparency.
An even larger contribution is the image quality when saving for web. Going down from 100% to 60% can dramatically reduce file size, while especially for smaller images, visually they still look perfect. ut this is only the first step!
Use correctly sized images
You should make sure that you always use images with the exact dimensions needed for displaying them. It is possible to 'resize' images with the editor, but this only changes the display properties, it does not actually resize the image, you just display it smaller. This does not reduce image size. Some plugins and editors do allow for actual resizing, you should make use of those, or simply resize them in Photoshop before uploading.
A very usefull option is to use the JCE editor, combined with the Image Manager Extended. It allows you to set a default resize option in the profile configuration. With this option enabled, the images are resized in the browser already.
Of course there are more solutions for this, like using K2, which ships with a default mechahism that only uses the resized versions of uploaded images, but there are many more of these solutions. A very simple option would be to use a plugin like
Use JCE with "remove imageEXIF data"
The JCE editor contains a really nice feature since version 2.5.10 which can save you a lot of kB's. It is hidden away deep in the paramaters, but it can reduce your images a lot. It actually removes the EXIF data from images while uploading. Look at the difference in size between 2 images uploaded before and after I switched on the feature:
You see I almost lost 30% in size, and quality is not affected. The option is available in all JCE versions. To activate it, go to Editor Profiles >> Editor Parameters >> Filesystem and switch on the Remove Image EXIF data parameter:
Lossless compression of images online
Even though this sounds funny or technical, this is a HUGE saver of size, and it's actually pretty easy to use! Even correctly sized images can carry unnecessary bytes and metadata that can be removed for ultimate optimization (like the EXIF data we just talked about). This can concern anything, like the date the picture is taken, camera model, etc., which is unnecessary for showcasing on a website. Removing this does not affect the image quality, which is why it is called lossless compression. Most of this can not be removed using Photoshop's Save for Web and Devices.
There are a number of tools that can do this for you. They let you upload your images (one by one or in bulk) and then you can usually download the optimized versions. Especially PNG images are often reduced by more than 70%!!! Other formats have less spectacular results, but often still around 10-40%. Smush.it by Yahoo used to be the most famous one of these, but it has been taken offline early 2015. Luckily there are quite a few services that offer similar or improved functionality.
The best option is probably ImageRecycle (I use it here on Joomlaseo.com). First of all, it has a free to use web-optimizer that you can use online. It can reduce most image formats and even PDF's. You can upload files either one by one or in bulk:
What is unique about ImageRecycle is that they also have a Joomla plugin that you can easily install so that your images are optimized (and optionally resized) while they are being uploaded, without any additional actions from your side. Check out the full review for this service elsewhere on this site.
Other services are plenty though none of these offers a Joomla plugin currently:
- TinyPNG is a great tool, unfortunately only for PNG files (now also for jpg images at a separate domain: Tinyjpg.com).
- A newcomer that seems very promising is Kraken.io. Kraken can process both jpg and png images in the same batch, making it very easy for bulk processing. Kraken also has a PRO version allowing you some more options (plus a Wordpress plugin), but the basic web interface is free to use, and already very good.
- Media4x.com. Can process both PNG and JPG images, but only one at a time.
- Compressor.io. Can also process both PNG and JPG images.
- Desktop: There are also some freeware tools that you can install locally, especially handy when you often have to reduce images often and in bulk: Radical Image Optimization Tool, The JPEG Reducer, Batch Purifier Lite (only JPEG)
- Also, if you run your website through the speed check on GTMetrix.com, if you click on the "Optimize images" line, you can download optimized versions of these images.
Base64 encoded images
An advanced technique for dealing with (small) images is base64 encoding. Actually, you are no longer dealing with a "real" image, but with a long string of code which represents an image. As an example, look at the following code:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAI0lEQVR42mNgGHBwPF7nPwgTUsdEd5uZ6O7noezHgYtHmgEA5lgXNZwaK2gAAAAASUVORK5CYII=" alt="" />
This string of code actually builds this small image: 
For really small images, the advantage is that it just needs some code in your HTML, which saves you an HTTP-request. You can either use them directly in HTML or in your CSS for displaying background images. Be careful though. If the images become a little bit larger, the code becomes much larger. You often need pages of code to create a small image, so you need to be really careful with it. The biggest issue will then be that browsers need more time to process the code, up to full seconds if the code becomes too long..... Usually it is advised to only use this technique for images under 2 kB. For individual images, you can use on-line tools to convert them. An example is
For individual images, you can use on-line tools to convert them, like www.b64.io, www.freeonlinetools24.com/base64-image or www.base64-image.de. It is even possible to automate this. The Yireo ScriptMerge extension has an option to automatically replace images up to a configurable threshold with the corresponding base64 code.
Note that Google will not index base-encoded images, since they are not 'real' images. Since you should only use the technique for very small images, this should not be an issue. These images are usually items like Twitter / Facebook icons, small logo's, background-images for list-items, etcetera. All these images should not be indexed anyway.
Lazy load images
Apart from all further optimizations discussed, you can also decide to lazy-load images. Implementing this technique allows you to prevent images from loading that are not yet shown to the user, as it excludes images "below the fold". Images will only be loaded when they are scrolled to. The technique uses a simple Javascript to perform the calculations. Especially for sites heavy with images, this can drastically reduce your bandwidth usage.
You can easily implement the solution using Lazy load for Joomla by Kubrik extensions (free). LLFJ offers a number of parameters for optimization fine tuning, such as the ability to: trigger based on image class, exclusions (images, components, URL, and bots), and threshold (trigger based on pixels before viewport). After installation you will see that scrolling down is actually revealing the images. Note that Yootheme templates offer this option by default.
Another technique that more or less has the same effect but could even be more efficient is the defer images technique (no Joomla plugin, needs to be coded manually).
Use background images
A classic method to prevent images from loading on mobile devices could be to configure your images as background-images for a div instead of 'normal images'. Say you have an image of 400 x 400 pixels. If you display it as the background of a div that is also 400 by 400 pixels, the image is nicely displayed as desired. If you only apply the background-image for devices wider then, say, 468 px using a media query, this image will not actually be loaded at all for devices smaller then 468 pixels. It will probably take some advanced techniques to make these images behave as responsive images, but it could be nice addition to your set of techniques to optimize for responsive images.
Responsive images
Most responsive websites use responsive behaviour for images by simply reducing their dimensions so that they fit in their container, often by setting a max-width value in CSS. A more appropriate solution would be to load a separate, smaller image for smaller screen resolutions. This is where the responsive images technique comes in. It is a relative new technique, but you should be able to start using it already, though you may need to use some javascript solutions to make it work in older browsers. Currently you can use 2 methods:
1: srcset and sizes attributes in <img>:
<img src="/small.jpg" srcset="/large.jpg 1024w, /medium.jpg 640w, /small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" />
2: The <picture element>:
<picture>
<source media="(min-width: 40em)" srcset="/big.jpg 1x, /big-hd.jpg 2x">
<source srcset="/small.jpg 1x, /small-hd.jpg 2x">
<img src="/fallback.jpg" alt="">
</picture>
As you see, the <picture> element has a fall-back solution for unsupported browsers. Also check responsiveimages.org for more information about this.
Note that support for the srcset attribute is available in JCE Image Manager Extended under the responsive tab:
Also Yootheme templates offer this feature by default. The template creates snapshots in various sizes automatically.
Adaptive images
You could also choose to load images depending on the detected screensize, where a small screen only loads a small version of the image, and a large screen receives the large version. You can use XT adaptive images for this. Note that Joostrap adopted their technique as well in their templates.
Advanced image formats
Finally, there are image formats that are much more advanced than the classical formats JPG, PNG or GIF. An example is WebP (developed by Google), which is supported in a limited number of browsers currently (Yireo Scriptmerge can create the on the fly if your server supports it, and also Yootheme allows this). Another example is BPG, which is meant as a replacement and improvement for JPG. It is supported in all browser if you add a small piece of Javascript. Probably more formats will emerge, hard to say what will become the future standard...
