An important aspect of website design is to reduce the web page load time to the lowest possible. In most modern websites, images and external media take up more than 50% of a sites content and load time. Unfortunately, due the high load time of this media, our websites can be hurt in the process and make our site also load slow.

Below is a compilation of the top 5 ways you can optimize your images and media to make your website load as fast as possible.

1. Avoiding Heavy Graphic or Complicated Web Design
   Website designs that use many images (especially those with special effects) generally take a long time to load. What if a good looking website keeps loosing valuable visitors just because its web pages take too much loading time? Try to be discrete and use less number of images and graphics while maintaining the look and impact of the website design. Remember that text links are easily read by search engines and load faster than graphic buttons. Sometimes it is also possible to move large images and irrelevant images from one page to another page to reduce web page load time.
2. Use Optimized Images
   Optimize each image in editing software such as Photoshop. There are different image formats: GIF, JPEG, PNG, TIFF etc. so try to save images in the appropriate format. As a rule-of-thumb, GIF is more suitable for uniform color images and JPEG for real world scenes. GIF saved at 256 colors should be reduced (as much as possible) to 128, 64 or 32 colors without compromising image quality. To reduce website load time JPEG’s should be saved in the lowest quality possible without spoiling the picture impact.
3. Specify Image Dimensions
   Whilst inserting images in HTML always mention height and width attributes. This helps the web browser to know the image size before loading it. The browser will then reserve the area for the images while rest of the web page design continues to load, thereby reducing website layout discrepancies. Do not use the height and width tags for image size reduction.
4. Make Your Images Pre-load
   You can pre-load some heavy images of the next pages (that can be reached by clicking on links within the current page) by defining them at the footer of the current web page. For example:

   <img src="xyz.jpg" alt="" width="1" height="1" />
   

   inserts a 1×1 pixel image in the footer that is read by the browser when the code above it has been read. Thereafter, while your visitor is viewing your main page, images of the next page will continue to download to the viewer’s PC in the background and will reduce subsequent web page load times.

5. Flash Movie Optimization
   Animating important stuff can make an impact on the visitor. If possible, avoid animated GIF images in website designs; instead use Flash with discretion. Always use optimized flash files. Only use flash animations and movies when absolutely necessary.

Using the above tips you can surely have your images fully optimized so decrease your websites page load time as much as possible. If you have any other handy tips related to image load time, please share them in the comments!

• Table based or table-less designing?