.
Genesis
.
Information
Customer Support
.
Portfolio
.
Contact
.
Jobs
.
Tim Rendle Dot Com

 

Image Tutorial 1

Fast Loading Websites by Optimising Images for the Web.
A beginners guide to image optimisation.

Pictures on the Internet use a standard resolution or dpi (dots per inch) of 72.
When you are going to publish a picture for the web, you need to first create a blank picture in your editing software package.

Make sure the picture has a resolution of 72 dpi and also has the exact dimensions that you will be using when the picture goes online.
Getting the dimensions wrong in your HTML code will cause the image to distort - so use the same dimensions in your HTML code as the image actually is.

Drag the image you want to publish onto the blank image you have just created and use a 'Uniform Scale tool' to make the image fit.
Uniform Scale ensures that when you want to reduce the width of an image, the height reduces in proportion which avoids distortion.

Now all you need to do is save the image in the right format for the correct type of image.
There are two main web image file formats: JPEG (also jpg) and GIF. The difference between them is in how each interprets images and is very important when choosing the right format to save in. The format can dramatically affect the filesize. Basically for text and other block colour images use the GIF format. For Photographs and blurred images use JPEG.

When saving for instance an advertising banner as a GIF, reduce the number of colours in the GIF to as few as possible.

When saving a photograph in the JPEG format, set the quality ratio to around 75%.

 

File Sizes

If you are going to use an image on a webpage, the image filesize should be below 30 something Kb. This is not a Law but does ensure the image loads nice and quickly. Also there are still dial-up users who have a slow connection.

If visitors know they have asked to download a large picture from your site then filesize doesn't really matter but it's good to let them know how big the file is before they start to download.

Another issue with using large images is that they use your bandwidth. To explain bandwidth, most hosting companies give you a set maximum of data transfer per month. If you are using large images and have a lot of visitors you will be transferring a lot of data and using a lot of bandwidth. Most hosts charge a top-up fee if bandwidth limits are exceeded.

 

Here's a few examples of good image optimisation :

 

GIF image ( 12px by 12 px ) for a button.
Filesize 103 bytes ( 1/10th of 1 Kb)

 

GIF Banner image ( 320px by 55 px ).
Filesize 2.66 Kb

Gif images are used because mainly for text and buttons.

GIF Anim( 72px by 82 px ) .

Filesize 7.92 Kb

 

JPEG - B & W photograph ( 336px by 406 px ). Filesize 19.8 Kb

 

JPEG - Colour photograph ( 350 px by 466 px ). Filesize 28.4 Kb

Blurred images save well as JPEG's and because there is less detail the filesize is much smaller.

The image below is the same dimensions as the image above with just a little blur. Doing this has reduced the filesize to 21.8 Kb

The same dimensions as above but now only ...12.8Kb

The more detail - the more filesize.

Also try to crop your image to avoid as much white space as possible

 

That should give you enough to get your images optimised and your Website working quicker.

 

Key points

  • Always use 72 Dpi
  • Try to keep big images to a maximum of 35 Kb
  • Gif images are for text and shapes of solid colour
  • Jpeg format is for photographs and blurs.
  • Blurring reduces filesize

web design by timrendle.com tim@timrendle.com

© Copyright Tim Rendle 2005

OTHER TIMRENDLE.COM TUTORIALS

Basic HTML for beginners #1 - Create an HTML page

Basic HTML for beginners #2 - Formatting text in HTML

Basic HTML for beginners #3 - links - images and linking images for buttons

Guitar tutorial for absolute beginners

© Copyright Tim Rendle 2005

 

Essex London and UK Website Design Services.. Supported traders

UK & ESSEX WEB DESIGNER - SEARCH ENGINE OPTIMISATION WIZARD - UK WEBSITE ANALYST-
United Kingdon Web Design Agency