Displaying pictures or graphics or on your web page can make it more interesting, illustrate the explanation of concepts, and increase your web page's search rank. Images that you put on your web page must be transferred from a Web server, across the Internet, to your Web page visitors computer. The original uncompressed image is referred to as RAW. To keep the transfer delays short, there are several different graphic file formats that use compression techniques to reduce the size of files.
Which image file format to use, GIF, JPEG, or PNG depends upon the character of the image you want to convert. If the image contains blocks of solid color, use the GIF format. Using the complex JPEG or PNG compression method on an image that contains large blocks of solid color would actually result in a larger file than would the GIF format. If the image contains lots of detail, like a photograph, use the JPEG or PNG format.
GIF (Graphics Interchange Format)
The Graphics Interchange Format (GIF) was developed by CompuServe. A GIF image can contain up to 256 different colors. The GIF image format works well because most simple Web graphics contain less than 256 different colors. When you convert an image to the GIF format, if the image contains more than 256 different colors, some color information will be lost.
In the early days when computer memory was scarce, monitors always used a palette. Unfortunately all computer manufacturers did not use the same palette. For example Apple computers palette did not contain the same 256 colors that the Windows computers palette used. The Browser Safe Palette contains a set of 216 colors that display correctly on all systems. To make sure that your GIF images displayed with the correct colors on all systems, your image would need to contain only the colors in the browser safe palette. Today most people have computers with monitors capable of displaying true color, which means they can display over 17 million different colors.
The GIF format gives you the interlaced option. An interlaced image first appears on your Web page in low resolution. This allows it to display quickly, although at low resolution. It then displays with progressively higher resolution. This option is not commonly used because, although the low resolution image displays quickly, the entire image takes longer to display than a non-interlaced image.
The GIF format provides you with some features that you can't get with the more advanced JPEG format. For example, you can choose a color to be transparent so that the background of your web page shows though parts of your image. Also, the GIF format gives you the option to store multiple images in a single file. You can set the time interval between images as they display in sequence. You can use this feature to create a nice little animation.
In 1995 Unisys surprised Compuserve and the Internet community by announcing that they held a patent on the Lempel-Ziv-Welch (LZW) compression technique used in the GIF file format. Anyone wishing to use the LZW technique would have to pay Unisys a $0.20 per unit royalty. In response to this, the Portable Network Graphics (PNG) format was developed. The PNG format was placed in the public domain so that no-one is required to pay royalties to use it.
Note: As a Web graphics user or designer you do not have to pay royalties to Unisys in order to use the GIF format. The royalties apply mainly to software developers who use the LZW compression algorithm in the code of their graphics applications.
JPG (Joint Photographic Experts Group)
A GIF image can contain up to 256 different colors. Complex images such as photographs can contain millions of different colors. Converting a photograph to GIF format may degrade the image's appearance. The Joint Photographic Experts Group (JPEG) format uses a compression method that is more suitable for photographic images.
When you convert an image to the JPEG format, you must select a compression level, sometimes referred to as the quality. A lower compression level results in a higher quality image, but the file size is not reduced as much. A high compression level results in a smaller file size, but the image quality is poorer.
The JPEG format uses a lossy compression technique. This means that the image file size is reduced by throwing away some of the details in the image. As you convert your image with higher compression levels, more image details are lost, resulting in a blurry image.
Compession Level: 30
File Size: 13KB
Compession Level: 80
File Size: 4B
The secret to converting RAW image data to the JPEG format is to set the compression level to the highest setting where the loss of detail in the image is not noticeable, or at least is acceptable for your purpose.
PNG (Portable Network Graphics)
PNG is a raster graphics file format that supports lossless data compression. PNG was created in response to Unisys claim that they held a patent on the compression technique used in the GIF file format. The PNG compression format is an improved, public-domain replacement for GIF.
Similar to the GIF format, PNG supports palette-based images, but there is no limit on the size of the palette. And, Similar to the JPG format PNG supports non-palette-based images. In a palette-based image, the data in the image file matrix are indexes to colors in the palette. In a non-palette-based image, the data in the image file matrix are codes representing the actual colors. The codes can be 24-bit or 32-bit colors.
With the PNG format, you can define one color transparent and you can control the degree of transparency. The 32-bit color code contains information about the transparency of the entire image. Sometimes transparency is referred to as "opacity". However unlike the GIF format, the PNG format can't contain multiple images, therefor it doesn't support animation.
When the PNG format was initially released in October 1996, few image processing and web browsers supported it, however now it is a widely used image compression format on the Internet.
Conclusion
Which image file format to use, GIF, JPEG, or PNG depends upon the character of the image you want to convert. If the image contains blocks of solid color, use the GIF format. If the image contains lots of detail, like a photograph, use the JPEG or PNG format. The JPEG format used with higher compression will result in smaller files, but image details may be lost. The PNG format cannot produce the highest compression levels, but it can display images without detail loss.
Neither JPEG nor PNG can inherently create animations. However a GIF file is not the only way to create an animation for your Web page. You can get much more control with an animation created using DHTML and CSS. With Java you can create a full-blown 3D game.
More Graphics Design Tips:
• Create GIF Animations With Free GIMP Image Editing Program
• SVG Code to Translate a Rectangle and Text
• Inkscape Circles, Ellipses, and Arcs Drawing Tutorial
• Use GIMP to Scale (Resize) an Image
• Selecting Vertices Edges and Faces in Blender
• Inkscape - How to Use Bitmap Image Fill Pattern
• Export Inkscape Drawing as an Image
• How to Create a Game App
• How to Make Beautiful Skies with GIMP
• SVG Example Code to Rotate Elements