Images on your Website

Getting images off your camera and onto your web site

Transcript:

Today we’re going to talk about getting photographs off your digital camera and onto your web site.

Let’s say you’ve got a nice digital camera with lots of MegaPixels. Newer cameras will let you take a picture with such high resolution that you could print a poster with it. I hate to tell you this, but if you’re going to put that picture on your web site, you’re going to have to throw away most of those pixels.

A pixel is just a dot. It's a dot on your screen, it's a dot on a printed page. When you print your pictures, you want to have lots of those dots. When you look at them on a computer screen, you want to have very few of them. Your screen can only show about 75 to 100 of them for every inch of viewing space. Exactly how many depends on the resolution of your screen. Older monitors, for example, show 72 dots every inch, but newer monitors, particularly the newer flat-screen monitors, show more like 85-90 dpi.

Your printer
If your home printer prints, lets say, at a standard 300 dots per inch, then you're going to need 90,000 dots to print a single square inch. Your office printer usually prints at a higher quality 600 dpi, so for that you need 360,000 dots for a square inch. Multiply that out, and you get about three square inches of high-quality print, or about ten square inches of standard quality print, for one million pixels. A Megapixel -- that’s one million pixels. Your camera, if you got it recently, probably does three to twelve million pixels per picture, so you can probably print very nice pictures with it.

However.

You don't really need that many dots for a screen. How many? Only about 5,000 to 8,000 for a square inch, as opposed to the 90,000 to 360,000 for printing. If you have 90,000 pixels (one square inch printed on a standard printer), it will be about 11 inches square on an older monitor and about 8 inches square on a newer monitor. If you had a regular 4x5 inch photograph at standard printing resolution of 300 dpi, it would be bigger than your computer screen, if you displayed it on the screen, or something like 16”X20” on an older monitor. And that’s just a small 4x5” picture like you’d get from a mere 2 Megapixel camera.

You can use HTML to force your browser to resize your picture so you don’t have to scroll around, but that causes two problems. The first problem is that your browser doesn’t do a great job of throwing away pixels, so the picture won’t be as high quality as you’d like, and the second problem is that reducing the display size in your browser does not reduce the file size of the picture. Lots of pixels means lots of download time. If you don’t do something to reduce the file size of your images, you are going to be sending a huge file down a very small pipe, and the picture will take for-ev-er to display on your user’s computer. It will come in ver-y slow-ly…

So, clearly, we need to make that picture smaller somehow.

However, before we can make it smaller, we have to get it on to your computer. Then we are going to be using a graphics program to throw away some of those pesky pixels.

Connecting your camera to your PC
Most cameras come with some sort of connector. I hope you’ve kept all the parts and the documentation that came with your camera – I tend to keep everything I’m not using, including a copy of the sales receipt, in the original box, if possible. Get out those little parts and figure out where they plug in to your computer. If you’ve got a USB connector, one end will look like a small, flat plug about the size of a large thumbnail. You’ll plug it into a flat rectangular hole on your computer which is probably somewhere on the side or back of your computer. There’s a little picture on one side of the plug that looks like a kind of squiggly trident – that side usually goes up. If your camera stores pictures on a card of some kind, you’ll either have somewhere on your computer that it slides into, or you’ll need a card carrier of some kind, which may or may not be supplied with your camera. Read the documentation to find out. My favorite card type is the PCMCIA card, because "PCMCIA" is an acronym for “People Can’t Memorize Computer Industry Acronyms.” I've always liked that. You’ll put the card into the card carrier, and slip the carrier into the appropriate slot on your computer.

At that point, your computer should recognize the new device and allow you to use the File Manager, Finder, or Explorer to see the picture files on the device that you have put in. Figure out where you’re going to put the pictures on your computer and select all the pictures from your camera. Drag them to the waiting directory you have prepared to receive them, and wait while they get copied over. Once you check to make sure the directory on your computer has all the files from your camera, you can delete the pictures from your camera or from the card.

After viewing the pictures, select the ones you want to keep (you don't want to keep all 75 of them, trust me) and copy those, the selected ones, to a folder inside the Working Files folder of your web site. It's a good idea to have some kind of folder that you call something like Working Files or Source Files, something like that, where you put all the things that you bring in that you're going to work with, but that will not necessarily appear as a big file on your web site.

At this point you may want to rename the pictures. If you've selected carefully you won't have that many, and you rename them so you know which ones they are. Name them something descriptive, and add a month and a year if possible. Don't use spaces in the name – really, you don't want to do that - use hyphens and underscores if you want to keep the names clear, but don't use spaces. Some web servers do screwy things with spaces.

Using a graphics program
Now comes the fun part. You open a graphics program. You may have one that came with your camera, or you may have Photoshop, which is the top-of-the-line graphics program - very expensive, however, so a good inexpensive alternative to Photoshop is Photoshop Elements. There are several other really good programs out there, and some of them are even open source, which means that they are free if you use them correctly. Gimp, for example, has been around for years and comes highly recommended.

There are three ways to reduce the file size of your images.
1. Make the whole picture smaller.
2. Use only a part of the picture by cropping out what you don’t want.
3. Set the optimum level of compression. More on tha

To make the whole picture smaller (let's say, instead of 1200 by 1600 pixels,you make it 300 by 400 pixels ) choose something in your program which will sound something like “image size”. You can set the absolute size by number of pixels, or you can set a percentage, say 50% of the pixels. If you set the absolute size, be sure you are maintaining the aspect ratio (the ratio of the height to the width). Most programs do this automatically, but if it gives you the choice, take it.

To crop a picture, in case you want to throw some parts of the picture away, look around for a tool on the toolbar that probably looks like the outline of a rectangle, possibly with a dashed border, often called the marquee tool. It may also look like a couple of overlapping right angles, and be called a crop tool. Either one works fine. The crop tool is faster, but the marquee tools lets you see what you’re going to do and give you a chance to change your mind. You may want to try different croppings until you like what you have left.

You select the level of compression when you save the image. There are three kinds of compression in wide use on the Internet these days, but for photographs, the best one remains “.jpg” compression. The files you get off your camera are probably jpg files, but with not much compression. Your graphics program will let you set the compression from 1 to 10, or possibly from 10% to 100%, with the lower number being the smaller file size, but also the lower quality. What you want is the lowest file size with acceptable quality. It's a balancing act. Each picture could be tweaked for the right balance of file size and quality, or you can be lazy, excuse me, efficient, and find the one that usually works best for you. For years I have used 6 or 60%, but have lately switched to 7 or 70% because of generally faster Internet connections and better monitors, which can take advantage of slightly better images.

If you put smaller, cropped pictures saved with optimized compression on your web site, you can give all the visitors to your web site a better experience.

If you want to review these suggestions, and see pictures of them in action, please see our web site at www.extramile.com/optimize.

This podcast was recorded on November 29, 2006.