89 Comments
- TheRappingShoe, on 10/12/2007, -2/+27That's an excellent guide.
A lot of people don't really know about the benefits of png's in particular. - Salvo, on 10/12/2007, -2/+20PNG's were first conceived of 11 years ago, and Specification 1.0 was released over 9 years ago.
MNG's (multi-image PNG's) is a new file format, but the 1.0 spec is still 5 years old.
If you want to detract from the article at least get your facts right, you were out by a factor of 3. - Rickard, on 10/12/2007, -0/+15It might be old, but it's certainly not outdated. Sure, the GIF patents don't apply anymore, but people shouldn't use GIF anyway. It has no benefits over PNG these days.
- SuperSloth, on 10/12/2007, -5/+18Yeah. And none of those more important things will ever see the front page of Digg.com. More important things are are on Reuters or BBC News. Not here.
- Mike89, on 10/12/2007, -0/+10I had a friend who was insistent that JPG was the all-mighty image format and you were an idiot if you used anything else. He brought this up with me when I sent him a desktop screenshot as a PNG. My simple input into the arguement was "Alright, if JPG is so much better, show me a JPG of your desktop". His image ended up being 3 times the size with shocking clarity ;)
- hugepedlar, on 10/12/2007, -2/+10I bought the excellent book "Stylin with CSS" by Charles Wyke-Smith. Nicely laid out and easy to read, except that it's horribly marred by JPG screenshots with terrible artefacts in every picture. Unforgivable. What possible reason would they have for putting lossy JPGs in a BOOK??
- sjk8990, on 10/12/2007, -1/+7I think a lot of people don't know about .png's goodness is because IE doesn't support them well enough.
- bobb243, on 10/12/2007, -1/+7perhaps if ms paint used the png format then it would be used more. not everyone cares enough to use photoshop or paint shop pro, etc to quickly throw an image on the web.
- cazamova, on 10/12/2007, -1/+7unfortunately, the users who should care about this will never read it because
a.) they dont use digg
b.) they dont worry about such things
and because of this, bmp files will spread through msn messenger / myspace etc forever and ever. - SuperSloth, on 10/12/2007, -5/+10So everybody except the one that 85% of the market uses? Nice.
- eridius, on 10/12/2007, -6/+11This article was last updated 3 years ago. Additionally the GIF patents expired 3 years ago, so that particular nugget of information is pretty inaccurate. And all this information has been around for a long time. Do we really need old, outdated newbie tutorials on Digg frontpage?
- pigdart, on 10/12/2007, -2/+7abobe has a svg plugin for ie
- UghtC, on 10/12/2007, -3/+8I always love it when people slag off N00b guides - I've always assumed that they are the sort of people who had this sort of information downloaded into their head prior to birth.
Yes, it could do with being updated a touch, but this sort of information is always valid - even in a historical context. - emanuelez, on 10/12/2007, -0/+4Nice article. Anyway the JPG - PNG comparison could be done better. The PNG version of the image shows JPG artifacts, which means that the original image has been previously compressed in a lossy way. Those artifacts add some noise to the original image so PNG could have had even better size performance on the original image. Just my 2 cents. Good job anyway!
- Saoshyant, on 10/12/2007, -1/+5Oh, r1ch's guide on digg, urgh.
Although this guide is from 2003, its content is still pretty actual. - Petronski, on 10/12/2007, -6/+10I think the "digg-undigg" system has become a little vindictive. A -8 for noting that an instructional thread taught me something?
I don't understand that. - chriskelley, on 10/12/2007, -2/+6Bandwidth is the difference - sure a jpg at 70% looks just as good as a gif can, but when implemented properly you can drop a gif down to an 1/8th the size of that same jpg, saving huge bandwidth. And yes, 10KB does make a difference if you're a high traffic site. If a site gets 200k hits a day, and you can save 10KB on a single image, that's almost 700GB of traffic/year saved - and on one image alone.
step 1.) optimize all your images properly, drop just 1MB off your total site footprint
step 2.) tell your boss you're going to save him 70 TERABYTES a year in bandwidth
step 3.) take wife to Hawaii with new found Christmas Bonus - kapowaz, on 10/12/2007, -0/+3As I understand it, PDFs (can) use lossy JPG compression for images embedded within the document. As PDFs get pretty big anyway, this is one potential way of making a PDF file smaller before sending it to the printers. Not a good excuse though; for final print version they should use lossless compression.
- NoMoreNicksLeft, on 10/12/2007, -12/+15Where's SVG in all of this? SVG takes care of vector art, interactive diagrams and effects, and if you want, even animation. All real browsers support SVG in beta at the very least. (That is to say, all except IE).
- captaindan, on 10/12/2007, -1/+4Unisys' LZW patent expired in 2003 and 2004, depending on where you live. IBM also has a patent on LZW that expires this year.
- sstidman, on 10/12/2007, -3/+6"Not to mention that Unisys holds patents on the compression algorithms used in GIFs, which essentially makes them illegal to use without a license."
I know this article is old and needs to be updated, but just so everyone knows, the above statement is no longer true. The Unisys patents on GIFs have expired, as far as I know. - cosmotic, on 10/12/2007, -1/+3Revision 1.3, 09/03/2003. © 2002 Richard Stanway.
WAY old - mezz, on 10/12/2007, -0/+2More people need to know about .png, and great changes from .gif to .png may force IE to support the alpha channel better.
Until then, I use a javascript function to make alpha transparency work on IE:
http://www.codeproject.com/jscript/IEPNGsupport.asp - ShaDoWwork, on 10/12/2007, -2/+4i too thought it was a good refence for people to read and explained a lot
some of the simple things get missed whne we look to be the best newest flashest site on the web and this sort of thing makes the differnce between a good quick clean site and a slow blurry rough looking site
so digg and good info. - marke, on 10/12/2007, -0/+2Agreed (authority?), and the attitude is enough to put some people off (English humor?). After a few more clicks, come to find out the author is 'Richard Stanway' a student. There is even a picture of him -- well, I think it's him.
http://www.r1ch.net/me/about/
Kinda' blurry. Maybe the website photo uses the wrong picture format or compression?
All in all, good overview and information. Thanks for the effort. - zootm, on 10/12/2007, -1/+3I just tried that PNG test page in IE7 (beta) and was pleased to see that they worked fine. :)
Then I closed it and went back to Firefox ;) - madeingermany, on 10/12/2007, -1/+2I wish my colleagues would read this, so they stop sending me uncompressed screenshots in 2MB mails ;)
- SupaDawg, on 10/12/2007, -1/+2FYI, i use a small javascript to properly display PNG on my websites. Of course the IE/PNG gamma issue still exists rendering PNGs darker than the original or the JPEG/GIF.
I have also had some success using PHP to do it.... with the PHP taking much less time to load. Read about the php fix here:
http://koivi.com/ie-png-transparency/ - Bogtha, on 10/12/2007, -0/+1Who said anything about making a case against optimisation? I'm just pointing out that the numbers you have are way off. For many people 35GB/yr is negligable and included in the base rate, but 700GB/yr is not negligable and costs extra.
- joelhardi, on 10/12/2007, -0/+1Spreading misinformation about GIF just plain isn't helpful, especially since there are situations when it's the best format to use and budding web designers shouldn't be scared away from it for the wrong reasons. Even when the original Compuserve patents were in force, it just meant that the company that sells you the software you use to create GIFs (i.e. Adobe, Photoshop) had to pay license fees -- there wasn't any per-GIF tax!
I love PNG, but in production sites I still use GIF for the odd image here and there, for several reasons:
- PNGs produce smaller file sizes than GIF for the vast majority of images, but for small images < 2K or so, GIF is optimal. As in 400 bytes instead of 700, so if you've got a lot of small images, it adds up.
- I can do transparent images that IE will render.
- Older versions of IE can't render PNGs at all -- I care more about those users than saving a couple of KB on a 20K image.
- Animated GIFs ... still useful in cases when Flash isn't called for and accessibility is important. - kryptokatalyst, on 10/12/2007, -3/+4Definitely old, but still a very good guide to those new to web design. Good story...dugg.
- sailor, on 10/12/2007, -0/+1I don't quite agree with all of the posters comments...
I have always looked at the various formats as follows:
gif=large file size, renders the fastest, transparency
jpg=small file size, renders more slowly. no transparency
png=small file, render slower, has transparency
To me png is a cross between gif and jpg, but has not been supported by all browsers.
The rest of his statements about what format to use are merely opinion.... - feshmania, on 10/12/2007, -1/+2I believe that that is most people's problem with this post, he doesn't suggest what to do with IE. Personally, I just use GIFs where transparency is needed, but I'm not sure it's the best way
- funderbolt, on 10/12/2007, -0/+1@NoMoreNicksLeft
SVG is still kinda bleeding edge. You won't see people installing it until there is some killer application for it or it just comes as a default (on IE).
On the other hand, SVG does provide for another image that replaces for the SVG content.
Currently, I hesitantly support SVG, but with people I'm designing for most can't view SVG without the plug-in. I don't want them to have to install the plug-in (I don't work for a Web 2.0 company). - Dimecross, on 10/12/2007, -0/+1For people interested in PNG's support for alpha transparency but hold back due to the spotty results in IE 5.5 /Win browsers, there's a useful article at A List Apart that offers a solid workaround:
http://www.alistapart.com/articles/pngopacity/
It's got useful information for many other things relating to opacity. - sstidman, on 10/12/2007, -5/+6Yeah, I thought that anal retentive intro was unnecessary. I almost closed the tab after reading that immature rant, but the rest of the guide was at least somewhat interesting to read, so I tried to ignore the rant. My favorite part of the intro was:
"if you aren't going to be bothered close your browser now and save my bandwidth."
Ummmm...if someone is reading that sentence, then it is too late to save the bandwidth. - briareus, on 10/12/2007, -1/+2The tone is lame. The page isn't even likely to be read by those who would benefit from it the most. Instead, we're stuck looking at it.
No Digg. - Bogtha, on 10/12/2007, -1/+1> If a site gets 200k hits a day, and you can save 10KB on a single image, that's almost 700GB of traffic/year saved - and on one image alone.
That's bogus maths. You are neglecting to factor in the effect caches have. In most cases, images get a higher cache hit rate than pages due to things like use of server-side scripting, using the same image on multiple pages, etc. For a typical site, you might only be transmitting the image 10,000 times for 200,000 hits, making the 700GB in your example ~35GB. Or it could be higher or lower, it depends on the site. But it's very unlikely that you'd get anywhere near to a 1:1 ratio unless some numbskull has disabled caching altogether. - merreborn, on 10/12/2007, -1/+1Personally, I don't use PNG often, 'cause I got started with image manipulation 12 years ago, long before anything of note supported PNG. Even now, as even this article admidts, PNG support is *still* incomplete.
Generally speaking, no one really cares if that screenshot of your desktop is a 32k jpeg, a 20k png, or a 27k gif. As long as it's not a friggin' 2 meg bitmap, it's good enough -- color depth and aliasing are largely unimportant to most users in a non-web design context (i.e. sharing Quake2 screenshots, etc.). The most important thing is that it works. And up til a few years ago, PNG didn't fit that criterion. - casiotone, on 10/12/2007, -2/+2because this is a bitmap compression comparision. vector graphics are a completely different field.
- Saoshyant, on 10/12/2007, -1/+1For your information, PNG's standard transparency like in GIF's is supported in IE. It's the Alpha Channel Transparency that is not supported. GIF does not support AC Transparency either.
You would lose nothing in convertig your GIF's to PNG 8 bits. It's your choice, though. - Mike89, on 10/12/2007, -4/+4You know it's a genius posting when 'Paint' analogies are used to replace actual compression settings ;)
- chriskelley, on 10/12/2007, -6/+6"In other words, all the browsers that matter."
I don't see how a browser that has 85% of the market doesn't matter - DNABeast, on 10/12/2007, -0/+0Indeed. If your image is very small or has a very small amount of colours you may find that a gif file is smaller than a png. PNG files have ever so slightly more header overhead. Most of my custom bullets tend to be gifs.
Many image programs have the ability to compare file sizes before saving them. In photoshop it's 'save for web'. - crapbox, on 10/12/2007, -0/+0here's an example of why you shouldn't use jpeg for a screenshot
http://java-gnome.sourceforge.net/screenshots/java-gnome.jpg - inactive, on 10/12/2007, -1/+1I read this two years ago, and was actually looking for this article last week. Thanks for posting this!
- unfinity, on 10/12/2007, -1/+1I'll say! How dare he put a guide out there so people know which formats are most efficient and effective in different situations?
Seriously dude, why does the author need to "get a life"? You're right - jpeg WILL do just fine for sending pics to your grandma, but how does knowing what might be a better option hurt anything? - AmZa, on 10/12/2007, -1/+1Condensed version:
* JPEG:
o Good:
Photographs
Game screenshots
Movie stills
Desktop backgrounds
o Bad:
Windows application screenshots
Line art and text
Anywhere where fine lines or sharp color contrast is needed
* PNG:
o Good:
Text, line art, comic-style drawings, general web graphics
Windows application screenshots
When absolutely 100% quality is required (24 bit)
When alpha channel support is required
As a general replacement for anything that is a non-animated GIF
o Bad:
Photos, in-game screenshots (only when quality is not important and you're looking for small files)
Disappointing browser support from Microsoft and others
* GIF:
o Good:
Where animations are absolutely required
Widespread browser support
o Bad:
Patented, legal techicalities
Large file sizes compared to PNG for the same quality
Obsolete
...I would still read the article though, if you can - crickton, on 10/12/2007, -1/+1You could grab some code to do a browser check for IE, and if so, display the GIFs. Not IE? Well then here, try some PNGs. This wouldn't always work as some browsers fib about what they are, but nearly all new browsers should support alpha channels, and I'm not sure that extra code would be worth displaying the optimal transparent image per browser.
PNGs are definitely hot, but IE not supporting them is a pain. - wonginator1221, on 10/12/2007, -5/+5It is not useful information... so it is -dugg..
-
Show 51 - 87 of 87 discussions



What is Digg?
Digg is coming to a city (and computer) near you! Check out all the details on our