Getting images ready for the web

If you don't do your images right, you easily end up with images that take too long to download or worse be in wrong formats. Make sure images you post on your blog or website are in JPEG, Gif, or PNG format. As you probably may know, text loads faster than other web media such as graphics, flash or media. Why is this significant? This suggests if you use text more often than other web media, your website visitors will get the message quickly.

Recall the last time you visited a new website. How long did you spend? Chances are you gave up on looking on that website if you quickly did not find what you expected. This is how most users are using the web today. Web is not a book so no one has time to read from page to page. Websites to be effective have to contain the message quickly with the user or else loose the user. True - animations, graphics, and videos do help you deliver the message but they require the user to wait for this media to load to the computer.

The goal here is help you maximize the performance of your website or web page when use images. Do:

  • Crop-off "whitespace" area of your images. If your background is non-white, you may have extra space in other color. Why is it necessary to cut-off unused plain areas of your images? This will reduce width or height or both of the image, which in turn will reduce the file size. Consequently, when you put this image on your web server, it will take less time for your user (or more precisely the browser) to download your page. Remember if you just change the HTML of your image tag (img) and not the image, your image file is not affected. In other words, if you change the width to 500 from 1100 and height to 545 from 1200 in your image tag, the image file size itself is not reduced. So reduce the demission of your image in your favorite photo editor (such as Fireworks, Photoshop, etc.) and then change your HTML to reflect the size of the new dimensions.
  • If you need extra space (i.e., whitespace) around the image, use hspace or vspace attributes. Even better yet, use Cascaded Style Sheets (CSS) formatting rules to specify the desired padding around the image. This will give you the extra space you desire that you don't to add to your image.
  • In Fireworks, if you export JPG image with the defaults, with quality set to 78, it is of decent quality. Depending on the image if you increase this value, your image size will also be increased. So using the default will work almost always.
  • take advantage of what is called caching. If you don't know what it is, don't worry. In simplest terms, your website' visitor’s browser will keep your images in its cache in case they are needed again. So what this means is use the same image names across your pages because when you use the same image on the next page, your next page will load faster! Essentially, the browser is loading only the images that have not yet one downloaded from your website, each time the visitor requests a new page.
  • Specify the width and height (dimensions) of your images. This will mean the browser does not have to figure out the dimensions. As such, the browser will be more responsive to the user viewing your website. If you have 20 images per page and if you don't specify the dimensions, the browser will need to figure out the dimensions for each. The time spent on this by the browser is not probably apparent to user. However, if you have other process-intensive tasks on the page, it makes sense to do everything to limit extra processing on the browser.
  • Pre-load images especially when you are using mouse over effects. If your images are not loaded when the user moves his/her mouse over a particular image, the mouse over effect won't work correctly until the image is loaded to the browser. Again, who is going to wait for that to happen? Does the average user even know that he/she need to wait for an image to be loaded? (Answer: no one, and no.)

Let me also mentioned few points on what you should avoid doing with your images. Don't:

  • Put a lot of images on one page. If your page requires many images, use smaller sized images (or more exactly thumbnails). When the user clicks on the thumbnails, you will show a larger graphic. This means you have to create a link from each thumbnail to corresponding larger image. You can also try just plain words if you don't want to go through creating thumbnails. By the way, Fireworks lets you Batch Process (File | Batch Process) to let you give photo editing commands to many images. This eliminates the need for you to do the resizing manually!
  • Create words or text and save that as image. Why? Reasons:
    1. Text speaking-software cannot read text embedded in your images. People who are blind use such software.
    2. Those that need to make the text larger to read because of eye-sight problems cannot make the image larger. When they adjust the text size on their browser window, their browser will make the text larger and leaving the text inside the image unchanged.
    3. Text loads faster than graphics.
    4. Text inside images cannot be read by search engines. So your page is not optimized fully when text is embedded inside graphics.

Regardless the complexity and size of your blog or website, I hope this information will help you optimize the use of images. And, in turn, improve performance and loading times.

Posted on 11/25/2007
by Raj Singh