Learning never exhausts the mind
Home >  Web Design > Optimise Images for the Web

Published 11th February 2014 by

One of the most important performance factors for a high page loading speed is to make sure that you optimise all your images for the web.

There are several different levels to this optimisation and I will go into each one in turn.

Use the Correct Image Format

There are many different image formats that can be used on the web. Each has its advantages, disadvantages and their correct use on the web.

GIF - Graphics Interchange Format

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.

Who remembers the dancing baby from the mid-90's?

Dancing Baby

Dancing Baby

PNG8 - Portable Network Graphics

PNG8 was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the Internet. As with the GIF format, PNG8 is an 8-bit format and supports 256 colours with transparency and it is uncompressed.

GIF and PNG use is almost interchangeable, however PNG files generally has a smaller file size when saved.

PNG8 Example of Techmantium Logo

PNG8 Example of Techmantium Logo

PNG24 - 24-bit Portable Network Graphics

PNG24 is an improved version of PNG8 which supports 24-bits. This means that it is not limited to 256 colours and uses a true colour palette. PNG24 is the only file format to use a true alpha mask, as opposed to single-bit transparency. Single bit transparency is where a pixel is either colour or transparent. Alpha mask means that a pixel can be any colour, and also a percentage of opacity. This gives a much higher quality image, but at the expense of higher image formats.

PNG24 should be used when the alpha is required, such as logos, icons and any other image that requires alpha transparency.

PNG24 Example of Techmantium Logo

PNG24 Example of Techmantium Logo

JPEG - Joint Photographic Experts Group

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 lose 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.

Low quality JPEG

Low quality JPEG

High Quality JPEG

High Quality JPEG

SVG - Scalable Vector Graphics

SVG is a relative newcomer to the graphics format. It is the only vector format in this collection. SVG is an 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.

Comparision of Image File Formats

After weighing the pros and cons of each file type in the table above, you'll be able to select which file type you would like to save your final image as.

File FormatProsCons
  • Can display millions of colors
  • Best used for colorful photographs
  • Doesn't support transparency
  • Quality decreases each time file is opened (lossy compression)
  • Not suitable for icons and logos
  • 256 colors
  • Supports transparency
  • Used for icons & logos with few colors
  • Similar to GIF
  • Smaller file size than GIF
  • Lossless compression (larger file than JPEG)
  • large file size for complex images (photographs)
  • 24 bit color
  • Supports transparency
  • Used for icons & logos with many colors
  • Similar to JPEG
  • Lossless compression (each time file is opened, quality doesn't change)
  • Larger file size than JPEG
  • Large file size for complex images (photographs)
  • 256 colors
  • Lossless compression
  • Best used for small icons with few colors
  • Best used for simple graphic images
  • Supports transparency
  • Supports small animations
  • Larger file size than PNG

Optimise Images

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 metadata 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 increases 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.

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.