Optimizing Images to Reduce Page Loading Time

November 9, 2008

Optimizing your website images makes it easier for Internet users to view and navigate your site.

You only have seconds to make an impression. Regardless of their Internet connection speeds, most netizens lead a fast-paced lifestyle.

Everybody is busy with everything else aside from their computers. The last thing you want to do is to make them wait.

You only have seconds to convince your market that it would be worth their while to look through your website.

A slow-loading site immediately kills any interest they have for you.

Making fast-loading pages
Text normally does not give problems with regard to a web page’s loading time. It is the images and the animations that delay displaying your website. While keeping images and animations to a bare minimum are helpful, there are times when the image files are still big.

Even if you have just 1 image file, it could still prolong loading time.

Regardless of how many images your site has or how many animation files you want to put, image optimization is always helpful.

Below are 3 image formats you can use for your images. Selecting which one is best for an image can cut down your site’s overall size to significantly hasten your website’s loading time.

1. Save image files as JPEG
JPEG files are compressed images. If you have an image-editing program like Adobe Photoshop, you can crop out unnecessary elements of a picture and save what you need as a JPEG file. JPEG is best suited for images that have gradients and soft edges.

You can adjust the degree of compression when saving. The more you compress the image, the smaller the file size becomes. However, smaller image sizes require minimal sacrifices on overall image quality.

2. Use GIF
GIF stands for Graphics Interchange Format. This is a type of bitmap image format that supports up to 8 bits per pixel. GIF images have a reference palette of 256 unique colors. GIF supports both still images and simple animations that only have looped movements.

GIF is best suited for logos that normally have less than 5 colors. GIF is favorable for flat images with defined edges.
3. Opt to use PNG images
PNG or Portable Network Graphics also belongs to the family of bitmap image formats. PNG was developed to eventually replace GIF.

The 2 bitmap image formats closely resemble each other with some differences:

• You can compress PNG files more than GIF files.
• PNG allows you to control image transparency better than GIF can.
• With a wider range of color depth, PNG allows for better color precision and smoother edges.
• GIF images receive more browser and software support than PNG.
• PNG cannot support animations. GIF can.

No language barriers
HTML, XHTML, and CSS all support the 3 image formats featured in this article.

You can stick to one format, or use all 3 formats depending on what type of images or animations you need to help your market understand your brand better.