Website Image Mistakes

One of the biggest mistakes I see website owners make is putting images on their website that are not 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. That 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 72dpi (dpi = dots per inch).

There are many applications that you can get to that will allow you to “Save for Web” which will reduce the image to this 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.

Take for example if you have a 7 megapixel camera and leave it at the default settings most likely that camera would take a picture that is 3072 pixels by 2304 pixels. Now compare that to your most common computer screen settings which are currently 1024 pixels by 768 pixels.

As you can see that is a huge difference in visual size. Now take into affect that the original image is also 1.8 Megabytes (MB) in size. Depending on the connection speed that image could take 4 minutes 29 seconds to download if the visitor was on dial-up and 39 seconds if on DSL.

Simply by “Saving for Web” I can reduce the file size to 594 Kilobytes (KB) which would reduce the download time to 1 minute 26 seconds on dial-up and 12 seconds on DSL. But that image would still be 3 times larger than your web browser. What some website owners do is to 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’sFrontPage (Now called Web Expressions) or Adobe’sDreamweaver 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 I design a web page that is 800 pixels wide I 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 I can reduce that image down to 40 KB which even on dial-up will take only 5 seconds to download.

For example the image below started out as a 7 megapixel ditigal photo I took this past fall with the file size starting at 1.7 MB. I’ve reduced it to the specifications above, (450 pixels at 72 dpi) and now the image is only 40 KB and should load quite fast in your browser.

 

I hope you found this post use full for your online business.

Until next time I wish you all the best and much success in everything you do!

Frank Deardurff – That One Web Guy!