Back to Class Five page »

Image Optimization

Resolution and File Size

In print you often use high resolution images and save them in file formats like TIFF or PSD. This results in print-quality graphics, but very large files.

On the web all images and files associated with a web page have to be downloaded to the client computer before they can display. The larger the file size, the more time it will take the graphics to download and display. In order to make our web pages fast, we minimize the file size of all of our graphics (which are by far the largest part of our web pages).

Image Resolution

• All images on the web will be displayed on a screen of some type.
• Common screen resolutions are between 72 ppi (pixels per inch) and 96 ppi.
• Using a standard and lower resolution insures that our files sizes are small and our image sizes are consistent.
• 72 ppi is the current standard for web.

Always set your images to 72 ppi.

In Photoshop, you can set the resolution for your images by going to Image > Image Size. The resolution should be set to 72 Pixels per Inch, as shown in the screen shot.

Image Dimensions

• Remember that your image has to fit on someone's monitor screen.
• A good rule (for now) is to make everything fit into a 1024 pixel display screen.
• That leaves you, at most about 960 pixels for a maximum image width.
• But usually your images are much smaller in size
• In almost all cases, larger image sizes result in larger image files

File Size

How large should the file sizes of our images be? That depends on the dimensions of the image and the type of image.

Guidelines (for 2010)

• Smaller images should generally be under 25kB. If possible, under 10kB
• Try to keep large images under 50kB

Image Optimization

All images should be optimized before we use them in our websites. In Photoshop, we use the Save for Web & Devices command.

Digital cameras usually save photos at a much higher resolution and size than we need.

1. Here's a photo of Molly from a digital camera.

   This photo is huge. It's 2.5 MB. It has a 180 ppi resolution and is 2272x1704 pixels!

   

2. Let's crop and resize Molly using the Image Size menu in Photoshop. We'll bring her down to 72 ppi and a width of 600px, which is still quite large.

   

   Here's Molly resized.

   We just did a normal save in Photoshop. This photo is still 396kB. Way too big.

3. Next we'll optimize Molly by using the Save for Web & Devices menu in Photoshop.

   This is a photograph with continuous tones, so it should be a JPG. We can use the Photoshop presets for JPG. JPEG Medium looks good, so we'll use that.

   

   Here's Molly optimized.

   Now the photo of Molly is only 40kB. That's still pretty big, but the photo is 600px wide, so that's ok.

Using Transparency

To create images with transparency, you must first create an image in Photoshop that has some transparency. The image below, has a transparent background (as we can see from the checkerboard pattern).

In order to preserve the transparency, we must save the image as a GIF or a PNG.

To save using a one color transparency, do the following on the Save for Web & Devices screen:

1. Select the preset for PNG-8 128 dithered
2. Check the box for transparency
3. Adjust the number of colors in the image (as low as possible)
4. Change the Matte color to match your pages background color.

To save using a variable transparency, do the following on the Save for Web & Devices screen:

1. Select the preset for PNG-24
2. Check the box for transparency

Guidelines For Optimization

• Always use 72ppi
• Always use Save for Web & Devices
• Use the appropriate file format for the image
• Use the optimization presets in Photoshop for your image type
• Adjust the number of colors used for GIFs and PNGs
• Find a middle ground that results in a small file size that doesn't significantly compromise the quality of the image

Back to Class Five page »