Part of a web designer's job is to build fast loading websites. After all, what's the use of creating astoundingly beautiful web pages if they take forever to show up on your visitors' computer monitors?
One of the top reasons behind slow loading pages are images â€“ either there are too many images or the images used are not optimized for web display. So how do we optimize images? The key to optimizing web images is to cut down on their file size, number and sometimes quality. Here are a few quick ideas on how to go about doing that:
Don't use one image format for everything. Some designers are under the impression that using JPEG is the way to go. But that's not necessarily true. Using the appropriate image type is the key. JPEG is good for photographs, images with smooth tones and low contrast pictures with various colors. For text, icons, buttons or images that have strong contrast, it's unwise to use JPEG. Use PNG and GIF instead.
Specify the width and height of your images either by using CSS or by specifying them in the IMG tag. Don't let the browser have to guess on how big you want the image to be displayed. This way, browsers can continue loading the rest of the page while the image is being downloaded. If you don't specify any display dimensions for the image, the browser will have to wait until all images are loaded before loading the rest of the page. The whole page then seems like it's taking longer to load.
Don't underestimate the power of thumbnails. If it's absolutely necessary for your visitors to see your picture in its full glory (and size) try to use thumbnails instead. Paste a small version of the picture on your web page with a link which will lead to its original, larger, high-resolution version.
Don't use more images than you need. Try to keep the image count on a web page below 20. That includes design elements such as background tiles, buttons and, header and footer graphics. Make sure that when you do add images, the overall file size of the page isn't affected â€“ this should be below 30 kilobytes. Also, if you can, just recycle images you've used before instead of adding new ones to your site's server.
Do convert graphic text images into CSS text. If you're using an image to represent words, replace it with just plain and simple text, formatted through CSS. Not only will you spare your page the extra load time, this is also good for SEO, especially if the text you're including contains your niche's keyword.
Do reduce the file size of your images whenever you get the chance. For GIF and PNG images, try to minimize dithering too. For images that require much dithering, use the JPEG format instead. Use lossy compression for GIF and PNG images to help cut down on their file size without sacrificing much quality. Another clever method is to blur backgrounds in JPEG images.
Those just a handful of the many ways you can optimize web graphics for your site. Always remember that less is more and it takes a lot of skill for a web designer to maximize the use of his creativity despite his need to ensure usability, accessibility and speed.