Wednesday, March 11, 2009

Using GIF and JPEG graphic images in web site design

One of the most important and difficult concepts to learn about digital imaging is which format is best for displaying graphics and photos on the web. Unfortunately, there are no clear cut answers to this question. It depends on the image to be displayed. There are two important factors to consider: file size and image quality. Currently there are only 2 widely supported formats [GIF and JPEG] that will display on the web. There is another up-and-coming format [PNG] which is only supported by the leading browsers in version 4 and above. Right now, let's not worry about the PNG format. Let's compare some GIF and JPEG images to get a feel for which format works best for what type of images--generally speaking, of course, because there are always exceptions. If you understand what each format does best and where each formats drawbacks lie, you can make an educated guess about which format to choose for various images when preparing them for display on the web.

What is Gif's?
(Graphics Interchange Format)
GIF file can contain the maximum of 256 colors (8 bit) or less, which is good for customizing your graphic files. For example, if you create a GIF image of a red arrow, , you can customize the file to have only two colors, read and white. This means that the file is very very small because its palette contains only two colors. GIF file will yield a higher quality and smaller size image, compared to JPEG, when it is used with computer generated graphics such as icons, logos, buttons, etc.

Example: GIF Format



What is JPEG's?(Joint Photographic Experts Group)
JPEG was built to contain 24-bit (16.7+ million colors) and was developed specifically for photographic-style images. JPEG stores the information of images by keeping track of color changes. The advantage of JPEG is that it can carry a smaller file size than GIF when used in storing photographs and images with a wide variety of shading. But, it will not yield a smaller file when dealing with low color level and details like computer generated graphics.


Example: JPEG Format



GIFs also has some special features such as animation, transparency, and interlacing.


Format GIF
1) Logo
2) Button
3) Animated GIF
4) Transparent
5) Icon

Format JPEG
1) Photos
2) Picture
3) Potret


1 comments:

Lia on August 27, 2012 at 8:30 PM said...

Thanks this is a great opportunity to drop by here and learned a lot of things on your blog. Web design is very important aspect on a website so that it will make more visitor satisfy. The Web Designer has also a great job for this. I really appreciate this information.

Post a Comment

 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com