Ever notice how sometimes an image slowly paints itself into place on a webpage? It’s as if we see the pixels downloading and showing up on our screen a line at a time. That is an image that has not been ‘webitized’. As a web designer, it’s important that our images are ‘web-able’.
When I visit a site and the image paints itself into place, it’s an immediate tell-tale sign ‘that-person-doesn’t-really-web-design’ . The only exception to that is if we are on a very slow connection.
Outside of a slow connection, the image painting itself into place happens due to one or more of the following reasons:
- a very big image is being placed into a much smaller space
- a high resolution image is being used
- the image hasn’t been optimized
How do we make our images web-able? We do this in three steps:
- Set the proper resolution
- Make the image size match the area size
- Save the image as optimized
Set The Proper Resolution
Computer monitors can only handle 72 pixels per inch. That’s 72 little colored dots for every inch on your screen. (The one exception to this is that Mac monitors handle 96 ppi.) In the web design world, we use 72 as the resolution for images.
Have you ever noticed how an image is very big on your monitor but when you print it it’s only 4″ x 6″? That’s due to resolution. If the resolution is 300, it will be 4 times as big on the monitor (300 is 4×75).
To set the resolution in Photoshop:
In Photoshop, go to Image/Image Size from the main menu. Deselect the checkbox for Resample Image. I do this so all the pixels in the original image stay intact. Change the resolution field to 72. The image size will become larger since we’re now using the same number of pixels but a lot less pixels per inch. The next step shows how to make it the right size.
Note: It likely appears that nothing really changed on your screen. The image doesn’t look any different than before. It looks the same size. What did change however, are the measurements. For a detailed look, below is an image before the change…note the rulers at the top (ctrl/R in Photoshop).
The image size shows approximately 2.5″ wide.
Note the rulers after we make the resolution change:
The image is now 11″ wide. Now that the resolution matches the resolution of a computer monitor, let’s make the image the right size.
Match the Image Size to the Area Size
When it comes to webpages, it’s all about efficient download times. Downloading an extra big image that only takes up a small area on a web page is not a good idea. Change the size of the image before you place it on a webpage.
If you are a Photoshop user, it’s done under Image/Image Size.
Be sure the checkbox labeled Constrain Proportions at the bottom of the box is turned on. Since webpages are measured in pixels, change the width field at the top of Image Size dialog box (in Pixel Dimension section) to the desired size. The height will automatically update itself.
Save the Image as Optimized
The final step is to make the file size as small as possible, while retaining the necessary quality and detail. Photoshop has a great utility for doing this last step. Select Save for Web and Devices under the File option of the main menu.
The 4up tab is the active tab (top left of screen area). This shows four different options in file size and file quality. The top left one defaults to the original image. Below the preview of each one it shows the files size and the quality as a percentage of the original file size. The images loses detail and gets fuzzier with a decrease in quality. Choose the one with the lowest quality that retains enough detail. I most often use the medium (30%) or high (60%) quality, depending how ‘important’ the image is. Click Save after selecting the image with the desired settings.
Your image is now fully ‘web-able’!