Website Design & Development: Image Optimization

Optimizing image graphics on a web page is an important aspect of website design. The pictures or images on the web page should be of high resolution but small in file size so as not to hamper the downloading speed of the web page. This is one of the important ranking criteria of the search engines. Since they know that users do not wait for eternity for the web page to download.

Computer monitors can only display images at 72 dots per inch. So the first step is to reduce the resolution to 72 dpi. Large picture can be sliced up into smaller ones and the put back together on the web page. This way each piece will be small in size and will load in a fraction of the time that a large single picture would load.

The color palette information of the pictures is unnecessary for displaying on the web page design. Many graphic programs have option to save on the web. This option does away with the info about the file without any loss of picture quality.

Another method that appears to speed up load time is to use either the GIF or PNG interlaced or the JPEG progressive property. Both of these properties allow the picture to load gradually as first a blurry image that becomes sharper and clearer. In reality the picture actually loads a fraction of a second slower than the regular formats do but it appears to load faster the site visitor.

Width and Height IMG Attributes

The HTML <img> tag element specifies the box size to the website browser to embrace the graphic and hence the browser can continue loading the rest of the web page as the image is being downloaded. In absence of width and height attributes the web browser stops downloading till the image is downloaded.

What Number of Images to use?

Large number of images on the web page slows the downloading speed, since photos constitute more than the fifty percent of download time of the web page. Use the right numbers of images (few) so that the downloading time is not hampered and the user is happy.

Photo Quality

Photos should be clear, optimum in color and resolution. Use a graphic editor to remove noise and other unwanted features. Most editors will correct red-eye and sharpen the edge. Some photo editors let you change the background, adjust color level.

Always convert graphic text into stylized text and keep images to the required size on the web page. Graphic help enhance the website usability and help in information to the user that which he or she is seeking. Unnecessary usage of images is not good.

Contact Us