Not having to do specifically with the design of the website, image optimization is often overlooked by web designers.
However, optimized images are essential for the success of a website, especially if the images play a large role in the site. Image optimization is one of the necessary options to allow a web page to load in the shortest amount of time possible.
In an ideal world, a web designer could use the highest quality images and have the web page download lightening fast. Fast loading requires small file sizes for pictures. Unfortunately, there is a trade off between picture quality and file size.
Optimizing images for the web can be a tricky business. Designers have to get the right balance between filesize and picture quality.
Why is Image Optimization needed?
There are two reasons for image optimization: download time and bandwidth used. These may seem interrelated, but they are important for different reasons. Hardware storage space is a third reason that many only really apply in some cases.
Download time, though not as important as it was before, is still a major factor in a sites success. A user made to wait is a user more likely to hit the back button on the website, navigate away, or click on content that loads first instead of waiting for the entire page to load. Losing customers to a page that take 10 seconds to load is unacceptable.
Bandwidth is the hidden killer of the high traffic site. Bandwidth costs money, and not optimizing images wastes precious bandwidth that will end up with more money wasted, losing customers, or both.
How to Optimize?
Format
The first thing is to select a format for the job. A rule of thumb: if an image is similar to a photograph (thousands or even millions of colors), a JPG format should be used. If an image is more similar to a graphic (an illustration, or less than 300 colors), a GIF or PNG format should be used.
JPG graphic (.jpg) sizes are determined by the image canvas size and the quality of the image. The quality is a factor between 1 and 100, with 100 being the highest quality, or a range of 1 to 10, with 10 being the highest quality. These determine the compression applied to the image.
The size of GIF and PNG graphics is determined by the canvas size (though to a lesser extent than JPGs) and the number of colors in the optimized image. Most graphics and logos do not need 256 colors to look good, and may even look good with as little as 32 or 16 colors. The difference between PNG and GIF images is subtle; Depending on the graphic, either one could look the best with the smallest file size. For larger graphics, PNG seems to win the contest versus the older GIF format.
Image Resolution
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 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.
Image Attributes
The HTML image 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. If you don’t put the width and height attributes, the web browser must pause until the images is downloaded before it can load the rest of the page.
Some web designers can use images for everything. While it may look good, it will definitely slow down the speed of the page loading. Page loading speed in the sum of the HTML file plus the size of all of the embedded files. Images constitute more than 50 percent of the download time.
The IMG tag can have an ALT attribute. It is easy for a human reader to interpret the image into its meaning. However for a web crawler the whole interpreting process is completely different. Search engine spiders can only read text but not images. The ALT attribute can tell these search engine crawlers what it is. The text placed in this attribute is also shown in the event the image does not load.
Image Quality and Size
Image quality is determined by the clarity, color purity and detail of an image. Use a graphic editor to remove noise and other unwanted features. Editors can also correct red-eye and sharpen edges to improve clarity, change the background, adjust the color levels and so forth.
When appropriate, a thumbnail on the web page that links to a larger and higher resolution version of the image can be used so that people who want to can view it.
Image size can be reduced for quick download while maintaining good quality for viewing at different screen resolutions.
Large Scale Optimization
One of the many benefits of PHP is its image handling packages GD and GD2. Built into the latest versions of PHP, GD and GD2 allow for instant image resizing and manipulation on the server before the image is sent to the client to save bandwidth. Combined with the PHP's filesystem functions, GD allows a permanently resize images on a web server.
Conclusion
Graphics should enhance the content of a web page except in that rare occurrence where the images are the content.
In either case, optimizations to images, photos and other graphic files to allow for the fastest downloading time possible for the web page.