Image compression for the web is a specialist skill, and one that many businesses struggle with. We've all stumbled across one of those terrible websites filled with pixilated, distorted and fuzzy imagery, or one with such beautiful clear imagery that it takes hours to download a single page (causing you
to leave).
These are examples of websites where image compression has been done poorly. However, once you understand the fundamentals of resizing and creating images for the web, you will be able to avoid these common mistakes.
The first rule of digital imagery on the web is that you should never add an image to your website directly off a digital camera. A digital camera image is generally around 3MB in size (depending on your camera), but in order to have a fast loading website your images should be no more than 200KB (or 0.19MB) in size.
Once you've taken an image on your digital camera and would like to add this to your website, you first need to resize and compress the image for the web. To do this, you will need image resizing software, such as Photoshop.
For those of you without the budget to invest in such software I suggest downloading Paint.NET, which is a free program that will provide you with most of the tools you need to resize your images.
Once you have the necessary software, you will need to use it to resize your image and reduce its DPI - both will reduce the file size of your image, making it faster to load on your website.
An image taken on a digital camera will be about 3000 pixels wide, while most images for the web should be approximately 300 pixels wide (please consult your web developer regarding the best image size to suit your website design). Likewise, an image taken on a digital camera will have a DPI (dots per inch) resolution of approximately 300 (print quality), while a website image only needs to have a DPI resolution of 72 (for onscreen viewing).
The next most important consideration in digital imaging is what file format to save your image to (once it is resized), in order to display it in the best possible way on your website. Unfortunately, there in no simple answer to this question, as it depends on the image to be displayed. However, there are currently two widely supported formats that will display on the web; .JPG and .GIF. If you understand what each format does best (and their downsides), then you can make an educated guess about which format to choose.
.GIF
GIF compression is called "lossless", which literally means "doesn't lose quality" when compressed. However, .GIF only supports a colour palette of 256 colours (unlike .JPG that support 16 million colours). For this reason, .GIF is a file format that is better suited to graphics (non-photorealistic images and Line Art that have large areas of solid colour) rather than photos. This is because the .GIF format uses a technique called "dithering" to trick the eye into believing a colour is solid by using two different colours from its colour palette and placing them side by side in a predictable pattern.
The .GIF format works well with blocks of colours. However, when you try to save a photorealistic image (e.g. a photo of your team or client event) as a .GIF you will start to see the "dithering" (or large blocks of colours) - making the image appear distorted. For this reason, I would recommend that you only use the .GIF format if your image is background graphics, images with text and/or patterned images.
.JPG (pronounced: J - peg)
The .JPG format uses a "lossy" compression, which literally means the image "loses" quality during the compression process.
When using .JPG as your chosen file format, you will notice that the more you decrease the quality of the image, the more "artifacts" (fuzzy outlines in the flat colour areas of the image, especially near edges) appear. These artifacts appear because the harder you compress the image, the more information about the image is literally being thrown away by your computer. This is also the reason why you can't enlarge a .JPG image without it going fuzzy.
.JPG is the ideal file format for photorealistic images with lots of variation in colour (rather than photos with blocks of colour) or graphics that have colour gradients (e.g. a fade from one colour to the next). This is because the compression artifacts are less noticeable to the human eye when there are a lot of different colours in an image.
Wendy Schollum is a web strategist and managing director of Xplore - your web agency (www.xplore.net). For more information on website design and best practices, follow Xplore on Twitter (www.twitter.com/xploreNET), join Xplore on Facebook (www.facebook.com/xploreNET), add Xplore to one of your Google+ circles (http://gplus.to/xploreNET) or call 0800 100 900.
