While we all want great looking web sites, we also want web sites that folks can get to quickly (page load times) and look good. You really need to pay attention to the graphics that you use. I will outline some of the most common mistakes I see in regards to graphics on web sites and outline a few things to improve them. It is easy for folks with high speed connections to forget that not all of your web site visitors have the same speed connection, and good design is also considering what slower speed users see your pages at.
Probably the most common mistake I see is when someone posts pictures directly from their camera to their web site without first optimizing them for the web, I also commonly see this with various web page elements such as navigation buttons, company logo’s etc.
The big difference between graphics utilized in print media vs graphics used on web sites is the resolution or dpi. Where you want 300 dpi images or greater for printing flyers and brochures etc, anything more than 72 dpi is not seen in web browsers. If you post a picture directly from your camera, it is not uncommon to see 1200 dpi or higher, which results in a much larger file than one at 72 dpi. On the web, the larger the files used to make a page, the slower the page loads. This is compounded when folks post several full size pictures on one page. It also consumes more of your valuable web disk space and bandwidth. There are a lot of good tools available for optimizing web graphics, Paintshop, Photoshop, Fireworks, and many others as well as several online tools that will optimize graphics for you. I will put some links to some of the tools at the bottom of this article.
Another trick which most of the good graphic editors allow you to do, is try saving the image in gif, jpg, and png formats to see which results in the smallest file size with the best clarity. I find that unless a graphic is less than 256 colors, usually .jpg or .png are the optimal formats to use. Also be careful to leave your original graphic in whatever format it is without changing its resolution so you always can go back to it if you need to edit it etc.. Do a file “Save As” to create the image you will optimize and place on your web page.
Another common problem is having too many graphic elements on a web page. In many cases purchased templates have tons of filler graphics which are dumped directly out of Photoshop or one of the web design packages, often you can replace those filler elements with html background colors etc to reduce your page size. And you should always optimize all of the graphics on your web pages.
If you are displaying a lot of photo’s, it is good practice to create smaller thumbnail images of the photo’s and have those on your web page so it loads faster, and if visitors want to view the full size images, they can click on the thumbnails to see them. An example would be these pictures (click here) of me and one of my dogs. It shows how you can have many pictures on one page without downloading the full size images.
I also often see the misuse of the html image size option. This happens when someone uses a larger image than what is displayed on the web page, for example a 400×400 graphic, but they just modify the html to display it at 100×100. It may look smaller, but reality is your visitors have to download the 400×400 image which is much larger. Resize your graphics to be what they should be rather than just changing the html. Your visitors will appreciate it.