Photo Optimization

Photo Optimization is the practice and application of tailoring photos to look good and load quickly on whatever screen one is using to view web content. Web surfers are a notoriously impatient bunch. If a website takes too long to load, they will just click away and never come back.

Photo Optimization

Photo Optimization is necessary to allow a web page to load in the shortest amount of time possible. Fast loading time require small files. This article discusses the methods used for photo optimization.

In an ideal world, a web designer could use the highest quality photos and have the webpage download lightening fast. Fast loading requires small file sizes for pictures. Unfortunately, there is a trade off between picture quality and file size.

Photo Optimization for HTML

Screen resolution is only 72dpi (dots per inch). The first step in photo optimization is to reduce the image resolution in your photo from 300dpi to 72 dpi. Large pictures can be sliced up into smaller ones and then reassemble them on the web page. Each piece will be a very small file and together will load in a fraction of the time a single image file would load.

Most graphic files contain information about the color palette of the image. This information is usually unnecessary for displaying on the web. Many graphic programs included the ability to “Save for the web”. This option discards all of the unnecessary information in 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 image form. Both of these 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 to the site visitor.

Width and Height IMG Attributes

The HTML tag tells the web browser to create a specific sized box to hold the graphic. That way the browser can continue loading the rest of the web page while the graphic file is downloading. Including the HEIGHT and WIDTH will determine the dimensions of the image and allow the rest of the page to load around it. If you don’t put the width and height attributes, the web browser must pause until the image is downloaded before it can load the rest of the page.

How Many Images should you use?

Some web designers use images for everything. While it may look good, it will definitely slow down the speed of the page loading. A page with vectors and lines or graphic elements that can be repeated will have a much smaller size and therefore load much faster. Page loading speed in the sum of the HTML file plus the size of all of the embedded files. Images constitute more than 50% of the download time.

Using fewer images will speed download time and just may keep a visitor from bailing through impatience.

Photo Quality

Photo quality is determined by the clarity, color purity and detail of a photo. Use a graphic editor to remove noise and other unwanted features. Most editors allow you to correct red-eye and sharpen edges to improve clarity. Graphic elements like logos can be converted to gifs, which have a smaller file size and faster loading time.

Professional editors like Fireworks or Photoshop will let you change the background, adjust the color levels and do almost anything else you want to do to the photo.

You can also use a thumbnail on the webpage that links to a larger and higher resolution version of the image so that people who want to can view it.

Photo Optimization Guidelines

The following suggestions will allow you to optimize your photos for fast download times without sacrificing picture quality:

1. Change the resolution of all images to 72dpi.
2. Convert graphic text into stylized text.
3. Crop the images to the actual size needed.
4. Minimize color depth when it’s not necessary for quality.
5. Specify the actual width and height of all images.
6. Use thumbnails where appropriate.

Bottom Line – Graphics should enhance the content of a web page except in that rare occurrence where the images are the content. In either case, you need to optimize photos and other graphic files to allow for the fastest downloading time possible for the web page.