Like many of you, I spend a fair bit of time saving out graphics for use on the web. So when I’m browsing around the web, just by second nature I spot optimization mistakes. Kind of like how a typesetter can spot a kerning foul from a mile away or a football fan can spot a botched defensive play just by seeing the formation.
I’m not picking on Blogging Tips, it’s a great blog that I enjoy reading, but they just launched a new design that features a big bold red header with some reverse block type. This is classic GIF territory, but they went JPG. JPG in this case will cause artifacting around the letters as a result of the compression. See below:
When should you use JPG and wen you should you GIF?
The use of images is a big part of CSS, so it’s good to have this information handy
Use GIF when your graphic uses a relatively low number of colors, there are hard-edged shapes, large areas of solid color, or needs to make use of binary transparency. These exact same rules apply for 8-Bit PNG’s. You can think of them almost exactly like GIF files. PNG’s can’t do animation like GIF can, but are often lower in file size.
Use JPG if your graphic uses a high number of colors, it uses gradients or contains photographic elements.
These are just rules of thumb.
Like all rules, these are made to be broken. There are plenty of circumstances where they don’t hold up. For example, photographic images that are fairly small and monotone-ish might work great with GIF. Likewise, gradients can sometimes turn into cool effects with GIF compression. The bottom line is you should do some testing and see what looks best. That the beauty of the 4-up Save Optimized As dialog in Photoshop.
What about PNG?
Mmmmm. 32 Bit PNGs. It’s such a lovely format isn’t it? Lossless compression. ALPHA transparency. Gamma correction. 48-bit color. Often smaller file sizes. What’s not to love? Well the main reason to use PNG is for that beautiful transparency, and that is exactly what doesn’t work in IE 6 and lower. There is some hackage that can be done to make it happen, but it’s often quite a bit of trouble. PNG is certainly usable. I often use it since it is the native format of the screenshots I take, but for most, PNG is nothing but a tease. As soon as IE 6 starts to drop off the map, we will see more widespread use start happening.
More: Misconceptions about PNG
RE: PNG’s
I love PNGs I often use them despite IE6 users. What I recently have been trying, is using a PNG and having a IE6 only style sheet that uses GIF files in place of PNGs.
This does two things
A) Keeps the site pretty to those who care (why should we punish the ones who embrace new technology)
B) Keeps the IE 6 losers (i mean users) seeing the web the way they are used to seeing it, chunky and not as smooth as intended.
Using an alternate stylesheet is a great idea, but sometimes the application of the PNG is just not something a GIF can pull off. For example, a drop shadow. The PNG will multiply itself nicely over what is behind it (without having to know what is behind it), but the GIF will be unable to do that. You just gotta pick a matte color and go with it, which can suck.
I use PNGs for page backgrounds a lot but always found that the colours in PNG and the color spepcified for say the body color never quite matched in IE.
Then I discovered http://entropymine.com/jason/tweakpng/
and all (well, many) of my problems were solve.
Very interesting. I’ll have to check that out.
in regards to the gif v jpg v png, it is one rule that most people do not actually know (talking from past experiences). It is one thing that can make the design look that bit better…
Thanks for pointing this out Chris. Design isn’t one of my strong points so I appreciate the tips.
In the past I have usually used jpegs for logos and used gifs for other graphics on the site. In future I’ll bear in mind the points you brought up :)
Hey Kevin!
Yeah like I said I wasn’t trying to pick on you =) I just happen to be a reader of blogging tips, noticed it, and it sparked the idea for the post. I’m glad it could be helpful.
Typo in the line underneath the red artifacting logo. “When should you use JPG and wen you should you GIF?” wen = when
Heres a tip:
If you save your images as PNG 24 bits, you’ll have a lovely transparency than won’t work on IE6, but if you save your images as PNG 8 bits you’ll have a crappy transparency like the one from the GIFs but it WILL work on IE6, and you get to keep the smaller size and smoother transitions between colors.
So, the question you should be asking is, shall I use JPG or PNG?
@delFuego: Very good point. I’ve never really considered using 8-bit PNG’s but I think you are right, might as well. That is, in the cases that the file size is actually smaller and you don’t need the animation possibilities of GIF.
Thank you for this information. Next time when i prepair pics for web i will bear your post in my mind.
Glad delFuego mentioned the 8bit PNG’s as these are what I’ve always used instead of GIF’s. Ideal for static images where you’d normally be forced to use GIF for optimisation
I am a total convert now on PNG-8. The only reason I can see to use GIF anymore is the weird random circumstances it compresses better and when you need animation. I think the misconception people have is that when they think PNG they normally think PNG-24, which is PNG with alpha transparency and file sizes normally way higher than any other format.
PNG-8 is a damn good option for the time being.
Hi, I’m probably a bit late for this comment, and I see you’re moving towards PNG-8 anyway, but I think there is a cutnpasto on the page:
Shouldn’t the phrase “or needs to make use of binary transparency” be at the end of the Use Gif section rather than the Use JPG section?
Anyway, good article, this is one that often bothers me too, thanks,
Tim