A friend of mine, I'll call him Dave, recently alerted me to the fact that some lesser-bandwidth having users may not be able to view my website pages as quickly as they'd like. Reason: my images were too large.
I know from my own experience as a web surfer that web pages which delay in loading cause me to commit the deplorable act of Clicking Away, even if whatever I was previously reading had me hanging on the edge of my ergonomic computer seat. So if you'd like to retain your readership, you might consider shrinking down your website's images as well.
I personally use MacroMedia's Dreamweaver to design my websites, along with which is accompanied by a handy little photo editing program called FireWorks. Whether you use FireWorks or another photo editing program, you'll find that most work in generally the same way. Similar to Photoshop, FireWorks lets you bastardize photo images in all the usual ways, including image duplication, skew, stretch, smudge, smear, slice, dice, colorize, lighten, darken, deface, and any other way you can think of to corrupt your once-pristine pictures.
So... naturally, with all of this image control at my fingertips, I've been doing some godawful things to my fellow online marketers' photos as well as having a grand old time honing my header-creation skills. If you're an internet marketer worth your salt, you will recognize that photo manipulation is an incredibly handy skill, one that can keep actual money in your pocket (as opposed to photos of dollar bills that you took digital pictures of and uploaded to your website lest you forget what *real* money looks like).
So, the point, which was that there's a final step to this photo manipulation madness, and that is to compress or shrink the image file before exporting it to the Web. For the advanced photo editors among us, there are more complicated ways to compress image files; for example, reducing the quality of the background while retaining the pixel density of the main subject, which of course would serve double-duty in your quest for high-quality images which also achieve that quick upload characteristic. If you wish to poke around in your FireWorks or other standard photo editing program for the most comprehensive tutorial, you can start by searching for the terms FILE COMPRESSION, .jpg, .gif in the HELP section of whatever program you're using.
Ideally, your files should be less than 30KB for quickest loading time. Additionally, the number of pixels across should be equivalent to the pixel width you've designated for the image on your actual web page. What this means: if you'd like to upload a photo of yourself on your website which is sized at, say, 600 pixels wide, and you plan to size the photo on the page at 120 pixels wide (standard for professional head shots), then you should go back to the original image file and RESAVE a smaller version of it which is also set at 120 pixels wide. Otherwise, the web program is forced to do the calculation and file reduction on its own, which of course takes up precious seconds and that's what we're trying to avoid in the first place.
For all intents and purposes, what follows is a very basic method for reducing the size of your website's image files so that they're easily viewable by even the lesser bandwidth-havers among us. In doing this, you will please your patience-lacking readers and cause the Google gods to smile favorably upon you, bestowing better page rank for your site.
Basic File Compression in MacroMedia FireWorks
After you're satisfied with the design of your image, do this:
1. Go to FILE>Export Wizard. Check off Target Export file (shown a little box at the bottom).
2. Type in 17k or 28k (or some other size) into the box where the measurement goes).
3. FireWorks will ask you: "Where is this graphic going from FireWorks?" Check off: the web.
4. Click EXIT - you will then be transported to a preview screen where you can see both a .gif and a .jpeg sample of the image.
5. Typically, select .jpg, as jpeg files are the standard compressed file type, compatible with most web browsers and programs.
Note: In some cases, you may need to save your file as a .gif. One example: if your file requires a transparent background as opposed to being encased in a white rectangle. Examples of where transparency may be needed: your logo, a silhouetted head shot of yourself, or anywhere that you'd simply prefer not to have a border around your photo. Jpeg files do not allow for transparency (otherwise known as masking, or "silo shots" in the design industry).
6. Click Export, save to the proper file destination using an appropriate identifying naming convention, and you're done. Next time you click the file you will see that it's been shrunk to the size you indicated. If it's not, repeat the process. Your web editing program should indicate the file size, in KB, of every photo you click on, before you even upload it.
Of course, there is a more complicated and customizable way to do this, but again, this method works just fine for the Web Design Rookie. I for one am just happy to have the Wizard helping me out!
Copyright 2006 Dina Giolitto. All rights reserved.
Liked this article? Have more of the same emailed to your inbox each month. Sign up for the Copywriting and Marketing Ezine from Dina at Wordfeeder.com and learn to write search engine friendly web copy and market your web based business for free.