Better photos for the web

What will you learn?
This is a technical how-to for creating proper photo files for internet viewing. This means pictures that aren’t too large (which slows the download process) or fuzzy and are in the right format! We will not be going in to how to take better photos, there are lots of web sites to help you there. Here, you will learn:

What is a Pixel? Dot? Resolution?
Different file types
How to get the photo into your computer
Open your photograph
   -Resolution and softening the photo
   - Sharpen the image just right
   - Save it as a JPG

What is a Pixel? Dot? Resolution?
Basically, pixels and dots mean the same thing. If you were to look at a photo printed in a magazine up close with a magnifying glass, you would see that it’s made up of lots and lot of dots – also known as pixels. How many dots or pixels there are crowded in one inch of space is resolution – in terms of dots-per-inch or DPI.

Magazines, brochures, catalogs and other high-end printed materials are produced at a resolution of 300DPI. Photos viewed on the web are reproduced at only 72DPI! That’s right, only about a quarter of the resolution. Why, because at 100% view, your monitor only sees 72DPI, so anything higher, would be a waste of file space and take longer to download.

Now, what happens is that if you view a photo on your monitor at 100% of actual size, a 72DPI photo will look just as good as a 300DPI picture. Remember, if a monitor can only show 72 pixels pixels for every inch, the extra pixels in the higher resolution photo just don’t show up.

For example: Here is a photo of an adorable dog. It’s 3” wide at a resolution of 72DPI. If you would like to download the same image at 300DPI, click here. The lower resolution image is only 76Kb and the one you can download is 132Kb, but you won’t see a difference on your monitor. Now print out both images, that’s when you’ll see one photo isn’t as sharp and clear as the higher resolution picture.

Now enlarge the 72DPI photo and that’s when you see the lower resolution image start to pixelate, get fuzzy and have ragged edges while the 300DPI image will still look sharp.

Now you understand why you can’t take a picture or graphic off a web site and reproduce it onto a brochure. It looks fine on a monitor, but the resolution is not high enough to print. So why not just increase the resolution in a program like Adobe Photoshop? All you would be doing is producing a high resolution of a low resolution image! In other words, if a 300DPI image has four times as many dots than a 72DPI graphic, you’ll be trying to add 3 more dots for every one that already exists – what color or shade should they be? It just won’t work.
 

Different file types
Now that you’re an expert on pixels, what type of file image do you have?

Most cameras produce JPG images although some can capture photos as TIFs and RAW files. Most scanners will save images as TIFs. The acronym for each file type is not important, but their definitions are:

• JPG - this is a LOSSY file type. In other words, you lose quality for compression. The more you compress the file, the more data is lost to make the file smaller! So, every time you open a JPG, do something to it, then re-save it, you lose even more pixels in the process. It’s always best to save the original file in a safe place and work on a copy. The advantage of a JPG is that it can be seen using any web browser. The downside is that you have to make a choice between quality and compression when you save the file. 

dog-72.jpg dog-300.jpg DPI.jpg

• TIF - this type of file is LOSSLESS – it keeps all the data intact. This is best to keep as an original and use a copy for adjustments. The advantage of a TIF is that you never lose quality no matter how many times you open and resave it. The disadvantage is that internet browsers can’t see a TIF.

• RAW - this file is not converted into either a JPG or TIF. Not all software programs can see a RAW file, but as the name implies, nothing is done to the file so you have the opportunity to modify the image as you please. Not for internet usage.

• GIF - this internet ready file type is best used for solid color graphics such as logos. It can’t hold all the colors and shading as a JPG can, so it’s usually not used for photographs.

How to get the photo into the computer

• Scanner:
It’s best to scan the image so the final photo is at a resolution of 150DPI at 100% size that you are looking for. I know this will be twice the 72DPI we talked about earlier, but you’ll see why later. I am going to guess you know how to use your scanner and its software.

• Using a Camera:
Most digital cameras save at different quality levels and file sizes, so set it according to what you plan to do with the photo. If you want to print the pictures, then set it for high quality. If you only plan to use them for the internet, a lower file size would be a better choice. Remember, you can always shrink an image, but you can’t always enlarge it without loss of quality. Now if you’re not sure how to get it into your computer, read the manual!

Open the photograph

#1) Open your photo adjusting software. In these examples, we’ll be using Adobe Photoshop.

#2) Go to File>Open and open your original photograph.

#3) Now use the “Save As” command to protect the original photo. Give this file a different name so the original will stay untouched and save it as a native Photoshop file “.PSD”. Rememb er, if you save it as a JPG, you will lose quality right away. If your software won’t allow you to save it as PSD file, try TIF, that’s just as safe. If your only choice is a JPG, then do the following:
– Do not open the file in your software program
– Create a folder and name it Internet Ready (or any name you want)
– Find the original image file on your computer
– Drag it and make a duplicate/copy of it into the Internet Ready folder you just created
– Now, open your photo adjusting software and open the new file

#4) Now go ahead and make any necessary adjustments to the brightness, contrast and color balance. And, don’t forget to crop the photo or to cut out any one who no longer belongs to the family!

#5) If you can, save this file as a PSD file. If you can’t just move on to the next step.

Resolution and softening the photo

#1) Here, we start playing with the resolution of the image.

• If you scanned your image, it should be the size you want it to be for the internet at a resolution of 150DPI. Using Photoshop, go to Image>Image Size. The following dialog box will open. Adjust the settings as follows:
– Resolution = Pixels/Inch
– Resample Image should be checked and it should read Bicubic.
– Change the Resolution from 150 to 72DPI
– Click OK.

What will happen is that the image will soften up as half the pixels are squished with the other half.

• If you downloaded the image from a camera, you will need to size the image to what you would like it to be. Using Photoshop, go to Image>Image Size. The following dialog box will open. Adjust the settings as follows:
– Resolution = Pixels/Inch
– Resample Image should be checked and it should read Bicubic
– Change either the Width or Height to what you would like it to be
– If the Resolution doesn’t read 72DPI, make that change as well
– Click OK.

What will happen is that the image will soften up as the pixels are squished together.

Sharpen the image just right

After softening the photo, we now need to sharpen it. I know what you’re thinking, “Why soften it in the first place if we have to sharpen it later?”. Because if we start with a 72DPI photo at the correct size right from the start, it’s usually too sharp and doesn’t look good on the internet.

#1) Using Photoshop, go to Filter>Sharpen>Unsharp mask to sharpen the image. Yea, no one is quite sure why Adobe insists on calling a sharpening filter an Unsharp mask! Try these settings:
– Amount 250%
– Radius 0.3 pixels
– Threshold 6 levels.

It’s a good place to start. If you don’t have Photoshop, there should be some way for you to sharpen the image.

Save it as a JPG

Here is the most important step. Remember, JPG images are lossy, which means when you save it, you lose pixels to make the image smaller for faster downloads. In Photoshop, you can adjust how much quality vs. compression you would like. For the internet, I find using middle of the road to be perfect.

#1) Go to Save>Save As.

#2) Name the file as you wish and choose JPG as the Format. Click Save.

#3) You’ll see a dialog box open up titled: JPEG Options. Use the following settings:
– Matte = None
– Image Options = 6
– Format Options = Progressive
– Scans = 5
– Click OK.

That’s it!