GIF vs JPG – Which is Better?
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
When a design is in it’s final stage and ready to be moved to a developer, or if there are product images ready to be uploaded that just need some final touches to get file size down, the “Save for Web & Devices” window (formerly part of Imageready I believe) can save you tons of issues with file size and compatibility. In this tutorial I’m going to break down a few things I have picked up through various projects that may help you with your own projects.
Images with Lots of Color – JPG is the answer
There comes a time when it’s better to use GIF files, and there are other times (the majority of the time) where JPG is the proper format to use. By default the JPG quality is set to 60 and generally without zooming in it’s hard to tell any quality difference. The photo I used below ended up being 72k with the JPG quality set to 60. As a GIF the image is 113k and you can see a noticeable difference in the quality. (The JPG being the better of the two even though it is smaller) Here’s my files and my settings.
You can see the image on the left has less color and detail especially in and around the glasses where it gets pixellated. The settings for these images is below:
Images with few colors – GIF is the answer
40k JPG:
32k GIF:
In this particular situation you can see that the images are virtually identical, and yet the gif is smaller in file size. If you’re really sharp you’ll notice that the word “ass” appears too, it actually says Assault people, before any of you people on QBN go ahead and post it and make fun of me. Here’s the settings I used for these two files (I tweaked the GIF settings to lower the color count which ultimately dropped the file size down significantly)
The basic rule that I find is that the large images with lots of color will always be JPG, but sometimes when images are small, around thumbnail size, gifs will work better then as well because you can only see around a hundred colors anyways. (For images under say 100px by 100px)
Other Reasons to Use GIFS
Another topic I will cover later is transparency. If you need an image to be partially transparent then the answer is never going to be a JPG, because there’s no transparencies with JPG. GIFs are currently the only form of transparent image that are supported by the major web browsers all the way back to Internet Explorer 6 with the exception of using a quite handy (yet at times tricky) png transparency workaround. My next tutorial will be on transparency, and when it’s better to use PNG vs GIFs for transparency. For now let’s just say that if you can make the gif look good with a matte and transparency you should use GIF for transparent images.
Conclusion
The majority of the time when it comes to putting photos up on the web it’s going to be better to use JPG, but when there isn’t alot of colors you can reduce the color count in the Save for Web & Devices settings and get a result that looks the same, but is smaller in file size.
UPDATE: I forgot to mention, GIFs are also the only image format that supports animation (although it tends to get really large in file size really quickly. (Thanks Sean)
UPDATE 2: If you’re going to rant about GIFs, read the full article and refer to my Transparency Tutorial for any transparent related issues.
Don’t Miss:
- Assault Apparel T-Shirt Website (We use both a combination of Gifs and JPGs here to keep our page sizes down)
- PNG Transparency for IE6 Workaround
![[Post to Twitter]](http://assaultblog.com/wp-content/plugins/tweet-this/icons/tt-twitter-big3.png){kind=icon}
![[Post to Delicious]](http://assaultblog.com/wp-content/plugins/tweet-this/icons/tt-delicious-big3.png){kind=icon}
![[Post to Digg]](http://assaultblog.com/wp-content/plugins/tweet-this/icons/tt-digg-big3.png){kind=icon}
![[Post to StumbleUpon]](http://assaultblog.com/wp-content/plugins/tweet-this/icons/tt-su-big3.png){kind=icon}
About the Author
Tim is the co-owner of Assault, and is responsible for the design and development of both Assault Shirts.com as well as AssaultBLOG.com. Follow him on twitter @assault
Email this Author | All posts by tim
Categories: Tutorials
This isn’t a case of “one is better than the other.” The two compression schemes were created with entirely different purposes in mind. The main difference between the two is the way in which the data is compressed. The basic rule of thumb is this:
If it’s a photograph, use JPG.
If it’s a graphic, use GIF. (or PNG)
JPG doesn’t support transparency and is lossy (you’ll see artifacts of the compression is too high) but it can generate a wider range of colors.
A GIF will limit the number of colors, but it’s lossless and can have transparencies.
I think the title of the post is a bit misleading perhaps, it should be something more like, “Which is better in each scenario, gif vs jpg”, but that would have been too long.
Don’t forget only GIFs support animation
Couple things – 1) Where’s the mention of PNG? PNG-8 is VERY often a much smaller and better looking alternative to GIF, and it is supported in all modern browsers. PNG also allows you to select your own palette for better support of images with small numbers of unique colors. PNG24 is the only usable format for alpha transparency (and would be even easier to use if M$ were less of a d-bag conglomeration). I find that many many many times, PNG is a far superior format to GIF in theory and practise. 2) GIF isn’t the only format that supports animation – try MNG! (yes, I know, useless as nothing supports it, but it’s out there…).
Whaaa! Somebody’s still using GIF!
No, honestly though, I wouldn’t recommend GIF to my worst enemy… Use PNG instead! The 8 bits PNG is at least similar to GIF (except it’s an open format, making it even better anyway), and the 24 bits is amazingly great with its 256 levels of transparency…
Moreover, Firefox 3 supports APNG, the Animated version of PNG. Check it out: http://animatedpng.com/
John:
Our next article is on transparency and it covers PNG transparency. It’ll be up tomorrow!
GIF and JPG aren’t the same and shouldn’t be compared.
If more than 256 colors, use JPG. If not, always use GIF (size matters people).
IE6 doesn’t support PNG and PNG fixes SLOW the site BIG TIME. PNG makes larger images than GIF’s.
no offense.. but the title of this thread is all I read and needed to read as i find it a completely useless conversation.
Gif’s are made for solid color images. no gradients etc.
Jpeg’s are made for pictures. Peoples faces, landscapes etc.
so obviously you should be using them for those situations.. the image quality in the gif is considerably poorer than the jpeg.. bc again thats what jpegs are for.
if you really wanted to debate image format you should be debating gif which is dying vs png8 which is far more superior and is designed for both solid color representation and gradients. it also typically has a smaller file size. the only time i would ever use a gif anymore is for the simple transparency and low file size it does but its not true alpha so you get the white pixels making them have a very small niche use.
so in the context of this post which starts off false… jpeg is superior. you can see it in the image quality.
David: The next tutorial that I’m going to post is regarding PNGs & GIFs and the reason why as of right now GIF is the only truly compatible way to use transparency with the web because PNGs are so large and the gradual transparency isn’t supported in ie6 without hacks.
And if you had read the full post you’d realize that with gif you can change the color of the matte the alpha channel uses with gif to closely match the colors that will be behind the image such as I have done with the top graphic. Thus eliminating the “white pixels” making them usable in a small niche.
If you had read the entire article rather than just the title you might have known that.
For awhile I thought i had to agree with their contradictions.
But again you homed in your point. Thanks a lot, Tim!
Keep ‘em coming!