JPEG vs GIF

Discuss on topics related to Art or Design. Inappropriate topics will be moved to their respective sections.
Post Reply
User avatar
asifshahid
Insanely Distorted
Insanely Distorted
Posts: 4329
Joined: Tue Oct 16, 2007 2:35 pm
Full Name: Asif Shahid
x 37

JPEG and GIF are currently the most commonly used graphic file formats when creating a web design for the World Wide Web. The graphic file format which will best suit your design depends greatly on the style and design of your website. The following article explores and explains the differences between JPEG and GIF files, enabling you to decide which is best for your web design.

JPEG images and Web Design
Joint Photographic Experts Group or JPEG as it is more commonly known was named after the original committee which created the standard and is currently one of the most popular graphic file formats used for web design. JPEG files are ideal for web designs which wish to incorporate a lot of real world scenes such as photographs because it supports 16 million colours. The JPEG file compresses natural images which are either full colour or grey scale creating a considerably smaller image file. Additionally it is able to store 24-bit per pixel as opposed to 8-bit per pixel data. The JPEG format is not generally suited for web designs which rely on non realistic images such as cartoons or line drawings. Furthermore, if your web design requires black and white images or motion compression the JPEG is definitely not the way to go.

GIF images and Web Design
GIF files or Graphics Interchange Format Files support 256 colours and are excellent for web designs which incorporate images with large areas of flat colour. Furthermore GIF is ideally suited for black and white images, line drawings, illustrations, clip arts and small text of a few pixels. GIF files are extremely useful for web designs because it supports transparency. A transparent image allows the background of the web page to be displayed enabling the image to appear borderless. This is extremely useful for web designs in which the background of the web page and the background of the image differ.

JPEG versus GIF - The Summary
To summarise, just remember that when deciding on the type of graphic file format for your web design, if the images you are using consist of natural real world scenes and have lots of colours then use a JPEG file. However if your images have solid colours with no gradations, then GIF files are the best choice for your web design.

Source: Netstarter (http://www.netstarter.com.au/Content_Co ... us-gif.seo)


Asif Shahid
Sydney, Australia 🇦🇺
User avatar
amit
Proud Member
Proud Member
Posts: 1948
Joined: Wed Feb 13, 2008 4:12 am
Full Name: Amit Mojumder
Expertise: Web Design

Yes i agree, that GIF files are best in case of solid color. but when you are using a lot of gradient then GIF isnt a good idea, cz all ur gradient will be distorted in GIF format. at that moment JPG is the best choice i think.

Another format PNG (Portable Network Graphic ) is cool i find in some cases.

Thanks for sharing the nice article.
http://amitmojumder.net (personal folio)
http://stepsg.com (design studio)
Image
Image
User avatar
bappy
DD Addict
DD Addict
Posts: 940
Joined: Tue Oct 23, 2007 8:41 pm
Full Name: MD GOLAM MOHIT MOHIT BAPPY
Expertise: Web Design
x 9

nice post (Y)
B2P
Image
User avatar
pagol
Insanely Distorted
Insanely Distorted
Posts: 3298
Joined: Sat Nov 03, 2007 8:41 pm
Full Name: Koba
Expertise: Jack of all, master of NONE
x 81

PNG PNG PNG PNG......................................... jpeg dead...................................... gif gone......................................................... PNG PNG PNG>......................... size doesn;t matter :)
** KISS Principle **
User avatar
amit
Proud Member
Proud Member
Posts: 1948
Joined: Wed Feb 13, 2008 4:12 am
Full Name: Amit Mojumder
Expertise: Web Design

pagol wrote:PNG PNG PNG PNG......................................... jpeg dead...................................... gif gone......................................................... PNG PNG PNG>......................... size doesn;t matter :)
assa PNG r 2 ta format asa...akta 8 BIT and another is 24 BIT.

24 BIT ta onak vari hoye jai....r jai kono PNG file r weight JPG r double......thats why i normally use JPG or GIF for web images.

r transparent BG r khetre PNG r kono alternative nai.

Thanks.
http://amitmojumder.net (personal folio)
http://stepsg.com (design studio)
Image
Image
User avatar
asifshahid
Insanely Distorted
Insanely Distorted
Posts: 4329
Joined: Tue Oct 16, 2007 2:35 pm
Full Name: Asif Shahid
x 37

ei bepare ektu oggo ami :(
Asif Shahid
Sydney, Australia 🇦🇺
User avatar
pagol
Insanely Distorted
Insanely Distorted
Posts: 3298
Joined: Sat Nov 03, 2007 8:41 pm
Full Name: Koba
Expertise: Jack of all, master of NONE
x 81

@amit... these day size not is big fact as for png24bit.. if that much big .. than other issue. and more or less around the world internet speed akon bhalo... but shob image too png24 dorkar nai.. jeygola transparent ogla niley e hoi... but ami akta jinis deklam amar most of time 50% image jpg and png24 size almost same e hoi... so jodi deki png24 2/3kb bayshi jpg/gif tey tokon ami png24 use kori... ( sure kono gallery type image png/gif use kori nah normally use o hoi nah.. )

yea kono big site nah.. normal site a kotha ami bolchi... big site gola gif nibar try kori bayshi..... use o hoi bayshi gif

actually i think it's most of time depend on layout.... caz kichu layout asey jeykney most of image e png24 (transparent) nity hoi...
** KISS Principle **
User avatar
ranabrt
DD Addict
DD Addict
Posts: 728
Joined: Sun Jan 06, 2008 9:03 pm
Full Name: HAFIJUL AMIN (Rana)
Expertise: Graphic Design

PNG yes.... a very useful format...... here I add file details......

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, greyscale with alpha, RGB, or RGBA images. PNG was designed for transferring images on the Internet, not for print graphics, and so does not support non-RGB color spaces (such as CMYK).

Comparison with other file formats

Comparison with Graphics Interchange Format (GIF)

On small images, GIF can achieve greater compression than PNG .
On most images, except for the above cases, GIF will be bigger than indexed PNG.
PNG gives a much wider range of transparency options than GIF, including alpha channel transparency.
Whereas GIF is limited to 8-bit indexed color, PNG gives a much wider range of color depths, including 24-bit (8 bits per channel) and 48-bit (16 bits per channel) truecolor, allowing for greater color precision, smoother fades, etc. When an alpha channel is added, up to 64 bits per pixel (before compression) are possible.
GIF intrinsically supports animated images. PNG supports animation only via unofficial extensions (see the section on animation, above).
PNG images are less widely supported (e.g. older web browsers and office software).
Silverlight supports PNG but has opted not to support GIF.

Comparison with JPEG


Composite image comparing JPEG and PNG: notice artifacts in JPEG versus solid PNG background.
JPEG (Joint Photography Experts Group) can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data, which is typically dominated by soft, low-contrast transitions, and an amount of noise or similar irregular structures. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize (often 5–10 times) with negligible gain in quality.
PNG is considered a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions. Where an image contains both sharp transitions and photographic parts a choice must be made between the large but sharp PNG and a small JPEG with artifacts around sharp transitions. JPEG also does not support transparency.
JPEG is considered a worse choice for storing images that require further editing as it suffers from generation loss, whereas lossless formats do not. Since PNG's extreme inefficiency in compressing photographs makes it not useful for saving temporary photographs that require successive editing, the usual choice is a loss-less compression format designed for photographic images, such as lossless JPEG 2000, or Adobe DNG (Digital negative). When the photograph is ready to be distributed, it can then be saved as a JPEG, and this limits the information loss to just one generation. Furthermore, PNG does not provide a standard means of embedding Exif image data from sources such as digital cameras, which makes it problematic for use amongst photographers, especially professionals. TIFF, JPEG 2000, and DNG do support such meta data.
JPEG has historically been the format of choice for exporting images containing gradients, as it could handle the color depth much better than the GIF format. However, any compression by the JPEG would cause the gradient to become blurry, but a 24-bit PNG export of a gradient image often comes out identical to the source image, and at a small file size. As such, the PNG format is the optimal choice for exporting small, repeating gradients for web usage.

Comparison with JPEG-LS

JPEG-LS is a "near-lossless" image format by the Joint Photographic Experts Group, though far less widely known and supported than the other lossy JPEG format discussed above. It is directly comparable with PNG, and has a standard set of test images. On these images, JPEG-LS generally performs better than PNG, by 10–15%, but on some images PNG performs substantially better, on the order of 50–75%. Thus, if both of these formats are options and file size is an important criterion, they should both be considered, depending on the image.

Comparison with TIFF

Tagged Image File Format (TIFF) is a format that incorporates an extremely wide range of options. While this makes TIFF useful as a generic format for interchange between professional image editing applications, it makes adding support for it to applications a much bigger task and so it has little support in applications not concerned with image manipulation (such as web browsers). It also means that many applications can read only a subset of TIFF types, creating more potential user confusion.
The most common general-purpose, lossless compression algorithm used with TIFF is Lempel–Ziv–Welch (LZW). This compression technique, also used in GIF, was covered by patents until 2003. There is a TIFF variant that uses the same compression algorithm as PNG uses, but it is not supported by many proprietary programs. TIFF also offers special-purpose lossless compression algorithms like CCITT Group IV, which can compress bilevel images (e.g., faxes or black-and-white text) better than PNG's compression algorithm.

Source :
*** Wikipedia***
User avatar
Tariq
Proud Member
Proud Member
Posts: 1291
Joined: Wed Jan 28, 2009 5:37 pm
Full Name: Tariq Julfiker
Expertise: Artist

vhai aishob bapar shapar ami tamon bugina ... ai topic thaka onak kisu janlam ... vhai Giff animation nia aktu bolan ...
User avatar
ranabrt
DD Addict
DD Addict
Posts: 728
Joined: Sun Jan 06, 2008 9:03 pm
Full Name: HAFIJUL AMIN (Rana)
Expertise: Graphic Design

The Graphics Interchange Format (GIF) is a bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.
The format supports up to 8 bits per pixel thus allowing a single image to reference a palette of up to 256 distinct colors. The colors are chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color.GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality.

Animated GIF

GIF is designed to allow users to define new blocks. In the 1990s, Netscape designed the Netscape Application Block, which indicates that a GIF file is an animation instead of a static image. Support for these animations first appeared in Netscape Navigator version 2.0, then spread to other browsers.
An animated GIF file comprises a number of images or frames to be displayed successively, each described by its own GCE (Graphic Control Extension), preceded by a header whose content by default applies to all the frames. After the header the data is stream-oriented instead of being at fixed indices, so the location of the start of a GCE depends on the length of preceding GCE(s). Within a GCE the LZE-coded image data is arranged in blocks each of up to 255 bytes; the size of block is declared by a byte that precedes it.

Animated Gifs Detailed
Animated gifs actually contain a series of images (or frames) that are displayed one after the other and give a semblance of animation, just as in traditional animation techniques. Also, in animated gifs you can control the time for which each frame is displayed. Consider the image below:

Image
The image consists of 8 frames each playing for 10 milliseconds each.

ImageFrame 1 : 10 milliseconds

ImageFrame 2 : 10 milliseconds

ImageFrame 3 : 10 milliseconds

ImageFrame 4 : 10 milliseconds

ImageFrame 5 : 10 milliseconds

ImageFrame 6 : 10 milliseconds

ImageFrame 7 : 10 milliseconds

ImageFrame 8 : 10 milliseconds

Our animated gif of a running dog (above) starts at frame no. 1 which plays for 10 milliseconds and then frame no. 2 is displayed and so on. When the last frame (no. 8) is reached, the image loops and displays frame no. 1 once again. You can specify the number of loops you want in the animated gif or you can set it to loop indefinitely.
In the above animated gif example, each frame is played for 10 milliseconds. Now, let us change this to 25 milliseconds as in the image below.
Image

You will notice that the dog has started to run slowly and its motion is jerky because the frames in the animated gif are displayed for a longer period (25 milliseconds instead of the 10 milliseconds like in the original). If you want to create a slow running dog but with smoother motion you would have to create many more frames especially those that go in-between the start and the end frames.
User avatar
Tariq
Proud Member
Proud Member
Posts: 1291
Joined: Wed Jan 28, 2009 5:37 pm
Full Name: Tariq Julfiker
Expertise: Artist

Thanks ... nice post ...
Post Reply

Return to “Graphic Design/Art Discussion”