Difference Between Jpg and Gif

Status
Not open for further replies.
S

sweepswollon

New member
I am not a computer science geek and thus do not understand the details that goes behind when the images are stored. The thing i am interested to know is that what are the major difference between Jpg image Format and Gif and what is most suitable for images for a website.
Which format out of Jpg and gif is more suitable for storing animations and what is the reason for this. If any body can tell me the difference in both of these types and if these are interchangeable. By interchangeable i mean that if an image is stored in Gif format can it be converted to Jpg and vice versa and what would happen to the quality after the change in Format of Jpg to Gif and Gif to Jpg.
Also tell me what Graphical editors can be used to manipulated and edit images of both of these formats.
 
GIF supports animation and basic transparency. GIF images compress the best when the source image has a lot of solid areas and not a lot of variation vertically. In other words an image with a lot of solid horizontal lines would compress better than an image with a lot of vertical lines. The reason is GIF reads images from left to right line by line, looking for long blocks of pixels where it can skip over. JPEG images are better suited for photographic quality images with a lot of detail. JPEG doesn't support animation or transparency. Similarly, when you're dealing with source images that have a lot of solid colors, sometimes JPEG compression artifacts can stand out more, and a GIF would probably be a more suitable format. GIF files can get really large if you try to convert a photographic image with a lot of detail and gradations in it, the more you try to reduce the colors in them the choppier and more posterized the image will become. JPEG generally gets lower file sizes, but you can see compression artifacts at smaller sizes.
 
You should also checkout the PNG format, it's used a lot as a format for pictures to have on your website. It can have transparency too and it can take less space than a gif, but of course, it doesn't have animations.
Regarding gif's, the big advantage is really animations, if it's just a image, i'd go PNG, or maybe jpg if it's a big one.
 
True, PNG is probably the most flexible of the three since it has the color depth of a JPEG but also alpha transparency - as opposed to GIF which has transparency, but with rough jagged edges, and it can only do 100% transparency. Honestly, I seldom see animated GIFs used at all these days, so I wouldn't really worry about those. You could just as easily create an HTML5 animation with some PNG files and pull off a similar effect - and possibly a smaller file size too since it's only loading each image component once, rather than a file that contains a bunch of separate frames as with a GIF.
 
Yeah that's a nice method.
Yet many people prefer to just create the gif with some gif editor/creator, instead of coding it by themselves with scripts.
 
I tend to use JPEGs when I am adding a photograph to my website such as landscape or the inside of a restaurant. Other than that I use PNG mainly because of its transparency ability. There is nothing worse than a picture with a white background placed on a website with a non-white background. I cant say that I have used GIF much as I do not usually use images with animation.
 
I can honestly say that I use PNG's for almost everything, GIF's in my opinion are only for animated graphics and should be used for nothing other than that.
 
In simple words, I will say, GIF files will give you a small resolution, sometimes, animation also.
Whereas, JPGs are designed to give you better quality with high resolution.
Most of the wallpapers that you set on your desktop, are of jpg format.
 
One thing to keep in mind though when working with PNG files, is that older versions of Internet Explorer have issues with handling the alpha transparency and opacity of them. In some cases they will either ignore the transparency info all together or make it a really harsh transition such as a GIF. There are some extra steps you need to take to work around this. You can read more about it here: Solving IE7 & IE8 PNG Opacity Problems
 
JPEG is used for photos, while GIF is better used with logos, graphics and cartoons.

When GIF is used with photos, the file (photos) are not as compressed as if JPEG were used.

When JPEG is used with logos, graphics and cartoons the file is not as compressed as with GIF.
 
The jpg is a join picture image which are make with combined millions of pixels on it and gif in an image which is movable image.....This is a basic difference of JPG and GIF..
 
BlackCobra said:
I can honestly say that I use PNG's for almost everything, GIF's in my opinion are only for animated graphics and should be used for nothing other than that.
Click to expand...

I have to agree with this only to a certain degree. PNGs are very good at preserving quality of an image and the alpha of an image, but that's pretty much all there is to PNG. GIF and JPG have the ability to have animated images, lower sized files with mediocre quality (when you really dont NEED quality at a certain scale, say a 16x16 icon), and less file size = speeder loading time.
 
JPG is a still picture, and a type of picture format. JPG is mostly better for photography. PNG's are also similar to JPG since they both represent still pictures. GIF is a movable image. Gifs are usually very small, but they loop a certain video for a certain amount of seconds.
 
Jpg stands for Joint Photgraphic Expert Group.jpeg files used on the web. these images are very small in size, but they looks very beautiful.Jpeg supports up to 16.7 million colors,which makes the right choice for complex images and photographs.
Gif, ( Graphic Interchange format) is also a older filetype like jpg. It generally associated with the internet as opposed to photography and the employs the lowless LZW compression that TIFF used.
 
There is an interesting technique being used now with Jpegs in response to the need for higher resolution images for high resolution displays. Whereas some webmasters are simply double serving higher resolution copies to detected devices, or worse yet higher resolution copies to everyone and just using HTML/CSS to shrink the display of them down for lower resolution devices - someone realized a clever way to have sharp images and lower file sizes than their original resolution counterparts.

What they are doing is making the images way larger, even than what they would need for the hi-res displays. Then they are compressing them very heavily, like as low as 20%-30% quality. Apparently the compression has more of an impact than the image size, which keeps the overall file size down. However the large file size hides the compression artifacts and makes the images look sharper.
 
Jpg and Gif files are all two used for the web. The difference is the resulting image. GIF files are also used very much on the internet because you can make a certain color transparent. Another one is GIF images are great for creating very low resolution files for your website and important difference between GIF and JPG, is that JPG does not preserve transparency.
 
There was also some concern in the late 90's over the company that created the GIF file format. Apparently they are charging several thousand dollars to companies who were using the format in their products. There was a lot of bad press about this and it led meany webmasters to believe they too were going to get charged this for using GIF files on their sites. I think PNG was partially created in response to this.
 
Status
Not open for further replies.
Back
Top