Understanding how images on the web work and differ from images in the print industry is an essential skill for both professional web designers and website owners. Having images with large file sizes on your website will seriously affect your bandwidth and become an annoyance to viewers having to wait for the image to download.

Small is beautiful

In print, images are required at high resolutions where larger is better but the web is completely opposite; images with a smaller resolution, with a file size as small as possible, without losing too much quality is the goal.

Image Formats

The two main types of images on the web are GIF (Graphics Interchange Format) and JPG (Joint Photographic Experts Group – Committee who created the compression standard).  They both serve different purposes and are usually used together when creating websites. Generally the GIF format is used for images with large amounts of solid colour such as logos, buttons and text images whereas the JPG format is best suited to photos and illustrations containing a larger amount of colours gradients or effects.

Optimising images

You don’t need to be a professional Graphic Designer with the latest version of Photoshop to be able to get perfectly optimised images for the web. There are a range of excellent cheaper and free programs available that will get you on your way; some of these programs have been listed with links at the end of this article.

I’m not going to give an in depth tutorial on how to optimise your images, but rather generalise the step by step process which can be applied to all image editing programs.

Image dimensions

Often in Content Management Systems, a width or height is specified, so you might have a dimension you need to work towards. If you can, find out what the required dimensions (in pixels) are for the image on your webpage, this may be a thumbnail, header graphic, product image etc that will usually have a set width and/or height, if you’re not sure ask your web designers for the dimensions for your images.

The simplest way to find the dimensions you’ll need is through your browser; by right clicking on the image (or image holder) in your browser and selecting properties, you’ll be shown the dimensions used within the source code. Some browsers like Firefox will actually tell you the dimensions and whether the image has been scaled to fit this size plus the images original width & height.

The reason for making your image at the correct size is so you aren’t loading an image 2 or 3 times larger than what it needs to be – even if your website scales images to the correct size for you, it’s just a waste of bandwidth and a frustration to the end user.

Crop & Resize

In your image editing program, open your image and resize it to fit the correct dimensions. Depending on how much your image dimensions differ from the required ones there are two ways of doing this; one is by scaling the image to fit, but make sure you constrain the images proportions so it scales correctly – for example, if you know the width of the required image, you can set the image to scale proportionally then enter the width into the scaling tool; this will resize your image to the correct width whilst keeping you image in proportion.

The other is to use a crop tool, which does exactly what it says – crops the image to the specified dimensions. This allows you to drag and select a sized area of your image to use as the optimised image. In most cases, using both techniques is required to get the best results.

Optimise & Save

Once your image has been resized to the correct dimensions, you’ll need to save it as either a GIF or JPG – this is where the main optimisation comes in. Most programs will have an option to save or export image for web which will give you more options related to optimising web images.

There are no exact settings to follow when optimising, it’s more of a ‘try and see’ – most programs will have a save preview that will reflect the changes you make. Play with the settings and try to get the file size as small as possible, without sacrificing too much image quality. JPGs only have a quality setting (0 - 100), depending on your image, anything with a setting below 60% is going to start showing signs of quality loss. GIFs give you several options, such as choosing how many colours to display (maximum 256) and other settings like Dither (softens/reduces colour banding, but can greatly increase file size) and Lossy(gathers similar pixel patterns to reduce compression and save bytes but can quickly degrade image quality).

Finding the right settings for the best optimisation is tricky but the more you do it, the more familiar you’ll become with optimising and before you know it you’ll be mentally optimising every image you see. There are plenty of tutorials out there; here are some to get you started:

Resize and crop images in Photoshop & Photoshop Elements

Resize and Crop images in GIMP

These are some programs I recommend for image editing/optimisation (ordered by most expensive to free). When selecting an image editing program, consider your own personal requirements and abilities – are you just going to be using it for simple cropping, resizing and optimising your images, will a free application do?

Adobe Photoshop
Corel Painter
Adobe Fireworks

Adobe Photoshop Elements 

GIMP (Freeware)
SumoPaint (A free online program very similar to photoshop – excellent if you don’t want to install/download software) -

Related Links
What is a GIF

What is a JPG

Web image formats

+ Back to blog home

Posted in: Tips and Tricks