Website Images

Website images on a web site enables you to add color and flair.

If you’re creating images for the first time there are a few things you need to be aware of such as:

  • You must optimize your image so its size is the smallest without too much loss of quality.
  • What image file format to use when saving your image for web site use.
  • If blending into the background you need to make sure one of the background colors chosen for your image is one of the specific web colors from the web color palette. This is so your image blends with the webpage background.

File Formats to use for web site Images

1. Graphics Interchange Format 89a
(extension file ends in .gif)

The color display is limited to 256 and you can create animation gif files using an animation software program.
This file format has been used since the introduction of the Internet. Perfect file extension to use for web site graphics.

2. Joint Photographic’s Expert Group
(extension file ends in .jpg)

The color depth of this file format is much greater than the GIF format and is an ideal file format for corporate logos and web site images that require full color depth.

You can compress your images to whatever compression rate you like. The more you compress your images the more quality you loose from your overall image quality.

There is also the PNG format which was designed to be a replacement for the gif file format however it is not the industry standard file format so its not supported by many of the older web browsers and a few of the current browsers on the market.

Which File Size Should I use?

It’s your choice really. When I create an image my objective is to create the smallest file size possible without loosing the quality so I do some testing to see which file works for the image I am working with. I do this testing in Adobe Photoshop when I am about to export the image. Both gif and jpg will work.

Tip - Select the best looking image which is the smallest size (jpg or gif) when saving the image in your favorite image editing program.

Tags: