Sunday, August 12, 2007

Pics on the Web


Using Your Bandwidth Wisely

Coming from someone who loves to surf the internet, let me tell you, pictures are where it's at. Don't get me wrong, I do love words. But throwing up a bunch of text will send people running from your website. It's like reading the old Wall Street Journal. People who read that do so because they want money or are trying to maintain what they have. The Journal didn't need to gloss things up very much. Though in recent years they have discovered color. Probably because of newspapers like The USA Today. Notice on the right, the newer look Journal with images at the top spotlighting stories inside, the shaded text box and a color graph. Big deal you say? On the right you can see an older edition with it's buttoned up look. In the dictionary under "Drab" it says see the Wall Street Journal of old. The USA Today, which (for my international friends) is a satellite delivered national newspaper, delivered around the United States, and only printed Monday-Friday. It is full of color and pictures and all sorts of things that catch your eye and organize your reading. You can see the paper uses much bolder colors. Life can be dreary enough without our help. It used to be that the main reason papers didn't use color (and some still don't) is because of the extra cost in printing. Full color print jobs require four press runs (Cyan-Yellow-Magenta -K-black) to get the effect of the full spectrum of colors. You've heard of a red letter day? This comes from the days when the main story headline in a newspaper was printed not in bold black letters, but in bold red letters. This costly event was saved for such things as VJ-Day or Roosevelt Wins.

Welcome to the age of computers. While the first computers where just white text on a blue or black screen, we are now in the age of color monitors. The first web pages were designed to look like newspapers. You might recognize the characteristics. A headline at the top of the page. Stories often in columns. Links are placed along the top of the page (like the spotlights of further content, something initiated by the USA Today I believe). Interesting additional content is place on the left or right side of the page. This mimics the sidebar story.

So, being that nothing adds color to our lives like color in the form of colorful pictures, my word to you is to use colorful pictures on your blog/websites. It costs nothing more than black text on a white background.

But you say wait a minute. There is a limited amount of memory I am aloud, or there is a limited amount of bandwidth to upload content. Let me click upload, and then go and
fix a cup of coffee while I wait for it to complete. There is something you can do in Photoshop which is a wonderful thing. The folks over at Adobe have done a great job on this program. If you have it then you should use it to its fullest.

I was looking at a photo online. The size online was 167 KB. The photo was placed in a blog where it was just sitting there sucking sweet bandwidth. The person very rightly had adjusted the pixel size of the photo to 72 dpi. This is about as small as you want to go before you picture starts pixelating (spreading out, looking ugly--this is a work despite what Webster's has to day).

The problem was that the picture's original dimension were like 8 inches by 5 inches or something. The HTML code of the page was telling the photo to fit into a space half that siz
e. So, the larger document was being downloaded, then the viewers computer has to resize the picture to fit it into the space. This is just piling on web page load time.

In Photoshop I resized the picture to about 60 percent of the original. That dropped the file sized form 167 KBs down to about 103 KBs.

But that is not the last step. The geniuses over at Adobe have this magic wizard save button. Under the File tab, there is a choice "Save For Web." I think the new Photoshop calls it "Save for Web/Mobile Device" or something like that. Anyway, it is just under the normal "Save," "Save As," "Save Version" choices. Choose this and a working box will open up. You can choose "two up" or "four up," and then decide which version is best for you. Play with the choices and see what you get. This final adjustment reduced the pictures file size to 36 KBs.

Look at the 3 photos on the right. To be honest, at this point I am not sure which is which after moving them around a couple of times, but it doesn't matter. I don't think you can
see a difference. One is the original photo which I simply linked to, another is the 103 KB file, and one is the 36kb file.

The message here is use color, use photos, but do it smartly. Save everybody some bandwidth.

No comments:

Korean Flash Cards