Web Design - Optimizing Images For the Web

A friend of mine is an artist and wanted to show me his website and give my opinions. Knowing that I would be painfully truthful, he respected my feedback.

So, upon typing in his website address it became glaringly apparent that he went with a template driven site. What has the world come to, if a creative person such as my friend has to use a template driven website? Where did one's creativity go?

The task of watching all of his images slowly load onto my computer screen was worse than listening to nails screeching down a chalkboard. I was also envisioning how many people had already visited his website and were frustrated and decided to surf elsewhere when it took too long for his pages to load.

Doing a few simple steps can help your pages (especially if you have lots of images) download quicker:

1. Use Flash. Flash is a great medium in which to showcase artwork, photography or a large amount of images. Just keep in mind that the size of the image should already be the appropriate size for the Flash asset. Don't edit the size of the image once it's on your stage because if the image is 1MB and resized, it will always be 1MB, but just a smaller version of 1MB. Bottom line on this is optimize and reduce your image size before you import it into Flash.

2. Optimize your images for web use. Whenever I use images on any site I design, I always resize the image to be optimally effective for the internet. The best way to do this is to use Photoshop. Here are the steps: 
a. In Photoshop with your image open, choose File > Save For Web and Devices. 
b. Click on the Optimized tab at the top of the window 
c. On the right side of the window, there is a drop down menu for the type of file you want to save your image to. This can either be in JPEG, PNG or GIF format. JPEG and PNG files are great for photography while GIF formats are typically used for either vector shaped graphics or images which do not contain a lot of color. 
d. Once you've chosen your format, change your image size toward the bottom of the window. This would be the pixel width and height required for either your web page or Flash asset. 
e. Hit the enter key and then look at the amount of kilobytes your image has been reduced to in the lower left corner of the window. What was probably a 1.2 MB file has now been reduced to more like 56k. Talk about speeding up the download of your web page! 
f. Hit the save button, rename the image and then put this in a folder where you would keep your other images for your web page and use accordingly.

What's also nice about this particular feature in Photoshop is that you can always preview your image on a browser by clicking on the Preview button. Additionally, a "Device Central" button is available so you can see what your image would look like on a vast array of portable devices.

ShareThis