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

Control panel gallery scripts vs. third-party photo services

Many website owners need photo galleries for their content. There are essentially three options for someone who wants an online photo gallery:

1. Use one of the gallery scripts supplied and installed by your web hosting provider (if available)
2. Download a free or commercial gallery application and install it on your server
3. Use a third-party photo sharing or gallery hosting site.

The advantage of a locally hosted gallery on your own server is that you can usually easily export your gallery and take it to another host. You also have full control over customization and features (especially if you are using an open source product). With option #1 the biggest disadvantage is that you are limited to whatever your web host provides, which may or may not be available if you switch to another host. The disadvantage of #2 is that you are responsible for updates and maintaining the security and stability of the gallery.

Option #3 eliminates the disadvantages of #1 and #2. Your gallery is maintained by another company and hosted on a remote server. You never have to worry about upgrades. The big disadvantage is that you do not have control over your own content and may not be able to easily export it and take it to another host or gallery.

Photo: Flickr