How to prepare images and animations for your website

Images, animations and interactive animations are all over the internet. They convey your message quickly, and are usually more likely to be read or watched than a paragraph of text.

So how are they produced?

There are invaluable software tools that most graphic designers can't do without, such as Photoshop, Illustrator, Flash. Software programs can be expensive, but are essential for a serious web designer. If you don't want to spend a lot of money there are some amazing free on-line graphic programs such as: and

You can design images from scratch or download images from many online images libraries – just type 'image libraries' into Google.

These are the common steps that web designers take when preparing images for a website:


  • the final resolution should be 72dpi – You can check this in Photoshop by clicking menu 'Image > Image Size'. Import an image
  • Open the image in your image editing software (such as Photoshop).
  • Check the 'Color Mode' of the image. If it is CMYK, change it to RGB.
  • If you image needs to be, say, 200 pixels by 100 pixels, you may need to 'Crop' or 'Scale' the image accordingly. Be careful before doing this – if the dpi of the image is greater than 72dpi, you should set the resolution in 'Image Size' to 72 dpi.
  • If you want the image to have transparancy, save the image as GIF or PNG. When saving a GIF image, be wary that the edges will be aliased. Soften the edges by using a matte colour the same as the colour of the area on the website where the image will be placed. You can also achieve a transparancy effect by setting the background colour of the image to the same colour of the area on the website where the image will be placed.
  • When you are ready to save a non-transparant image, save as JPEG format. You will find that 50% compression will result in the best file quality and download speed.


Flash can be used to create fluid animations, interactivity, and even complete websites.

Enquiries:    Level 6/69 Reservoir St, Surry Hills 2010

Hairy Camel Web Solutions ACN 153659208   ABN 87153659208 |  Sydney, Australia  |  F: 02 8084 1842  |  M: 0412 342 880
Submit a support ticket       ©2012 Copyright Hairy Camel Web Solutions Pty Ltd - Web Design Sydney       Site Map