Back to Week 5 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 are measured in pixel size.

Resolution actually does not matter. Just pixel size.

Resolution actually does not matter.

All 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).

• Total kilobytes - Page weight (via HTTP Archive)
• Image Bytes - Page weight (via HTTP Archive)

Image Resolution

• All images on the web will be displayed on a screen of some type.
• Screen resolutions vary quite a bit thanks to new high pixel density devices. You can check your screen resolution on DPI Love
• There are a bunch of techniques for handling varying screen densities. Most of them are beyond the scope of this course.

In Photoshop:

1. Pay attention to the pixel dimensions of the image
2. Change measurements to pixels
3. Make sure that Resample Image is checked

You can see this information by going to Image > Image Size.

Work at a higher pixel size (sometimes)

• Many of your web graphics may be very small
• For graphics that are important to the site, like icons and photographs, make sure you have large images to start with.
• Even though your final images may be small, working at a larger size will give you some leeway when manipulating and resizing your images (and later on when serving them to high density screens)
• Save your optimized images at the pixel dimensions you intend them to be on screen.

Image Dimensions

• Remember that your image has to fit on someone's monitor screen.
• The monitors in the labs display at 4096x2304 pixels. However, common display widths still range from 1920 to 2560 pixels. See wikipedia for the variety in possible screen resolutions
• A good rule (for now) is to make everything fit into a 1024 pixel display screen. The exception to this rule is is you are using large or full page width background images. In this case the image might be a few thousand pixels wide.
• 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

• Smaller images should generally be under 25kB. If possible, under 10kB
• Try to keep large images under 50kB
• Full page images may be larger, but use with caution!

Image Optimization

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

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

1. Here's a photo of Petey I took on my iPhone (not even the latest and greatest one).

   This photo is huge. It's 2.1 MB and 3264x2448 pixels! Notice how it doesn't even fit in the browser window.

   

2. Let's crop and resize Petey using the Image Size menu in Photoshop. We'll trim him down to a width of 600px, which is still quite large.

   

   Here's Petey resized.

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

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

   • In the Photoshop menu: File -> Export -> Save for Web (legacy)

   The save for web menu allows you to compare multiple versions of the same image saved in various formats and compression settings. Note the photo size estimates outlined in the two red boxes on the left of the screenshot below.

   The preset menu on the right allows you to pick from a few common predefined file formats and settings.

4. 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 Petey optimized.

   Now the photo of Petey is only 28kB. That's still kind of 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 screen:

1. Select the preset for PNG-8 128 dithered
2. Make sure the box for transparency is checked
3. Adjust the number of colors in the image (as low as possible)
4. Change the Matte color to the background color you plan to use

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

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

Guidelines For Optimization

• Always use Save for Web
• 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

Additional Image Optimization

You can use other image compression tools that will compress images even more than Photoshop does.

There are free online services like Tiny PNG.

Our lab computers also have a free application called ImageOptim in the Applications folder.

Just drag your finished photos into the app to further optimize.

Back to Week 5 page »