Photo optimization is important so as to allow web pages to load as fast as possible. Many web designers would want to use high quality photos and still have pages that download very fast. Fast loading requires that pictures have a small size. However, picture quality varies depending on file size. The following are some tips which can be useful for photo optimization.
The first step in photo optimization is reducing your image resolution to 72dpi. If you want to use a large picture, you can divide it into smaller ones, and then put them back together on the page. The individual pieces will load much faster than the single image would load.
Another way of speeding up the time of loading is to use the JPEG progressive property, or the PNG or GIF interlaced. These properties allow images to load slowly, first as a hazy image which becomes clearer and sharper.
Height and width IMG attributes
The HTML <IMG> tag instructs the browser to create a box of a specific size to hold the graphic. If you fail to put the height and width attributes, the browser must wait for the images to load first before loading the rest of the web page.
Number of images
Some web designers put images everywhere. Though this might look good, it will slow down the loading speed of your page. Images constitute up to 50% of the loading time. Using images conservatively will ensure faster download time and will prevent visitors leaving your site due to impatience.
Photo quality is shown by the color purity, detail and clarity of a photo. You can use a graphic editor to eliminate noise and any other unnecessary features. Many editors will allow you to improve clarity by sharpening edges and correcting red-eye.
Professional editors such as Photoshop and Fireworks will allow you to adjust color levels, change the background, and make many other changes to a photo.
Photo optimization guidelines
The following are suggestions which will enable you to optimize your images and achieve fast download times without compromising picture quality.
- Change the image resolution to 72dpi
- Change graphic text to stylized text
- Crop images to the size required
- Minimize color depth if it will not affect quality
- Specify the actual height and width of your images
- Use thumbnails when necessary
The role of graphics is to enhance web page content, except in rare cases when the images are actually the content. In both cases, it is important to optimize images and graphic files so as to allow faster downloading of the web pages.