Big Images, Bad Quality Images

Image problems almost always have to do with size, but it is not visual size that is the most important measurement.

The most common image problem for new site designers is that they create a site that has images that are too large. The page looks GORGEOUS in their HTML editor. They upload it and then preview it in their browser and then it takes FOREVER to show up!

When a site visitor clicks through to your site, and they see a line of image show at the top, followed by another line of the image, and the rate at which the image is advancing down the page tells them that it is going to take a lot of time to show, they do not sit there waiting in anticipation to see what you thought was worth the wait! They get disgusted with your lack of consideration, and they either leave, or try to find a way to go somewhere else in your site.

Huge images are rude. The rule on a website is: Use the smallest images necessary for the required detail or impact.

Huge images occur for two basic reasons:

  1. The site builder is using a fast internet connection and has no clue how slow their site is on dial-up. Since over half of the world still uses dial-up, this is a significant issue!

  2. The site builder does not understand how to shrink an image, or what makes an image fast or slow to download.

The size of the image is determined not just by the visual size, but by the file size - how many kilobytes of information the file is made up of.

File size is affected by the number of different colors in the image, as well as by the number of pixels (dots) in the image.

Many times, someone will see the image in their image editing program, and will assume that the image IS the size that they see. But the program will have scaled it down on screen, without having actually changed the image size, just so you can see it all. Look at the top bar of the image, and at the bottom information bar, to see if it is being shown at less than 100%. It often is, and if so, it needs to be scaled down in order to get it to the size you really need on your web page.

There are four basic strategies for reducing image sizes.

  1. Scale the image down. Make sure you are viewing it at 100%. Then scale it down to the size you need it on your page. A snapshot can be scaled to anywhere from 200 to 450 pixels for easy viewing. Make it as small as you can and still get the impact or detail that you need to show. For some accent elements, you can use a repeating pattern instead of a larger image.

  2. Compress the image. Images online are saved as JPG, or GIF images. In general, you use JPG for photos that do not have large spaces of a single color. GIF is used for line drawings or clipart, and works very well for text. You can often choose a compression level for JPGs. You want to save it at the lowest compression level that you can, while still preserving the image quality. If you compress a JPG image too far, it will go kind of blurry and funky. The goal is to keep the image quality, while reducing the file size. Compression works by getting rid of color information that is not needed - the extra information bloats the file size.

  3. Slice the image. This means cut it up into pieces and put the pieces into table cells that are the same size as the pieces. You see this a lot on commercial sites when an image loads in blocks. If you slice it intelligently, with similar colors in each block, it can significantly reduce the combined file size, plus it is less annoying to the visitor to wait for it to load. This is most appropriate for very large images, such as those that are most of a page.

  4. Use Thumbnails for very large shots that require a lot of detail. Put the thumbnail image - a small version of the image which is just 100 to 250 pixels wide - on the main page. Link that to a full sized version of the shot, so that people can choose whether to view the big one or not. This works well if you want a high resolution image for printing, but do not want to annoy your visitors with having to wait for it to load before they can tell if they are interested or not.

In general, do not create a page that is almost all a single large image unless you use some aggressive strategies to reduce the load time. Some programs use image templates from PhotoShop for web design. Do not use these kinds of templates! HTML templates are MUCH faster to load, and no more difficult to use. If you want to create image intensive pages, then take the time to study up on how to make them load quickly.

Huge images that have no real reason to justify their size are rude. They will annoy your guests, and make you look like an amateur.

Poor quality images are also a problem on many sites, which comes from not understanding how to process images for the web.

The best formats for the web are JPG, and GIF. There are a few rules about making them work right:

  1. Use JPG for photos. Anything with lots of smoothly blended colors works better with a JPG.

  2. Use GIF for drawings, or text. Images with large blocks of a single color work best as a GIF.

  3. Use the smallest compression size that gives you a clear image without ugly distortion. Both formats have several options if you are using good image software, and you can choose the level that gives you the best balance. Very simplified graphics software won't offer you any options, it will just make the choice for you.

Scaling and cropping images, and compressing them appropriately are skills worth learning if you want a site that is both quick, and attractive.

Written by Laura Wheeler