Page 1 of 1
Graphics for website interfaces
Posted: Tue Aug 11, 2009 1:52 pm
by ben.artiss
Hi everyone,
I know this is probably naughty to post this here and really old and talked about, but it's been bothering me for ages and I wanted to know some of your more 'up-to-date' opinions.
Do you think the time has come where it is acceptable as a developer to stop worrying about the terrible rendering of PNGs in Internet Explorer? I think the variable transparency is genius and the advantages of using PNG instead of GIF (in my opinion) far outweigh the only advantage I know of with GIFs that is filesize. I mean... just how many people are using versions of IE lower than 7 these days?
I'm hoping someone will be reassuring and say "Sure! It's OK to forget about quite a significant percentage of people using earlier versions of internet explorer" or perhaps tell me "It's OK to use a JavaScript plugin to fix it for most browsers" but I have a feeling the time hasn't come just yet!
I really would like to know what other people are doing with their website's graphics, because I feel bad for using PNGs due to IE incompatibilities, but really don't like being limited to on/off transparency with GIFs. Also, I know it would be a really tiny percentage of users, but if you used a JavaScript PNG fix what about the people using IE <7 with no JavaScript installed/enabled?
Regards,
Ben
Re: Graphics for website interfaces
Posted: Tue Aug 11, 2009 2:48 pm
by pickle
I use PNG files for everything but the public facing website for my employer. Until IE6 drops below 10% of the users we see on our site, it'll stay that way.
That said, there is a movement starting where developers and websites inform users when they're using IE6 and tell them to upgrade. The rationale being that most people still using IE6 don't realize they're using a busted old browser, so simply informing them of that fact should get them to upgrade.
Re: Graphics for website interfaces
Posted: Tue Aug 11, 2009 2:56 pm
by Eran
IE6 only has problem with transparency in 24-bit PNG. Otherwise they work the same as any other browser. You can also fix it directly in CSS without Javascript, if you are familiar with the correct filters. The only thing against 24bit PNG with transparency is their massive size, and for that reason I use them sparingly.
Re: Graphics for website interfaces
Posted: Tue Aug 11, 2009 3:31 pm
by izzy4505
There isn't a right or wrong answer to this question. It all depends on what you're doing, and the needs of your audience. I'm typically the first one to stand up and say continue supporting old browsers. Do you think your users really care or understand why you're pleading them to upgrade? No, they don't. Do they think that their browser is broken? Probably not. If they do notice things acting not-up-to-bar, they're probably blaming their computer manufacturer, or the sites that they're on.
Take a look at your analytics and see how many of your users are still using IE 6. On the most popular sites I run, it tends to be about 9%, but it is going to be different for every site. Then decide, if losing 9% of your visitors is worth it. Then flip it back around, and ask yourself if tweaking a couple images on your site is worth increasing your traffic by 9%.
Now also keep in mind you can solve this alpha channel problem easily:
http://homepage.ntlworld.com/bobosola/index.htm
I've only had one site where pngfix.js had issues, the rest of the time it works quickly and flawlessly.
Back to what pytrin said... he's exactly right. You need to watch file sizes and think about bandwidth. You should only be using alpha channel images where it makes sense and is needed. I've found that with a little thinking, I can usually find a way to make things work great without it. Keep in mind that when you layer images, you're pushing twice the number of pixels over the pipe then will ever be displayed. This is only necessary if you have a translucency component that isn't in a predictable place upon a background.
Re: Graphics for website interfaces
Posted: Tue Aug 11, 2009 3:34 pm
by Eran
This is not really for bandwidth (which is cheap), it's for improving page load times (which is important for user experience). You can also achieve a lot with 8-bit (boolean) transparency if you know your way around image editing programs (such as photoshop). A 24bit transparent PNG should be used only when displaying over a gradient / texture or otherwise non-uniform surface that is moving (for example a fixed image over a scrolling background).
Re: Graphics for website interfaces
Posted: Sat Aug 15, 2009 6:36 am
by ben.artiss
Just as I feared

I figured there would be numerous reasons why not to stop worrying about IE6 - didn't think of the approx. 10% traffic! I read an
interesting article just now; I think all web developers should follow suit lol - until the day comes though, I will continue to be nice to IE6 users!
Thanks for the replies man.
Re: Graphics for website interfaces
Posted: Sat Aug 15, 2009 6:45 am
by jackpf
I stopped being nice to them ages ago
I don't care what they see any more... But I guess you guys actually code for businesses who need their website to be accessible by all...so I see your point.
Re: Graphics for website interfaces
Posted: Sun Aug 16, 2009 12:07 pm
by JAB Creations
Interestingly I had this discussion with someone yesterday.
My primary concern is quality, then file size, then compatibility though I seem to have struck a rather respectable medium of all three.
I use index colored GIF images for most web UI images. The person I was discussing this with introduced me to PNG-crush though it didn't really seem to reduce the file size much. What did reduce the file size of PNG images was using Gimp instead of Photoshop. However it seemed roughly half the time GIF was small and half the time PNG was smaller...though neither really trumped the other by more then a couple hundred bytes.
So if it's transparent I use GIF without a question. If it's not and the file size turns out smaller then GIF I'll start saving images as PNG.
As far as JPG images are concerned I try to avoid using except when the color count is high. PNG images simply lose to JPG as far as file size is concerned, though it's like comparing apples to oranges, JPG is lossy while PNG is lossless.
What I'd really like to see if a feature that lets you reduce the color count for a PNG image above GIF's 256 color limitation found in Photoshop's save for web option. I was not able to find an equivalent option in Gimp though I never really use it. I will start using it now to see if I can shave off a full second of load time for the next version of my site. About the only thing left that I could try at this point is using the CSS sprite technique to reduce HTTP requests...maybe though not until version 3.0 of my site for me.
Unfortunately for larger images I really don't see any choice other then JPG at this time for what I do. I totally agree with izzy4505 that it's subjective to what you're trying to achieve.