Information about Image Formatting

Many webmasters have problems with images that do not display properly and pictures that take too long to load on websites.

Always save your images in the best quality possible and THEN use a compressed type. This will allow you to try out the two main image formats to see what works best for what you’re trying to do if there’s any confusion on what to use.

The most common internet images formats are:

• JPEG
• GIF
• PNG
  

JPEG (Joint Photographic Experts Group)

JPEG images are full color images. It has a fairly high image quality (when used to its best extent). This image format is best when you can’t go any lower than 24-bit color (something like a digital photograph). In your image editor, it is often very simple to choose the level of compression in your jpeg. Highest quality results in the largest file size, meaning longer load times. Low quality results in a lousy image that looks pixelated, but has a much lower file size and loads far quicker.

The JPEG algorithm was optimized for compressing conventional pictorial photographs and is also good at handling complex illustrations. Photos and artwork with smooth color and tonal transitions and with few areas of harsh contrast or sharp edges are ideal for JPEG compression. Yet most page design elements, diagrams, typography within images, and many illustrations are composed of hard-edged graphics and bright color boundaries that are seldom encountered in photographs. [Source: webstyleguide.com]

JPEG is the best image format for realistic images, like photographs.
JPEG images are able to be re-sized without causing as much distortion, compared to GIF images.


GIF (Graphics Interchange Format)

The GIF is an image format that has a compression that is best suited toward images with large fields of homogeneous (exactly the same) color.

You can take advantage of the characteristics of its compression to improve its efficiency and thereby reduce the size of your GIF graphics. What you do is you severely limit the amount of colors that are in your image, and get rid of anything and any colors that are not required to represent the image. A GIF graphic cannot have more than 256 colors but it can have fewer colors, down to the minimum of two (black and white). Images with fewer colors will compress a lot better and be smaller for it. Doing that will help it load a lot faster. [Source: webstyleguide.com]


PNG (Portable Network Graphics)

PNG is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license. PNG supports palette-based (palettes of 24-bit RGB or 32-bit RGBA colors), greyscale, RGB, or RGBA images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK). [Source of this definition: ]Error