Tutorials
How to resize your Images for Web use, or for emailing, using Adobe PhotoShop
The Darwin Camera Club Image Posting Rules state that any image posted here must be no longer than 600 pixels on the longest side. Furthermore, you're limited to an Image file size of no more than 100KB.
Larger sized images take longer to download & view, and it's almost never necessary to go above 100KB for an 600-pixel image that is intended to be viewed on a monitor only. (Dont attempt to "print" a 100K image file!)
#Note For anyone using Photoshop "Elements", I have made some notes on any differences you may encounter with this process at the very end of this tutorial.
Steps:
Resize The Image
The first thing you want to do is get the image so that it's 600 pixels on the longest side. The easiest way to do this is using Photoshop's Fit Image tool. In CS2 or CS3 this can be found by clicking on File... Automate... Fit Image. A small box will pop up saying "Constrain Within" and listing 2 boxes, Width and Height. Simply type in "600" in both boxes and click OK. Your image will be re-sized to 600 pixels on the longest side.
If you don't have Fit Image then you can click on Image... Image Size. You'll get the following box:
On the bottom left make sure that all 3 boxes are checked. For the resampling type I always use Bicubic. Bicubic Sharper is good for resizing images smaller, but I never use it because I like to control the sharpening and Bicubic Sharper doesn't allow you to change the sharpening strength or type.
In the top boxes, under Pixel Dimensions, change the Width to 600. You'll see that the Height changes automatically. If the Height is larger than 600 simply change that to 600 and the Width will change automatically.
Ignore all the other boxes, no matter what they say. Trust me. Just click OK and your image will resize.
Sharpen The Image
Next you want to view at 100%, so click on View... Actual Pixels or hit Control-Alt-0 (zero).
At this time you may or may not want to sharpen the image to suit this new size. I will not go into sharpening here - it's far too complicated for a quick tutorial. If your happy with how it looks so far, move to the next step.
Convert to sRGB
To make sure that the image's color display properly on the web you will want to convert to the sRGB colourspace. (If your working colourspace is already sRGB you can skip this.)
If your not sure what your working colourspace is continue with this next step.
The process for doing this changed in Photoshop CS2, and it's been a while since I used older versions of PS, but...
In PhotoShop CS or older: Click on Image... Mode... Convert to Profile...sRGB...
In PS CS2: Click on Edit...Convert to Profile...sRGB...
(#Note 1. In PS CS3 this step is unnecessary, as after you have resized the image to 600 pixels, the next step, "save for web and devices" will automatically convert the colourspace to sRGB.)
(#Note 2. If you are using versions of PS older than CS3, and the Image you are working with is a TIF file, you may have to convert it from 16bit to 8bit in order to then convert it to sRGB.
You can do this easily by clicking..Image...Mode...8bits/channel.)
- Phew,...easy so far!... Ok, go grab a fresh coffee, (or something stronger...), stretch your legs and then read on...
If you don't use PhotoShop CS3, a box will pop up with some options.
The options that I almost always use are shown here:
* Destination Space: sRGB IEC61966-2.1
* Engine: Adobe
* Intent: Perceptual
* Use Black Point Compensation: Checked
* Use Dither: Unchecked
* Flatten Image: Checked
(These last two might be grayed out. Don't worry.)
Preview The Color Changes
Check and uncheck the Preview box a few times to see if any color change is occurring. You should not be able to detect any change - well, you might but it's almost always very slight.
Click OK.
The Save For Web Dialog
Next click on File... Save For Web.
Along the top are 4 tabs. Click on "2-Up" which will display the original image (on the left) next to the image that will be saved.
Near the top right corner you'll have a box with choices of GIF, JPG, PNG, etc. Set it to JPG.
Below that uncheck both Progressive and ICC Profile.
To the right of that check Optimized.
Now look at the image on the right hand side. At the bottom left hand corner of this image you will see something like this:
As long as the number below "JPEG" is 100.00K or lower you're fine. But if it's larger, look back up near the top right corner, to the right of where you set JPEG, you'll see a box called Quality and it will probably say "100" in it but will say something between 1 and 100.
Click the arrow to the right of the number and a slider will pop up.
Grab the triangle and slide it until the size is below 100.00k.
Compare The Changes
Now check out the image on the right, which is what it will look like once you save. Does it look OK? Compare this to the original on the left.
You can use the tools on the left, Hand and Zoom, to scroll around or zoom in. You'll see that both images scroll or zoom simultaneously allowing to to compare. It's a very good idea to zoom in to compare and important feature, like a subject's eyes. I never zoom in more than once, which puts you at 200%.
So how do they compare? If the right image looks OK, and you're below 100.00K then you can just hit Save in the top right corner. But if the image doesn't look so great you may need to start all over again with a smaller image. Go back to the beginning of this tutorial, but instead of resizing to 600 pixels try 500 pixels. It may even take a few tries to get the image as small as possible while retaining quality.
Save The New Image
So once everything is set - 100.00K file size (or close enough) - and the image on the right looks good - click on the Save button in the top right corner. You'll be prompted for a file to save it into. I suggest you save this image into a folder you've created especially for all your "Website and Email Images"
I save my web images in a separate directory to make sure that these versions are kept separate from the originals.
This process should get you a great looking image at 600 pixels and 100 KB file size.
- I hope this tutorial was of help.
For any questions regarding this tutorial, ask Mark Hamilton either through the website contact page, or phone him on 0427206412.
____________________________________________________________________________________________________
Here's what the equivalent PhotoShop Elements 2 (PSE 2) functions are:
Resize The Image
Use Image > Resize -> Image Size.
Sharpen The Image
The tools in both PS and PSE are very similar. Use whatever suits you.
Convert to sRGB
PSE 2 does not give you the ability to convert colour spaces on the fly. You will need to be in the sRGB colour space before you start editing. To do this, go into Colour Settings and select Limited colour management - optimized for Web graphics.
Preview the Colour Changes
Not applicable in PSE.
The Save For Web Dialog
PSE 2 uses OK instead of Save.
You automatically get "2-up" with PSE 2.
Compare The Changes
Save The New Image
Click on OK, instead of Save.
Regards,
Mark Hamilton