How to save images for the web using Photoshop™
Resizing and optimizing images for the web can be very straightforward if done in a careful and methodical manner. Bear in mind you should only resize (resample) large images smaller, rather than small images larger, and is better to resize in one step rather than three.
There are a few basic formats that you can safely use cross-browser. One type is GIF (graphics interchange format) and the other is JPEG (joint photographic experts group). There are others such as PNG, and WBMP but there are issues with these that mean they are not quite as straightforward.
They are as they sound - mostly GIF is for graphics and JPEG is for photographs. Please note: Web JPEGs are a lot smaller that the JPEGs you use for print and on your PC.
To save a JPEG for the web
Step 1.
Open your image in photoshop and ensure the colour mode is set to RGB. In the menu - IMAGE > MODE > RGB.
Step 2.
Crop your image so that you only have the area that you really need, by using the crop tool. Press the key C to see which one this is.
Step 3.
Next, go to IMAGE > IMAGE SIZE... and FIRST type in 72 pixels/inch in the resolution field, ensure Constrain Proportions and Resample Image are both checked ON.
Step 4.
Now, type in the desired width of the image in the top field, eg. 120 pixels. Double check that all the fields are still filled in correctly then click OK.
Step 5.
Your image will be resized, and when viewed in photoshop at 100%, it is the exact size it will be in your web page. Next, select FILE > SAVE FOR WEB...
Step 6.
A new window will open, titled Powered By ImageReady. For JPEG, select JPEG in the pulldown menu just under the word Preset on the right.
Step 7.
Click Optimized ON, Blur to 0, Matte is blank, Progressive is OFF and ICC profile is OFF.
Step 8.
The Quality setting (compression) can vary from image to image, and is reflected in the file size (bottom left). The idea is to get the file size as low as you can without the image suffering too much. A good quality setting is about 60 and will suffice for most photographs.
Step 9.
Click SAVE and save the new file to your hard drive. Save As Type - Images Only. Then save. NOTE: Be careful not to save over this file when exiting the original file in photoshop.
To save a GIF for the web
Step 1.
Open your image in photoshop and ensure the colour mode is set to RGB. In the menu - IMAGE > MODE > RGB.
Step 2.
Crop your image so that you only have the area that you really need, by using the crop tool. Press the key C to see which one this is.
Step 3.
Next, go to IMAGE > IMAGE SIZE... and FIRST type in 72 pixels/inch in the resolution field, ensure Constrain Proportions and Resample Image are both checked ON.
Step 4.
Now, type in the desired width of the image in the top field, eg. 120 pixels. Double check that all the fields are still filled in correctly then click OK.
Step 5.
Your image will be resized, and when viewed in photoshop at 100%, it is the exact size it will be in your web page. Next, select FILE > SAVE FOR WEB...
Step 6.
A new window will open, titled Powered By ImageReady. For GIF, select GIF in the pulldown menu just under the word Preset on the right.
Step 7.
The settings for GIFs vary greatly and depending a lot on the image. The idea of optimizing GIFs is to use the minimum amount of colours to display your graphic file without the image suffering too much.
Step 8.
Try going through the Preset Menu at the top to see the different effect of the settings on your image, sometimes you have to sacrifice quality for speed. A quick rule of thumb is to take the quality down until it is too bad then just come back up a bit.
Step 9.
Click SAVE and save the new file to your hard drive. Save As Type - Images Only. Then save. NOTE: Be careful not to save over this file when exiting the original file in photoshop.
|
