When your Joomla website uses many images, it is very important that they are optimized as much 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.
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 colours.
- 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 bottom 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, chooing 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 maller images, visually they still look perfect.
Use correctly sized images
You should make sure that you always use images with the dimensions thaey are meant for, and not use resize their dimensions.
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 mecahnism that only uses the resized versions of uploaded images, but there are many more of these solutions.
Lossless compression of images
Even correctly sized images can carry unnecessary bytes and metadata that can be removed for ultimate optimization. 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 be removed using Photoshop's Save for Web and Devices.
There are a number of tools that can do this for you. Smush.it is the most famous one of these, and does an excellent job at it, especially for PNG images.
Also TinyPNG is a great tool I recently discovered, and it seems to work really well, unfortunately only for PNG files. Just a random .png I reduced in both both SmushIt and TinyPNG showed that TinyPNG was much more efficient:
There are also some freeware tools (did not use them personally) that you can install locally, especially handy when you often have to reduce images often and in bulk:
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.