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