Reducing Image Size For The Web
From Tutiki
by sjlarue
Contents |
Disclaimer
This Tutorial is designed for the beginner Photoshop CS3 user. But the concept should also work in Elements and other photo editing software.
Intro
I used to have a dial-up(DU) connection...Now I have Cable :~). The problem with DU is download speeds for picture files...Even when using [img] tags, your download times can be pretty long if there are multiple images.
Also some online forums (thankfully not the Cafe') require you to attach photo's to your post...under 100kb. The reason is simple, you are storing your picture on their sight and they don't want to take up bandwidth and storage space on thousands of 300k images.
I have come to a realization that like everyone else getting and image down to the proper size was tedious to say the least. I realized that I was thinking the wrong way. I was thinking as a photographer not a computer "geek". I was cropping everything down as a print not an image.
When you crop in Photoshop, you are given a choice between all different sorts of measures; percent, English, Metric, and pixels. I was always cropping in English or inches...because I am thinking print not image.
Take this image for example:
This little bunny was a cute little critter that I saw while looking for birds one morning. I won't say how close I was, only that the bunny was stupid. This is a full frame image taken from my D300 as a RAW file. The only adjustments were done in Adobe Camera Raw with no crop. I shoot raw for one reason only..I sometimes screw up the white balance and ACR lets me correct it instantly. The original image size was 3072x2040 px at 300ppi
Here is same image cropped as a 4x6 with the same 300ppi.
In order for this image to be under my 100kb limit, I had to save it at a quality level of 2. As an aside, when I first tried to crop it, I left the resolution clear and the picture had a ppi of 510. It would not save less than 100kb no mater what setting I used. As you can see, this is great for prints, but not so much for images that you want to get under a 100kb. You will notice that neither of these images are not anywhere close to looking like a 4x6.
Whats wrong with these you may ask? If you look closely especially the first one, you will see pixelation happening in the BG. This was because I had to save it at such a high compression to get it under 100 kb that image quality suffered.
The Tutorial
To begin with, this tutorial is assuming that the image wasn't cruddy to begin with. A bad image will remain a bad image no mater what you do. Also use the extra memory and take you pictures with the highest quality available. Yes your card will fill up faster, but you images will be more...forgiving.
This concept of reducing the size of the file will work on all images, I am using 800px and 100kb here just as an example. But it could also just as easily be 600 px or 1000 px and 200 kb. It's the concept of reducing a file to the lowest possible size without considerable loss of quality.
The tutorial for this is simple and explaining it has taken longer than the actual tutorial will be.
1. Open image in Photoshop. (I personally crop the image in ACR with a 2x3 ratio so I don't have to later. You are cropping pixels so your ppi will remain the same. Just for the purposes of this tutorial make sure that it is above 800 pix)
2. After doing all of the alterations that you want to do; color correction, curves and the like. If you haven't cropped already in ACR then go ahead and use your crop tool but change the measure to pixels. For the purpose of my tutorial it is 800 px x 530 px which is basically a 2:3 ratio. Crop your photo.
3. Save as jpeg and slide your quality slider down till it is below 100kb for me that was a more than acceptable level 7. It says that it is over 100 kb but when you look at the actual file, it is under 100kb.
I should point out that visually a 4x6 is closer to 400x600, but this was to demonstrate that you can reduce a larger ending image and not sacrifice quality that much. Here is a 400x600 with the quality slider now at 9. finished product is still under 100kb.
Why it works
If you have an Exif reader, you will notice that on all of these images the resolution is 300 ppi. Your screen's resolution is 72ppi. So you almost quadruple the visual size of the ending image by keeping the ppi the same. Here is a 400x600 with 72dpi resolution...notice it's visually smaller. It's basically the same crop area as the one above, just different resolution.
One other point for those that are satisfied with the in camera crop or have pre cropped like me, Photoshop (CS3) has a fit image command under File>Automate. Just set width and hight to 800px or 1000 px or 600 px, whatever, and it does everything automatically.
Conclusion
When posting an image to the web crop pixels and keep your ppi the same as your original file.
I hope that this helps you with the images that you post to the web.
Dave Dickerson 21:36, 30 July 2008 (CDT)
