Optimizing Images for Web and PowerPoint using Adobe Photoshop | Study Guides, Projects, Research Photoshop

Optimizing Your Images for the Web with

Adobe Photoshop

This is a short tutorial to help you optimize your images for the web. (Thank you, Tonia Malone,

for allowing me to use a portion of your tutorial here!)

CROPPING AND IMAGE SIZE:

When placing an image on a web pag e your image should be only as large as it needs to be to

display correctly on the page. If your image is too large (800 x 600) and you resize it within the

Dreamweaver application by draggi ng its corners, the file size is not red uced, just the visual

size of the image. If you reduce the image size in Photoshop to display the correct size on the

web page, you can save file space/size and allow the viewer to view the image much quicker.

(For example: An image sized at 800 x 600 could be a 2MB file. If that file is reduced to the size

needed on the page, e.g., 360 x 413, the file size can be brought down to 436k. This file is

easier for someone to view on a web page through their network connection and saves space on

the server.

You may also crop an image to re move extraneous content of the image that you may wish to

eliminate. If you wish to crop content, it is always best to crop first and then resize the image.

1. Open Photos hop.

2. From the File menu, select Open a nd navigate to the photo you wish to resize. For the

purpose of this tutorial, navigate to the images folder of this tutorial and select the

image called 01_female_faculty_original.jpg or 03_male_faculty_original.jpg (Do NOT

select 02_female_faculty_small.jpg or 04_male_faculty_small.jpg since these are the

finished products already cropped a nd resized.)

3. If the image is large, Photoshop ma y open the image at a smaller percentage such as

25% or 33%. Make sure your image is at 100% size by clicking on the per centage

number at the b ottom left of the i mage and changing the value to 100% and then hit

Enter to set it at this size.

4. Select the Crop Tool in Photoshop

5. Click and drag the Crop Tool over the image to select the area you wish to KEEP.

6. Select Image > Crop and the image will be cropped.

7. If you feel the c olor isn’t quite right, try changing the Auto Levels by choosing Image >

Adjustments > Auto Levels… Click Edit > Undo if you don’t like the change.

8. Now let’s change the size of the image. From the Image menu, choose Image Size.

9. Set the Resolution to 72 dpi. We recommend that images be saved at 72 dpi for web

viewing since a web page is only displayed from a computer monitor at 72 dpi

(technically, 96 dpi on PC monitors but most web developers still set dpi at 72).

10. Make sure the Constrain Proportions box is checked to keep the image size

proportional. Change the Document Size Width and Height to the size needed for the

web page. For the purpose of this tutorial, change the Width to 200 pixels and the

height will adjust proportionally on its own. Click the OK button.

Partial preview of the text

Download Optimizing Images for Web and PowerPoint using Adobe Photoshop and more Study Guides, Projects, Research Photoshop in PDF only on Docsity!

Optimizing Yo ur Imag es fo r the Web with

Adobe Photoshop

This is a short tutorial to help you optimize your images for the web. (Thank you, Tonia Malone, for allowing me to use a portion of your tutorial here!)

CROPPING AND IMAGE SIZE:

When placing an image on a web page your image should be only as large as it needs to be to display correctly on the page. If your image is too large (800 x 600) and you resize it within the Dreamweaver application by dragging its corners, the file size is not reduced, just the visual size of the image. If you reduce the image size in Photoshop to display the correct size on the web page, you can save file space/size and allow the viewer to view the image much quicker. (For example: An image sized at 800 x 600 could be a 2MB file. If that file is reduced to the size needed on the page, e.g., 360 x 413, the file size can be brought down to 436k. This file is easier for someone to view on a web page through their network connection and saves space on the server. You may also crop an image to remove extraneous content of the image that you may wish to eliminate. If you wish to crop content, it is always best to crop first and then resize the image.

1. Open Photoshop.

From the File menu, select Open and navigate to the photo you wish to resize. For the purpose of this tutorial, navigate to the images folder of this tutorial and select the image called 01_female_faculty_original.jpg or 03_male_faculty_original.jpg (Do NOT select 02_female_faculty_small.jpg or 04_male_faculty_small.jpg since these are the finished products already cropped and resized.)
If the image is large, Photoshop may open the image at a smaller percentage such as 25% or 33%. Make sure your image is at 100% size by clicking on the percentage number at the bottom left of the image and changing the value to 100% and then hit Enter to set it at this size.
Select the Crop Tool in Photoshop
Click and drag the Crop Tool over the image to select the area you wish to KEEP.
Select Image > Crop and the image will be cropped.
If you feel the color isn’t quite right, try changing the Auto Levels by choosing Image > Adjustments > Auto Levels… Click Edit > Undo if you don’t like the change.
Now let’s change the size of the image. From the Image menu, choose Image Size.
Set the Resolution to 72 dpi. We recommend that images be saved at 72 dpi for web viewing since a web page is only displayed from a computer monitor at 72 dpi (technically, 96 dpi on PC monitors but most web developers still set dpi at 72).
Make sure the Constrain Proportions box is checked to keep the image size proportional. Change the Document Size Width and Height to the size needed for the web page. For the purpose of this tutorial, change the Width to 200 pixels and the height will adjust proportionally on its own. Click the OK button.

SAVING AS A JPG/GIF:

To save a file for the web it is best to use the Save for Web tool in Photoshop. This will allow you to save a jpg or a gif file that is optimized for the web and your viewers.

From the File menu in Photoshop, choose Save for Web.
Click on the 4 - Up Tab. This will allow you to see four images on the page, the original and three other possibilities. There you can make one box a gif and the other a jpg and play with the Quality and Colors (i.e., 8 colors versus 256 colors). Select a box by clicking on it and changing its values. You may not need a 100% JPG; it may look just as good at 60%, which will result in a much smaller file size. Sometimes GIF files can be brought down from 256 colors to 64 colors. Play with the settings and find a good compromise in quality and size for optimal page download time. Note: JPG is generally chosen for photographs (shadows, people, buildings, etc.); GIF is usually chosen for solid colors (logos, flat art, cartoons, drawings, transparent images, etc.)
The images for this tutorial, 01_female_faculty_original.jpg or 03_male_faculty_original.jpg , will work well saved as a JPG at 75 Quality.
Click the Save button and save the edited image file with a new name to the images folder (e.g., female_faculty_small.jpg or male_faculty_small.jpg ) Note: Use a new name so you don’t overwrite your original image in case you want it uncropped and at its original size for some other project in the future.

Opti mizing Yo ur Imag es fo r Po werPoint

There seems to be a lot of confusion about how to format images properly for PowerPoint, especially images that have been scanned from a slide or image scanner. Most scanners will scan an image as a TIFF. TIFFs are incredibly large and make PowerPoints swell to gargantuan sizes that cause a multitude of problems, one of which is PowerPoint crashes resulting from such large file sizes. If images are scanned as TIFFs, they should be converted to JPGs with imaging software such as Adobe Photoshop. Adobe’s Image Ready CS software will even allow you to create an action/droplet as a kind of batch processing macro for optimizing multiple files at one time but that is beyond the scope of this tutorial. Adobe PhotoShop has a feature called "Save for Web," which allows you to preview how an image will look if saved at various settings. This will allow you to choose the optimal settings depending upon what kind of image quality you need for a particular image. Drawings, clip art, and gray scale pictures should be converted to GIF files. The JPG format is a better choice when an image has gradations such as that which occurs in a photograph whereas GIF is a better choice for images with blocks of solid colors. Most people scan images at incredibly large sizes that aren't going to be helpful when placed in a PowerPoint and displayed with an LCD projector or on a web site. After all, the web can only display between 72-96 dots per inch (dpi) resolution depending on the platform (Mac or PC) so any additional pixels (dots) is actually just “fluff” and adds size to the image without improving the display. In general, if posting for the web or projecting on an LCD projector, simply convert your PowerPoint images to 96 dpi with Adobe Photoshop as explained in the section above. Printing is an entirely different story! If you plan to have your PowerPoint files be printable with quality-looking images then your images should be optimized to at least 300 dpi. If you wish for the images to fill the whole screen, be sure and size them at 1024 X 768 – the resolution of most projectors these days. (Check your projector’s resolution to make sure; you may have an older projector with a resolution of 800 X 600, in which case you would want to size your images to be 800 X 600). If you wish for the image to be printable and appear half the size of

Optimizing Images for Web and PowerPoint using Adobe Photoshop, Study Guides, Projects, Research of Photoshop

Related documents

Partial preview of the text

Download Optimizing Images for Web and PowerPoint using Adobe Photoshop and more Study Guides, Projects, Research Photoshop in PDF only on Docsity!

Optimizing Yo ur Imag es fo r the Web with

Adobe Photoshop

CROPPING AND IMAGE SIZE:

SAVING AS A JPG/GIF:

Opti mizing Yo ur Imag es fo r Po werPoint