One of the most important website performance ranking factors is to make sure that you optimise images for the web.
There are several different levels to this optimisation and I will go into each one in turn.
Introduced in 1987 by CompuServe, the GIF image format has become synonymous for gaudy animation as it is the only web image format to support multiple frames. It is an 8-bit format which means that it can support up to 256 colours and transparency.
GIF images should be used when you need low resolution images with or without transparency. GIF images are not compressed, so the quality remains constant. They are mainly used for logos and graphics with solid areas of colour.
GIF and PNG use is almost interchangeable, however PNG files generally has a smaller file size when saved.
PNG24 should be used when the alpha is required, such as logos, icons and any other image that requires alpha transparency.
JPEG (jpg or jpe) is the method of choice for serving photo quality images on the web. It uses a compression algorithm which removes data from the image in order to reduce the file size. It also compresses similar parts of the image together. The higher the compression level, the more aggressive the algorithm removes and compresses data. You should find a trade-off between image size and image quality. If open a JPEG image in an editor, make a change and re-save it, you will loose more data from the image. The more times you do this, the more data is removed by the compression algorithm. Eventually the image will be so garbled, you won't be able to make anything out.
SVG is a relative newcomer to the graphics format. It is the only vector format in this collection. SVG is a XML-style markup driven format supported in every browser, except Internet Explorer versions prior to 9 and Android versions below version 3.
SVG offers resolution independent graphics, which means that the image can be enlarged or reduced without pixelation. SVG offers a way to do full resolution graphical elements, no matter what size screen, what zoom level, or what resolution your user's device has.
SVG is a revolutionary image format, but it is not suitable for complex images or photographic images. It is great for logos, symbols, icons, graphs or anywhere else where solid colours or basic image elements are required.
Regardless of the file format chosen, all images should be optimised. If you use Photoshop or GIMP this can easily be done by using the "Save For Web..." export option. This will not only allow you to select the most appropriate image format, colour depth, transparency and so on, but it will automatically strip out surplus hidden data that is not required.
This surplus data is known as meta data and is mainly stored in JPEG images. It includes information about the camera that was used, the focal length, shutter speed, exposure settings and also the colour profile used. This extra information increase the image size by over 100 Kb and is generally never seen.
If you do not have Photoshop, you can use the online image service Smush.It from Yahoo which will do the same process. Simply upload your images, they will process the images and let you download an archive with the optimised images.
My website and its content are free to use without the clutter of adverts, tracking cookies, marketing messages or anything else like that. If you enjoyed reading this article, or it helped you in some way, all I ask in return is you leave a comment below or share this page with your friends. Thank you.