Preparing Images for the Web

Nothing is worse for an Internet user than to get to a website and have to wait a long for it to load, especially if that long load time is the result of one seemingly tiny image at the bottom of the page. Here are a few tips you can follow to make sure your website images are actually ready for the web:

1. Use compression, either of the JPEG or PNG variety. PNGs will need to be crushed in order to not be huge file sizes. Your front page should not be filled with images over 10kb (aside from maybe the banner). If you have a blog, try to keep images under 50kb. You can have users click on thumbnails to see larger versions.

2. Use appropriate sizes. If your HTML declares an image to be 250×150, the image should actually be that size. If you resize a larger image, the visitor’s browser will still have to load the full sized image, which takes longer to load.

3. Use the appropriate alt tags. In order to be standards-compliant, all images on any page should be properly described in alt tags so that visually impaired visitors will know what they are.

4. For large packs of images, use a gallery. If you are going to be displaying images in bunches, use some type of gallery or light box (modal windows). People who see the initial page will still get fast load times, and if they want to see the images up close, they can choose to wait longer.

Photo Source: Wikimedia Commons

Test the speed of your website

Once you have successfully developed a website, you will need to perform periodic evaluations to ensure that it continues to meet web standards, accessibility guidelines, and is usable on multiple platforms. You can have the most beautiful website ever created, but if it is too slow and crashes a user’s browser, you have lost a visitor, and possibly a customer.

An easy way to test your website’s speed in the worst conditions, is to load it on the slowest computer you can find, on the slowest possible connection. The more single-page text, styles, images, and animations you have, the longer it will take for a browser to process it and display it.

There are also two website speed tool tests you can try: iWebTool has a speed test that will measure up to 10 domains at once. It will download your website’s actual pages and tell you how long it takes. Pingdom has a test that will examine the entire page, telling you the load times for each content item, including images. Both tools are useful, and after you have your results, compare them with other websites of similar size and content. Finally, make the necessary changes to your site, and reap the benefits.