Many web site owners and new designers do not understand the importance of optimizing images for a web site. The process is pretty simple once you understand the concepts.
Almost every image editing software package now includes a utility to reduce the size of the images on your web site. This tutorial will cover the two most commonly found image types, JPG (pronounced jay-peg) and GIF (pronounced giff or jiff). We will use Corel’s Paint Shop Pro image editing software to show how to optimize images.
Paint Shop Pro retails for about $100, which is much more affordable than Adobe’s $400 price tag on PhotoShop. Paint Shop Pro has about 95% or PhotoShop’s capabilities and is a very powerful editor. If you watch for a sale it is not hard to find it for about $50. Best Buy runs it at that price about 4 or 5 times per year.
Why you should never use HTML to resize an image
It is very common to see web newbies using HTML image width and height attributes to adjust an image to the size that you want. This is never a good idea. Why? First, if the original image is 300 pixels by 300 pixels with a file size of 100k (100,000 bytes), it can easily be made to appear smaller using the image tag (img) width and height attributes, but you are still downloading a 100k image, regardless of what size adjustments are made with HTML image attributes. If you run an e-commerce site with 20 resized product images on a category page, you will dramatically slow down the rendering of the web page.
Second, the image will inevitably look a bit distorted and will lose detail. That’s because resizing an image using HTML is kind of a crude re-rendering of the image. For the best quality image on a web page, always prepare an image’s physical dimensions to display at the same size that you want it to appear on your web site. If you wish to display an image at a width of 250 pixels and a height of 200 pixels, create an image using those exact dimensions.
Image File Size versus Image Dimensions
Let’s start by clarifying the difference between file size and file dimensions. File size is the physical size of the file in bytes. A reference to a 100k file means 100 kilobytes or 100,000 bytes. Optimization reduces the file size in bytes. The file dimensions are the width and height of an image measured in pixels. Reducing the dimensions of an image also reduces the file size, but optimization is a follow-up that takes this much further. Don’t measure images on web pages in inches. Get used to doing everything with web images in pixels. Life will be much easier.
Optimizing images goes beyond just setting up the physical dimensions. Optimization reduces the file size in bytes, which makes it easier to download images from your server and allows your web pages to render (display) much faster. Each file type uses a different method to reduce the byte size of an image file. JPG images use a compression technique which strips away image bits. GIF file sizes are reduced by reducing the number of colors that make up the image. If you want to know when to use each web image type, check out our article on that topic.
Always Work from an Original Image File
We cannot stress this strongly enough. Never modify and then save an original image file. Once a JPG or GIF has been modified or optimized, the image information that was changed is lost forever. Furthermore, every time you save a JPG file, you compress the image further, which means it quickly becomes over-optimized and the quality degrades. Always work from a copy of the original file or make sure that you save your modification under another file name.
Also, work from the highest resolution image file that you have. If your digital camera can save files in the RAW format, it is beneficial to use that format. If not, shoot your pictures at the highest resolution settings. Web images use a relatively low resolution. But as a general rule, if you have more image information to work with, the image will be much easier to work with and the results much more satisfying.
Step 1: Crop the image to remove unwanted areas.
Step 2: Resize the dimensions of the image to match the actual dimensions used on the web page. Resize the image using the Image > Resize tool. Always leave the aspect ratio locked. This keeps the image proportional as you resize it.
Step 3: Perform any adjustments to image quality, such as changing the brightness, contrast, sharpness, etc.
Step 4: To save the image, select File > Save As. When the Save As dialog box opens, click the Options button.
Step 5: On the Save Options dialog box, select Run Optimizer. The Optimizer dialog box will open. From this point forward, the process changes slightly.
Optimizing a JPG Image
When the JPEG Optimizer opens, you will see two copies of the image you are saving. The image on the left is the non-optimized version. As you change the optimization settings, you will see your changes in the right window. JPG images are optimized using compression, which means elements of the image data are stripped away. You can easily over-optimize an image and degrade the quality. The trick with a properly optimized image is to compress the image just to the point where the image starts to degrade slightly, and then back back off a bit.
Over-optimized JPG
To optimize JPG images, set the compression value and check the quality of the image in the right side window. I find that the normal settings for most JPG images that have never been optimized are in the 10% to 20% range. You can sometimes go a little higher with large images or images without very much detail. Smaller images, such as thumbnails, may only require a 5% compression value. Generally speaking, the more uncompressed image information you have to work with, the higher you can set the compression, which creates larger reductions in file size.
The viewing windows in the JPEG Optimizer are very small. I generally set the zoom in the range of 250 to 400 and then use the Pan button to move the viewing area to a section of the image where here is a contrast between dark colors and light colors, or if working with an image of a person, to a skin area around the mouth.
The first signs of over-optimization are distortions in the image, distortions in the colors or artifacts that begin to appear. Artifacts are sometimes called fly specks. They are what looks like small bits of dust that form in light areas of an image that are next to deep colors. Sometimes you will also see a halo effect. If you are working with an image of a house, the contrast area where the roof and the sky meet is the best place to look for artifacts or halos.
Start ratcheting up the compression value until distortions or artifacts start to appear, and then drop the compression value down a few points. At this point, your image is probably optimized as close to perfect as you can get. Click the OK button to save the image and it is then ready to transfer to your web server.
Optimizing a GIF Image
Just like with the JPEG Optimizer, the GIF Optimizer will display two windows, each with a copy of the image. I won’t get into other settings in this area, such as setting transparency. We are just going to focus on optimizing the image for the smallest file size.
over optimized GIF image
Click on the Colors tab in the GIF Optimizer. Remember that you have only 256 colors available in a GIF image. Every variation of color-regardless of how subtle–is a different color out of the 256. The best way to optimize a GIF image is to reduce the number of colors until you see the image quality start to degrade, and then raise it up a few points. Pick a spot on the image where you are likely to see a range of color gradation’s. With a line drawing, this is likely to be in a curve on an image. Use the zoom and the Pan button to select an appropriate portion of the image to view.
You generally will not see artifacts or halos with a GIF image, but you are likely to see some color gradations disappear or a boxy-looking pixelization start to occur in colored areas of the image. If you are working with line drawing or images with text, curves and angular lines will start to look jagged.
When you are satisfied that you have reduced the number of colors as far as you can without degrading the quality, click OK and save the image. Your GIF image is now optimized and ready for your web site.
So what about PNG images?
There are a lot more options when working with PNG files. We will cover that in an upcoming tutorial.