When your website uses many images, it is very important that they are optimized and as light as possible. 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!
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.
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 the 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. It has a free to use 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 have a Joomla plugin that you can easily install so that your images are optimized (and optionally resized) without any additional actions from your side. Also, 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 creates this little 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.
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
Lazy load images
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.
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.
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>:
<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="">
As you see, the <picture> element has a fall-back solution for unsupported browsers. Quite frankly I have not used this technique in production yet, but it is definitely a technique to consider, especially if browser support grows. Also check responsiveimages.org for more information about this.
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