In this tutorial we are going to look at the issue of adding images to your Joomla website.
Frequently site developers make the mistake of adding images to their sites without resizing the images or renaming the files incorrectly, which can slow websites down or cause images not to load.
Search Engines like sites that load quickly – it's a acknowledged factor in Google's algorithm to determine a site's ranking.
Resize images in your editor by reducing the pixel dimensions. Digital photos are frequently taken at a very large image size – this means that bandwidth is wasted and screen real estate is wasted if added straight from the camera.
The filesize of the cat image is 1 MB when used straight from the camera - however when the image is resized to the required image dimension size and saved as a jpg (at the high quality compression level) the file size drops to 100k.
Re-size images to the approximate required screen size in your editor or application before added it to a site. If an image is resized in an article, the browser will still have to load the original file slowing down the site.
Avoid client confusion. When using an image in a Joomla extension, it is easier if you resize it to match the image settings and avoid the image resize option. (At a later date clients can be confused if they add an image and when resized via the extension it looks wrong.)
Adding a space to a filename can cause images to not load both in an article and in a extension.
If using the JCE editor, it will show as an invalid file.
The Zen Grid Framework has a built in image resizer and it is used extensively with Joomlabamboo extensions. You can read a full overview of the resizing options on the Zentools mini documentation site.
There are a range of online tools, both free and commercial, that offer the ability to resize and rename images.
Heres a small selection of free apps to try
The most popular commercial options are Photoshop, Photoshop Elements (a cut down version of photoshop) and Fireworks - all of which are produced by Adobe.
Free alternatives include
Everytime an image is saved as a jpg the quality of the image degrades slightly, this is not normally a problem but if an image is continuely resaved as jpg then the quality of the image will suffer.