IE6 png fix script, png-8, or gif?

[cssExp]

Hi,

Lots of my friends have started asking me to do xhtml and css markups for them since I’m getting better at it, though I’m not getting paid for most of them - it’s still good experience!

Anyway, I was wondering, when making layout for IE6 and there are various alpha-transparent png images used in the design - is it best to use png fix script, png-8, or gifs? what might be the big psd to html conversion complies doing?

Only useful png fix scripts I used are TwinHelix’s IE PNG Fix and DD_belatedPNG. The first one uses multiple files and crashes with repeated background images. The second one works wonderfully, but It uses relative or absolute positioning to place the corrected image on top of the original - which can cause some undesired effects sometimes.

I’m really torn between on what do when it comes to alpha-transparent pngs in IE. Any suggestions?

[system]

@deathshadow60

One does not preclude the other – and in the case of some companies, like AT&T, they are for both since they lock down windows to the point users can’t even install their own software and are restricted to what the company says.

Which means IE6 for Internet use.

Though locking it down so programs can’t install and just having a self-restoring wipe of the OS every day is HOW many companies – and even places like public libraries maintain their ‘security’. It gets infected, “who cares it will be erased with a fresh baseline of the OS overnight anyways.”

NOT a great way to do things, but a VERY common one.

you may have a point here.

but big companies that are having really good IT advisers don’t let viruses roam around their network. the servers don’t get wiped down and are vulnerable.

i look at these as some “half ass solutions concocted by a clouded mind” this is my attempt to adopt a DS60 style. one word: sandboxes. been around long enough to make locking down systems obsolete.

[system]

@deathshadow60

YES, because their in-house applications are built using elements of trident that even INSTALLING IE7/newer will break. See all the large corporations that are still running XP with no service packs for the exact same reason (and why ‘ultimate’ has that whole ‘xp mode’ vm bull). Because large corporate IT is SLOW to change – many of them around here still running ASA-400’s and even PDP-11’s because they are so tied to what was installed, and don’t have the $$$ to constantly change their hardware and software every three weeks like some enthusiast in thier basement.

no, they are not using ie to surf the net, but as a distributed intranet platform. which is different.

see my point:

and to clarify something: is one thing when you code a special web app for ie, and another to code a site that might be also visited by ie 5/5.5/6 users.

the first case allows you the “freedom” of coding knowing exactly your target.

the second one gives you the “freedom” to add some workarounds that are regarded as exceptions.

we are discussing the later, where ie 5/5.5/6 users are exceptions and must be treated as such. that is, ie will not constitute a reference system but html specs will.

if they do so (surf the net with ie 5/5.5/6), IT staff should look for work in the match making field to understand what and who goes where and how. again, corp users DO NOT SURF THE NET they work intranet.

and a sp can be tweaked to not update ie, or you can “uninstall” ie 7 to have just ie 6 but with sp3.

[system]

@felgall

For some months now Microsoft themselves have been recommending that everyone running IE 6 upgrade to a secure browser and have even said that if the operating system will not support IE 7 or IE 8 that people should switch to one of the alternatives.

Which is pure comedy gold since IE6 on mobile is only two years old and is still the latest version for CE/mobile. Yes, that’s right, two year old windows mobile/CE devices with the browser (and OS) in flash ROM are still stuck on IE 5.5

What? Did you miss the big “6 on 6” party for IE6 finally deploying on Windows Mobile 6 almost four months before the release of IE8? That’s ok, so did everyone else.

But that’s like the people saying “but I have less than xx% visitors from that” – you have to ask “yeah, but is that because there are so few, or because your site behaves like shmutz for those people so they’re going somewhere else that works?”

@noonnope

jokes aside, there are modern *nix distros that could accommodate even the most stubborn old system.

People say that, but I can’t even use it as my primary desktop OS on modern hardware without ripping my hair out over the half-assed nonsense that puts it a decade or more behind RoW – much less put grandma on it.

@noonnope

you’re telling me the IT staff in these corporates are allowing users to internet access using browsers that even their makers put the UNSAFE stamp on them?

YES, because their in-house applications are built using elements of trident that even INSTALLING IE7/newer will break. See all the large corporations that are still running XP with no service packs for the exact same reason (and why ‘ultimate’ has that whole ‘xp mode’ vm bull). Because large corporate IT is SLOW to change – many of them around here still running ASA-400’s and even PDP-11’s because they are so tied to what was installed, and don’t have the $$$ to constantly change their hardware and software every three weeks like some enthusiast in thier basement.

@Stomme_poes

Because any front-end developer worth his/her salt can EASILY write for IE5 and 6, so if you don’t, your competition can and will.

Damned straight, and they (we) can do so without any of that cockamamie IE conditional rubbish bloating out the markup either.

@Stomme_poes

I just recently saw a terrible page written in ASP with invalid HTML, multiple wrappers and a bloated slow javascript to make a dropdown menu… oh god, it burned the eyes.

Just look around the ‘help me, help me’ CSS area here on sitepoint for dozens of examples for that weekly – with people throwing fat bloated garbage libraries like mootools and jquery at pages to do CSS’ job, to add stupid animations that do nothing to ‘enhance’ the page while making it take ten times longer to load, and in general make it such a pain in the ass to get at the actual CONTENT (you know, text… and before you go “AAH- WALL OF TEXT” It’s called literacy, try it, it’s nice!) etc, etc, etc…

Hell, take the main index of these forums, ajax for nothing that takes longer than it would take to just serve the entire page flat – but even with the (CHRISTMAS ON A CRACKER) 217+K of javascript it’s an ungodly 83k of markup to deliver 9.9k of plaintext – what the blue blazes is that extra markup even doing apart from wasting processor time server side and wasting bandwidth client-side?!?

You dig in and it’s obvious what’s wrong – endless IE conditional crap (Over a K worth) on a layout that shouldn’t warrant the need for ANY of that, four separate stylesheets without even having media types, static CSS inlined in the markup (with !important because whoever did it is too stupid to understand specificity), static javascript inlined in the markup (way to NOT make use of caching models)… and that’s on a page that doesn’t even HAVE any of the art faygeleh nonsense.

@cssExp

your unrefined language and blatant contempt for designers downplays

I’m a 80’s new england businessman – that means I will tell you exactly what I think about something without self-censoring. OH noes, you might hurt someone’s feelings. BIG DEAL, that’s how you get things done. As Patton said:

[i]"When I want my men to remember something important, to really make it stick, I give it to them double dirty. It may not sound nice to some bunch of little old ladies at an afternoon tea party, but it helps my soldiers to remember. You can’t run an army without profanity; and it has to be eloquent profanity. An army without profanity couldn’t fight it’s way out of a piss-soaked paper bag.

As for the types of comments I make – Sometimes I just, By God, get carried away with my own eloquence."[/i]

I’m just constantly in awe online at how many little old ladies at the tea party we seem to have. Thin-skinned limp-wristed vegetable-eating tofu-loving metro-sexual wussies who want nothing better than to slap a “I’m ok, you’re ok” sticker on everything (or as Leary would put it, Haiku-writing mother…) (mostly joking, though there are times…)

Status quo FTW – NOT – you see it in the help areas on these forums all the time where people slap the rose coloured glasses on people’s heads, and either tell them don’t worry about a bug as it ‘doesn’t effect enough people’ or worse, try to shoot silver bullet fixes at pages that need to be thrown out and started over. You DARE to mention the other hundred or so bugs or that the markup is flawed to the bone and suddenly it’s “Being hostile” and “nonconstructive”… Sugar coating the truth is not telling the truth – and if you cannot say what you mean you cannot possibly mean what you say. (one thing… one thing…)

@cssExp

Just so you know, not all designers are kindergarten kids playing with graphic “toys,” but rather there are professional ones who deliver what the client and their visitor wants.

Unfortunately I only know ONE such person… the rest I have ever dealt with are a bunch of shmendrik who need a good slap with a wet trout. This is particularly true of ‘designers’ who create elements that have fixed heights and can’t be vertically tiled to fit dynamic content, fixed elements that contain page content which cannot be mixed width dynamic fonts, use color combinations that are insufficient contrast foreground and background to even be legible, design in a manner that doesn’t allow for fluid or semi-fluid layouts, or the dozen other miserable failures at accessibility that plague such work.

It might be very pretty, but if it’s useless to the end user who gives a flying…

Besides, look at the biggest successes on the internet – Google, E-Bay, Amazon, Facebook – not exactly a visual tour-de-force.

[system]

well, vista didn’t exist for me since the day one. i had a former student of mine working at microsoft at the time of vista releasing, and he offered a free copy. i declined, i had tried betas of it before and was more than sour about it.

i’m also a network admin. for me xp sp2 was about ie 7, and xp sp3 and w7 are about ie 8. i guess w7 will be about ie 9, if any ie 'till then.

i even struggled with oracle 10g applications to make them work properly with java applets in ie 8.

so ie 6 for me, as a user, as an admin, as a programmer, is dead. it no longer poses a “real threat” for its users are from areas and categories like: pirates, uninteresting non-profitable users, no-internet-access users. and i don’t have a “god complex” to believe i’m coding a page to be seen by the whole world. my target is much more modest

if i must, i will accommodate ie (6) using conditional comments and separate css which i can get rid of in a clean way later on.

[felgall]

@noonnope

ie 6 was borned with xp. let’s say that starting xp sp2 you can upgrade to ie 7. since xp sp2 is officially dead, i can also declare ie 6 officially dead.

Microsoft work on the basis that the browser delivered with an operating system is a part of that operating system and so has the same life span as that operating system - that’s why IE 5.5 (first delivered with Windows ME) was declared dead many years before IE 5 (first delivered with Windows 2000) was.

The life of IE 6 is tied to that of Windows XP, IE 7 to Vista, and IE8 to Windows 7. The only reason IE 6 is still around is that Microsoft was forced to extend the life of XP. It was all supposed to be dead a year or so ago but the disaster called Vista meant a change of plans.

For some months now Microsoft themselves have been recommending that everyone running IE 6 upgrade to a secure browser and have even said that if the operating system will not support IE 7 or IE 8 that people should switch to one of the alternatives. That’s how big a security jole that Microsoft themselves now consider IE 6 to be (and after all MS already released a security patch for all those security holes called IE 7 and so are not going to patch them again).

[felgall]

@noonnope

ie 6 was borned with xp. let’s say that starting xp sp2 you can upgrade to ie 7. since xp sp2 is officially dead, i can also declare ie 6 officially dead.

Microsoft work on the basis that the browser delivered with an operating system is a part of that operating system and so has the same life span as that operating system - that’s why IE 5.5 (first delivered with Windows ME) was declared dead many years before IE 5 (first delivered with Windows 2000) was.

The life of IE 6 is tied to that of Windows XP, IE 7 to Vista, and IE8 to Windows 7. The only reason IE 6 is still around is that Microsoft was forced to extend the life of XP. It was all supposed to be dead a year or so ago but the disaster called Vista meant a change of plans.

For some months now Microsoft themselves have been recommending that everyone running IE 6 upgrade to a secure browser and have even said that if the operating system will not support IE 7 or IE 8 that people should switch to one of the alternatives. That’s how big a security jole that Microsoft themselves now consider IE 6 to be (and after all MS already released a security patch for all those security holes called IE 7 and so are not going to patch them again).

The simple web designs I use mean that IE 6 users without JavaScript miss out on the drop down menus and need to load an extra page listing all the menu options instead.

[Stomme_poes]

Just be sure if you use png8 you use a utility like tweakpng to strip off the GAMA line from the header – that way you don’t have color matching issues.

I do this, not for IE, but for Firefox and Safari.

Real Safari on a real Mac monitor seems to actually be okay, but on any non Apple-brand monitor it’s a disaster.
Who else besides the Gimp adds in that stupid empty header chunk?? I’m sick of removing it from ALL my pngs : (

the original png24 or png32 images are made png8 images using “pngquant is a command-line* utility to quantize and dither 32-bit RGBA PNGs down to 8-bit (or smaller) RGBA-palette PNGs” as is showed here. this one is my conclusion based on the responses we get this far in this thread.

Since I’m responsible for how our sites look qua images, I would not let a command-line program change a 32bit png to a dithered 8bit without me seeing it myself. Most of the time I don’t dither, it looks worse, but either way, I want to see it before saving it. Such conversions I do in an image editor.
The header removal, I do use the command-line for… I use pngCrush, but there are several programs that do it.

cssExp: the gist of deathshadow’s post is a pretty good answer for you: avoid semi-trans png’s like the plague until you can’t.

I do use them on my sites when forced: jagged edges look retarded, and I’m not the one who gets to make the decisions about stupid anti-accessibility things like little retarded icons and stuff I have to shuffle around in a sprite.
On my own site, I use a really big one, semi-trans for smooth edges and I do it just because I like it and IE6 users don’t get to see it anyway. Do I care that it’s big? No.
But I wouldn’t put such a thing on a production site.

@noonope

there is no reason one would use win 98 any more, unless pirating, and that’s poor pirating, trust me! you had the update-to-a-new-system deal, as a licensed user.

Psh, please come to my country and tell people to upgrade. I have Win98 users in my family! Help us!

@noonope

any system forced to run ie 6 (corporate world) is either not allowed on internet much, as it uses intranet for its purpose, or it can allow an alternate browser like ch 6 to run on www sites. but again, in a corporate world you are restricted in using the internet, so the number of ie 6 users that are real internet users falls well under 7-8% so far.

Every bank I’ve visited, IE6, special restrictions, one with Win2000 servers and IE5 (or 5.5 I’m not sure), my own bank seems to have XP running.
If your website is some fancy junk for other designers to ooh and aah over, sure, screw the entire financial district. They shouldn’t be surfing web design sites anyway.
But if corporate is your client, you dang well better write for them. Because any front-end developer worth his/her salt can EASILY write for IE5 and 6, so if you don’t, your competition can and will. Pretty much the only reason I’m still supporting IE6 at all and sometimes, for fun, IE5. Well, no… I also support IE6 for older a11y devices too, but I have no idea what % those folks are.

@noonope

[quote=ds]80k of markup tied to over a megabyte of javascript to deliver 3k of plain text

it’s called publicity and you are to find it all over the place, not just internet, with the same disregard for economy. that is what makes things tick, even the internet and its related technologies: html, css, js, flash…[/quote]
DS isn’t talking about publicity. He’s talking about poorly-coded bloat. While flashy garbage will always be larger, plenty of people take plain ugly content and manage to increase the total document size with amazing ease. I just recently saw a terrible page written in ASP with invalid HTML, multiple wrappers and a bloated slow javascript to make a dropdown menu… oh god, it burned the eyes.

@cssExp

also tend to enhance visual appeal so as to encourage visitors to return.

I’m trying to think of a web site I go to, regularly, because of how it looks. And I’m trying to think of a web site that I would go to, regularly, but don’t because it’s not pretty enough. Heh, I go to Perlmonks.org regularly, and frankly, I don’t think that site has been updated since 1995 or so.
However if the contrast is bad and the font-size unreadable, or the site loads incredibly slow, yeah, I’m discouraged from visiting.

Off Topic:

cssExp, are you from the subcontinent? Just curious

[system]

what i understand so far from this thread:

• you need to “use a utility like tweakpng to strip off the GAMA line from the header – that way you don’t have color matching issues” for your png images, no matter if png8, png24, png32, in whatever UA: ie, ff, saf, op, ch, along with other ancillary chunks, using some png optimizers of your choice. that way you’ll end up with consistent gamma look. this has deathshadow60 and Paul O’B as the main contributors and hinters.
  
• you need to think that ie6 development it’s not the biggest or latest issue anymore. this one has felgall as the main contributor.
  
• you can use png24 or png32, with gamma chunk stripped off for modern browsers: ie7+ and the rest, and use a png images utility and html conditional comments to (css) point to a different version of those png’s for ie6. the original png24 or png32 images are made png8 images using "pngquant is a command-line* utility to quantize and dither 32-bit RGBA PNGs down to 8-bit (or smaller) RGBA-palette PNGs" as is showed [URL=“http://www.ethanandjamie.com/blog/81-png8-transparency-without-fireworks”]here. this one is my conclusion based on the responses we get this far in this thread.

you will have two sets of images, but you will:

1. have to make only one set of graphics (which will be transformed to png8 as the second set for ie6) and still get to profit from what png format has to offer
   
2. be ready for the day when ie6 is no longer an impediment and at the same time you’ll not be forced by ie6 in choosing formats or techniques
   
3. be able to push the html envelope by coding for the latest of what the modern browsers have to offer

[PaulOB]

http://morris-photographics.com/photoshop/articles/png-gamma.html
http://hsivonen.iki.fi/png-gamma/

[system]

I avoid using alpha transparency completely – I’ve never seen a design where it’s ‘necessary’ but again to me, the graphics are something you hang on the layout last, so if there’s some element that ‘needs’ alpha transparency I change the design so it doesn’t ‘need’ it.

Between the need for scripting to support it on legacy IE, the royal pain in the ass they are to even create and work with in the first place, the total disaster large transparencies are when it comes to scrolling, AND as Paul mentioned the bloated filesizes they just aren’t worth the time and effort. To me they’re fat bloated crap that has no business being used on websites – but to put that in perspective I say the exact same thing about every piece of software Adobe makes right now. (which after two screwed XP x64 installations during CS3 and the absurd memory footprint of CS4, I refuse to even allow to be installed on any of my machines!)

Especially when techniques like ‘close enough AA’, ‘top center backgrounds’ and ‘precompositing’ can replicate the appearance in most cases.

As to png8 or gif – I usually save both and use whatever one has the smallest filesize. Just be sure if you use png8 you use a utility like tweakpng to strip off the GAMA line from the header – that way you don’t have color matching issues.

[system]

@deathshadow60

Just be sure if you use png8 you use a utility like tweakpng to strip off the GAMA line from the header – that way you don’t have color matching issues.

interesting. learning something new everyday. could you please elaborate. if it’s ok with you, of course. thanks

[PaulOB]

These days I usually make two versions of the image a png8 (in Fireworks) for IE6 and then png32 for everyone else.

Then I give IE6 the degraded images via conditional comments which can later be removed when IE6 dies. IE6 usage is quite low these days that I don’t mind them getting a degraded but usable page.

Note that you should try and avoid using too many large transparent images as their file size is very high.

[system]

@cssExp

deathshadow60, while it’s easier to avoid alpha-transparent pngs, it’s not a proper solution if you are not the designer.

If you’re a designer and don’t take into accounts the limit of your medium, you have no business being a designer.

Which is why the ****tards who draw pretty pictures in photoshop with zero knowledge of the practical limitations of HTML/CSS, much less zero knowledge of accessibility minimums like the WCAG should do the world a favor and back away from the keyboard. It’s also why I advocate flipping the entire process around so the art *** is the last person in the process, not the first.

Which is why I say the coder should always have veto approval on design if they’re not the same person - as the nimrod dicking around in photoshop usually isn’t qualified to make decisions on filesizes, layout OR accessibility. That they are using photoshop in the first place is evidence enough of that.

[cssExp]

Sorry I’m one of those who gets easily hurt by profanity, I’ll let you guys/girls with strong mind continue your discussion in peace. Meanwhile, I’ll look over most of the suggestions made in the thread. Thanks!

[felgall]

@cssExp

My Doubt is, what is the most preferable thing to do when it comes to writing IE6 layouts, is it important to maintain alpha-transparent images and keep the exact same look as in IE7 for example or is it acceptable as long as the site looks more or less same with normal transparency and is usable?

That depends on the site. As the number of IE6 users is falling it is becoming more and more acceptable just to provide them with a site that works but doesn’t necessarily look as nice as if they were using a better browser.

[cssExp]

@felgall

Both PNG8 and GIF have one level of transparency available - both are fully supported by IE6.

For multiple levels of transparency you need to use PNG24 and that’s the one that IE6 doesn’t support and so requires the fix.

I hope I’m not taken to wrong way for saying this, but I’m very well aware that png-8 and gif doesn’t have alpha-transparency and is fully supported by IE (hence why I mentioned them here).

My Doubt is, what is the most preferable thing to do when it comes to writing IE6 layouts, is it important to maintain alpha-transparent images and keep the exact same look as in IE7 for example or is it acceptable as long as the site looks more or less same with normal transparency and is usable?

[felgall]

@andrew-bkk

Is there any REAL evidence to show that the number of IE6 users is falling? Sure, the percentage is going down, but the number of internet users is constantly going up.

Think about this (very hypothetical) example.

In 2009 there were 100 internet users and 5 of these people used IE6. So IE6 had a 5% market share.

In 2010 there were 200 internet users and 5 of these people continued to use IE6. So IE6 had a 2.5% market share.

In other words, IE6’s market share declined by 50% but the actual number of IE6 users remained the same.

What do you think? Have I missed something?

Five years ago 95% of visitors to my web site used IE6. Now less than 10% use IE6. If one billion people were on the internet five years ago and everyone using IE6 then is still using IE6 now then there must be about 10 billion people using the internet now. If tyhis is ture then which planet do the others live on given that only six and a half billion live on Earth.

Also anyone who has upgraded their computer from Windows XP can’t be running IE6 any more since that is the latest operating system to support it. With stats showing that only 48% of people are still using Windows XP as their operating system the percertage of computers that can even run that inosaur called IE6 that even Microsoft has abandoned is shrinkingrapidly. Given that some computers fail and need to be replaced the number of computers that can run IE6 must be falling since the replacement computers will come with IE8 pre-installed.

[system]

@Stomme_poes

But, you can have nice designs without huge piles of semi-trans pngs, scripts, and Flash.

i like your arguments and the way you argue a lot

that said, aside from personal sites, a coder has to be a cog in a bigger clock, and use the media he/she gets in the pages he/she codes.

cssExp has a good point also:

[…] not all designers are kindergarten kids playing with graphic “toys,” but rather there are professional ones who deliver what the client and their visitor wants.

if you want respect, be prepared to “sacrifice” a little respect your self for what others are making.

and when it comes to coding for ie 5/5.5/6 users: if they are so ignorant regarding UAs and OSs, i believe your efforts to accommodate him are in vain: they will not spot the differences even if under a big red sign they most likely are misusing the internet.

and to clarify something: is one thing when you code a special web app for ie, and another to code a site that might be also visited by ie 5/5.5/6 users.

the first case allows you the “freedom” of coding knowing exactly your target.

the second one gives you the “freedom” to add some workarounds that are regarded as exceptions.

we are discussing the later, where ie 5/5.5/6 users are exceptions and must be treated as such. that is, ie will not constitute a reference system but html specs will.

[cssExp]

deathshadow60, while it’s easier to avoid alpha-transparent pngs, it’s not a proper solution if you are not the designer. If you are the designer, it’s your design and not a client’s, and you are the coder - then doing away with 32bit pngs seems easier. But in reality, that’s not the case most of the time.

andrew-bkk, good point. The IE6 users may indeed not be reducing. I sincerely hope it reaches 0% by 2011 though. That way we can be sure no one is using IE6. I even find IE7 a headache and rather work with IE8+.

Paul O’B, I’ll check out the things you suggested.