Optimizing and Working with Images

Image Basics: Resizing & Aspect Ratio

This page was designed to give you the survival skills you need when working with images for your web pages. If you're already confident about resizing and aspect ratio, scroll down the page for intermediate and advanced topics.

Let's start by discussing broken images:
If you see a small white square with a red X in it, that's an image error. It may look something like this:

That means you have an image tag in your page but the browser can't locate that image. There are 3 main causes of broken images:

You didn't upload your image file along with the web page that had the tag in it -or- you uploaded it to the wrong place so the path doesn't match the image tag.
The name of our image doesn't match that used in your image tag. Case counts. Dog.gif and DOG.GIF would not match. You'll either need to change your image tag or the name of the image itself.
The image itself is corrupt. Try viewing the image from your hard drive. If it views properly, try re-uploading that image. Note: You can't convert between image formats by just renaming an image. Renaming dog.gif to dog.jpg will result in a broken image. Use one of the image editors mentioned below to convert between popular formats.

Let's talk for a moment about resizing graphics. There are many reasons why you may want to change the size of an image before placing it on your web page. Perhaps it's just too big, the height and width don't fit in well with your plans for the page. Or perhaps the graphic is taking too long to load. Generally the larger an image is in height and width, the longer it will take to download.

Resizing images

Let's say you want to improve the load time of your page. So you modify your image tag to include a smaller number for height and width. This will result in a smaller graphic being displayed on your page. However, the entire original graphic will be loaded into memory and then resized, thus having no impact on load time. If at all possible, it's best to use a graphic editing program to resize your images. You'll find links to graphic editing programs you can download at the bottom of this page.

Generally you're safe making a large image smaller. Here's an example:

The Duck, 280x295

The Smaller Duck, 171x180

Notice that both the height and width were changed in proportion.
The original duck was 280 pixels wide by 295 high. The downsized version is 171 by 180. The ratio of height to width called the "aspect ratio" hasn't changed. Now let's see what would have happened if we'd failed to keep the aspect ratio intact.


Here the image has been wider but not taller	In this image; the height has gotten too large in relation to the width:

The first thing we did with our graphic was to make it smaller. In general, you're pretty safe downsizing graphics. The larger graphic has detailed pixel information. When the image is downsized, some of that information (resolution) is lost. For this reason, it's a good idea to keep the original picture. Upsizing the smaller image will not result in a reappearance of that original pixel information.

For the same reason, you can't make a small image much larger. It doesn't have enough pixel information stored in it and will start to look "pixilated" where you actually see the building blocks that make up the small image and distinct squares.
Sticking with our duck theme, here's an example:

In addition to the number of pixels high and wide, an image can have a number of colors as one of its properties. The more colors, the larger the file size of the image will be. Colors can range from 16 to 256 to 16 million. In general, 256 colors are enough for most web pages.

This brings us to a quick discussion of image file formats. GIF images contain 256 colors and are good for cartoons, clipart, and line drawings. JPG images can contain up to 16 million colors and are best used for photographs. When selecting images for web pages, it is advised to stick with .gif, .jpg, and .png formats. Want learn more? Click here.

Transparent images are those where the background seems to blend in with the background of your website. Using them can make for a professional looking site. You can either locate images that are already transparent or you can make yours transparent using tools such as GifWorks or PaintShop Pro. Let's look at that pixilated duck again. The small duck appears to sit on a plain white background. But when you look at the larger image, you see that the background surrounding the duck isn't the same color. Instead is is a speckled mix of light colors. This becomes an issue when working with transparernt graphics. Please take a moment to check out the examples: Ducks in a row - Transparency Samples.

Intermediate Graphics Tips and Techniques:

Image Links

Transparent Images

Thumbnails

Animated Gifs

Advanced Graphics Tips & Techniques (JavaScript)

Preloading Images

Image Swapping Rollover

Another Image Flip

Image Editors and Tools

Pixlr Editor is a free online tool that's good for fixing, rotating, resizing, cropping, and working with image layers.
Select "Open Image From Computer" then select the image you want to work on.

Here's a great tool for optimizing web graphics:
Dynamic Drive Optimizer was designed to help you make your images load faster by reducing file size without losing too much in terms of quality. Free for personal use.

Free Graphic Editors that you can download and use include Google Picasa and Irfanview. Download and try the 30-day evaluation version of these tools:

PaintShopPro and Animation Shop

Ulead PhotoImpact

Web Image

Sources for Graphics, Clipart and Animations (free for personal use)

EOS Development Web Graphics

Animation Factory