One of the biggest mistakes website owners make is putting images on their website that have not been compressed for web usage. You may have visited a website where the image seems to take forever to fill in or appears to paint in as the image loads. This is because the image wasn’t properly formatted for the website. Any image that you are going to use on a website should be saved at 72 dpi (dpi = dots per inch).
There are many applications that you can get that will allow you to “Save for Web”, which reduces an image to the 72 dpi setting.
Something else to consider is the actual size of the image. Almost everyone these days has a digital camera, so we have photos readily available. One thing we generally don’t consider is the actual size of these images.
Here’s an example. If you have a 7 megapixel camera and leave it at the default setting most likely that camera will take a picture that is 3072 pixels by 2304 pixels. Now compare that to your most common computer screen setting, which is currently 1024 pixels by 768 pixels.
You can see there is a huge difference in visual size. Now take into account also that the original image is 1.8 Megabytes (MB) in size. Depending on the connection speed that image could take up to 4 minutes and 29 seconds to download if your visitor is on a dial-up connection and 39 seconds to download if your visitor has DSL.
Simply by “Saving for Web” allows you to reduce the file size to 594 Kilobytes (KB), which will reduce the download time to 1 minute 26 seconds on dial-up and 12 seconds on DSL. But the image would still be 3 times larger than your web browser. What some website owners do is use HTML to make the image appear to fit on the page.
Even using a WYSIWYG (What You See Is What You Get) editor like Microsoft’s FrontPage (now called Web Expressions) or Adobe’s Dreamweaver you can “tell” the page to make the image a set size to fit the page even though the image is still the original size.
To get the best image that downloads fast and looks good use a photo editing application to resize the image. For instance, if you design a web page that is 800 pixels wide you can easily put an image on the page that is 450 pixels wide and still have room for text around the image.
By resizing the image to 450 pixels wide AND saving for the web you can reduce that image down to 40 KB, which even on dial-up will take only 5 seconds to download.
Editor’s Note: This post is pulled from Bret Ridgway and Frank Deardurff’s book “50 Biggest Website Mistakes,” available at http://50BiggestWebsiteMistakes.com.