Web Graphics Optimization

GIF and JPEG Image Optimization and Professional Web Graphics Design Tips for Your Ebiz Success

Professional web graphics can enhance your site and even increase your sales. But if your visitors have to wait 20 or 30 seconds for your web graphic to load, you have to think about image optimization.

No matter how good and professional your image is, nobody likes to wait decades to see it. Visitors will simply close the browser and go to your competitor's site if your web graphics take too long to load.

In order to reduce your page loading time and keep your visitors hang on your site, first you must understand the image formats and when to use them.

Image Formats

You have probably heard that the most widely used and supported image formats on the web are GIF and JPEG. Actually, there are more image formats that people use in their web sites. For example:

  • .bmp (large MS Paint images)
  • .psd (Photoshop files)
  • .png (Portable Network Graphics)

However, you should try to avoid using these image formats, because they are large and take long time to load. Quite often webmaster are confused between GIF and JPEG image formats and do not know which one they should use for their web graphics.

Well, it depends on the complexity, the range of colors in your image and what quality of web graphics do you actually want. Understanding how these two file formats differ can help you choose the most appropriate one and decrease your page loading time significantly.

GIF (Graphics Interchange Format)

Gif images contain the maximum of 256 colors (8 bit). This image format is good for small graphics that contain few colors. For example, if you want to create a small image that contains white background and a red dot inside, you need only 2 colors, red and white. The file will be very small, because the color pallet will contain only 2 colors. The GIF image file format is usually used for:

  • Logos
    Some logos are more complex than the others. Use GIF for text or very simple logos only.

  • Icons
    Small button icons, XP style icons on the web or icons next to a link should have GIF format.

  • Buttons
    For buttons that contain text only or very simple link buttons also use GIF format.

  • Simple Animations
    If you want to use some moving images, like banners, GIF image format is most suitable in this case.

JPEG (Joint Photographic Experts Group)

JPEG image file format contains 16.7 millions colors (24 bit). This image format is used for more complex web graphics. It was developed to compress high-quality images like photographs, digital art or 3d models without losing quality of a picture.

JPEG handles the shadings, shadows and color blends much better than GIFs. If you're planning to have an electronic art gallery or simply high quality pictures on your site, use JPEG image format.

Web Graphic Optimization Tools

After you've decided which image format is the most suitable for you, the last step should be optimizing your web graphics. Image optimization means reducing its file size, but at the same time keeping the quality of your image at a decent level.

Sometimes webmasters make mistakes when they try to optimize their images. Instead of reducing the file size (Kbytes or Bytes), they simply shrink the visual size of the graphic by changing the width and height attributes. The web graphic will look smaller, but the size and the loading time will still remain the same.

In order to avoid such mistakes and reduce the actual web graphic size, you should use image optimization tools.

GIFWorks - Free Online GIF Editing Tool

GIFWorks is an online GIF image editing tool. It is online and completely free. You don't have to download or install anything. This unique online GIF editor not only allows you to optimize your GIFs, but also allows you to create your own special effects, resize and colorize your GIF images.

GIFWorks has two methods of image optimization. First method is image optimization from a remote location when you simply copy a complete URL of the image and paste it into a text field. Second method is uploading image from your computer to the server.

GIFWorks is really great image optimization tool. Having in mind that it's online and absolutely free, it's really worth your attention.

GIF and JPEG Cruncher - Free Spinwave's Online Image Crunchers

GIF and JPEG crunchers are very basic image optimization tools. The free versions of these image optimization tools offer a maximum compression of 30%. Paid versions of image crunchers can be purchased as desktop versions and will reduce the image size up to 90%.

Free online GIF and JPEG crunchers allow you to select your image file and crunch it online. JPEG cruncher will give you the ability to choose the level of optimization (low, medium or high). After pressing a button you'll be transferred to another page where you'll be able to save the most appropriate image version.

Both image optimization tools above are very useful. Having in mind that these tools are free, they give you fairly good results. You can try out some more expensive image editing or optimizing tools, but if you're not ready to invest your money into better software, then these two above should be enough for you.

Web Graphic Optimization Tips

Sometimes, even if you have optimized your web graphics, you may still face a couple of problems concerning slow page loading time. You may reduce your graphic size by up to 50% or 90%, but it won't help much if you're not careful and don't follow the basic web design rules. Here are a couple more tips that you should pay attention to:

  • Using Fewer Web Graphics
    Reduce the number of graphics on your web pages. If it's not an image gallery, you should think of using fewer graphics on your pages. Each web graphic increases the overall size of your web site. You should keep less than 4 graphics on each web page.

  • Reusing Web Graphics
    Use the same images multiple times on your site. For example, logos, icons or graphic bullets. Your browser needs to retrieve images only once. After that, images are placed in the browser's cache and are displayed immediately.

  • Low Resolution Web Graphics
    LowSrc attribute is used to specify the low-resolution image to be loaded before the high-resolution graphic is loaded. Low-resolution image is smaller and loads faster. After the low-resolution graphic is loaded, it is displayed until the high-resolution image loads.

  • Slicing Web Graphics
    It's very useful feature, but not every image editing or optimizing program has this feature enabled. Slicing an image means dividing it into as many pieces as you wish. It also enables you to optimize each piece separately. Each sliced piece of the web graphic has a smaller file size and therefore downloads faster.

  • Using Thumbnails
    Thumbnails can be a good idea if you want to reduce your page loading time. A thumbnail is a smaller image, which links to original size image. A thumbnail loads much faster and if your visitors want to see a full size image, they simply click on a thumbnail.

  • Specifying Image Size
    It's suggested that you specify the width and the height of your web graphics in your HTML code. If you fail to do that your readers will have to look at a blank page, because the text will not load until all images are loaded. So put the exact width and height attributes (for example
    "<img width=256 height=340>") in order to make your pages load faster.

In Conclusion

Your web graphics should be used to present the content of your web page. They should be visually appealing, create interest and pleasant atmosphere. Therefore, you should use your web graphics very thoroughly on your web site. Large web graphics take time to load and will not be appreciated by your visitors. Remember that there are people who browse with slow dial-up connections. They will be very likely to leave your site if your web graphics take long time to load.

Optimizing your web graphics not only can help your visitors by loading your web pages faster, but also can help you save money by reducing your bandwidth. Almost every web host has some monthly data transfer limitations. Large web graphics can cause you to exceed those limits and pay extra for additional bandwidth. In order to save your money, you should use fewer images on your web pages and always optimize them for the web.

Slow loading pages may ruin your visitors' experience and you may lose your potential clients and customers. If you want to receive repeat traffic to your web site, you should always optimize your web graphics and use them very thoroughly. Clean and to-the-point website should be your main goal when designing your site.