Conditional image swap for IE6?

toxee · Nov 18, 2009

<div class="pearl">
<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

<div class="pearl">
<img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

Basically if the user is using something as old or older than IE6 I
wanted it to use gif format instead of png format. How do I do this
exactly?

dorayme · Nov 18, 2009

toxee said:
<div class="pearl">
<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

<div class="pearl">
<img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

Basically if the user is using something as old or older than IE6 I
wanted it to use gif format instead of png format. How do I do this
exactly?

The simplest thing, if you are really concerned, is to use gif all the
time rather than png. Show me an example of your images where you are
seeing such a great advantage of png over gif that you would be prepared
to go to the trouble of making two images, loading them and having them
on the server and making them available via conditional comments or
whatever to different browsers...

Nik Coughlin · Nov 19, 2009

toxee said:
<div class="pearl">
<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

<div class="pearl">
<img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

Basically if the user is using something as old or older than IE6 I
wanted it to use gif format instead of png format. How do I do this
exactly?

Because the PNG transparency looks bad with IE right? Super simple fix:

http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-problem-with-ie6/

Jonathan N. Little · Nov 19, 2009

toxee said:
<div class="pearl">
<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

<div class="pearl">
<img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

Basically if the user is using something as old or older than IE6 I
wanted it to use gif format instead of png format. How do I do this
exactly?

BootNic · Nov 19, 2009

<div class="pearl"> <img class="pearl" src="pearl.png" alt="Pearl
Davis Ministries" title="Pearl Davis Ministries"> </div>

<div class="pearl"> <img class="pearl" src="pearl.gif"
alt="Pearl Davis Ministries" title="Pearl Davis Ministries">
</div>

Basically if the user is using something as old or older than IE6
I wanted it to use gif format instead of png format. How do I do
this exactly?

Lifecycle IE6/7 13-Jul-2010

You may consider having the server redirect IE 6 request for selected
png files to gif files.

Browser sniffing you say, yes it is.

I would not consider this to be important enough to modify the HTML,
CSS or to use any form of JavaScript to cater to IE 6. It's simply not
worth the effort in my opinion.

An Apache RewriteRule to redirect IE 4-6 to gif images for peral.png,
hangman.png, stool.png may look something like:

RewriteCond %{HTTP_USER_AGENT} MSIE\s[4-6]
RewriteCond %{REQUEST_URI} (pearl|hangman|stool)\.png$
RewriteRule ^(.+)\.png$ $1.gif [L]

--
BootNic Wed Nov 18, 2009 08:50 pm
You can turn painful situations around through laughter. If you can
find humor in anything - even poverty - you can survive it.
*Bill Cosby*

â• 236 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAksEpHUACgkQmo2774GZ7qn+YwCglJKNUNs84ufYel1GXUC8ubVI
1XAAoPEwekImU8W1btPnyWP7dcojiVBT
=YwmX
-----END PGP SIGNATURE-----

toxee · Nov 19, 2009

Because the PNG transparency looks bad with IE right? Super simple fix:

http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

So many suggestions in this thread already, thanks guys! Yes, it's to
avoid that hideous background for my transparent image of the client.
I see three different methods on that page, I'm not sure how I
implement any of the techniques though. Like where in my code would
they go. If I used the second method the class is,

img.pearl{

}

If it goes in the html portion of my page, where?

Adrienne Boswell · Nov 19, 2009

Gazing into my crystal ball I observed toxee <[email protected]>
writing in @d9g2000prh.googlegroups.com:

<div class="pearl">
<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

<div class="pearl">
<img class="pearl" src="pearl.gif" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">
</div>

Basically if the user is using something as old or older than IE6 I
wanted it to use gif format instead of png format. How do I do this
exactly?

I use two different stylesheets, one for IE < 7 and one for the rest of
the world. The only thing that is in the IE sheet is the necessary
images, eg:

style_ie.css
#header {background-image: url(logo.gif);}

style.css
#header {background-image: url(logo.png);/*other rules*/}

Then I do this in the head:
<link type="text/css" rel="stylesheet" href="style.css" />

Nik Coughlin · Nov 19, 2009

Because the PNG transparency looks bad with IE right? Super simple fix:

http://teqsnacks.com/2007/02/22/fixing-png-transparency-display-probl...

So many suggestions in this thread already, thanks guys! Yes, it's to
avoid that hideous background for my transparent image of the client.
I see three different methods on that page, I'm not sure how I
implement any of the techniques though. Like where in my code would
they go. If I used the second method the class is,

Use the first method, the pngquant one. You have to download the program and
run it from the command line, but it's pretty easy. You end up with an
indexed alpha png, which compliant browsers will display much like your
current png files, and which IE 6 and below will display with binary
transparency, ie like a GIF does, so it's win-win and you don't have to
change your code. You just have to run your png's thru that program is all.
Almost all PNGs will still look OK afterwards, if not use one of the other
methods.

toxee · Nov 19, 2009

Use the first method, the pngquant one. You have to download the program and
run it from the command line, but it's pretty easy. You end up with an
indexed alpha png, which compliant browsers will display much like your
current png files, and which IE 6 and below will display with binary
transparency, ie like a GIF does, so it's win-win and you don't have to
change your code. You just have to run your png's thru that program is all.
Almost all PNGs will still look OK afterwards, if not use one of the other
methods.

I see what you mean, I didn't know that exe was a converter. Photoshop
can save images in png8, I tried it and it looked just as jaggy as the
gif format. So is that what the program does, just convert it the same
way photoshop would?

Nik Coughlin · Nov 19, 2009

toxee said:
I see what you mean, I didn't know that exe was a converter. Photoshop
can save images in png8, I tried it and it looked just as jaggy as the
gif format. So is that what the program does, just convert it the same
way photoshop would?

No, the only similarity is that it converts the png to an indexed image, but
when using pngquant the palette can also include colours with alpha
transparency (varying degrees of opacity), so you still get the ability to
antialias edges of the image against any background as you do with a 24 or
32 bit PNG.

Modern browsers display these correctly, without jaggies, and IE 6 throws
away the pixels that are alpha transparent, which makes the image look jaggy
like a gif

toxee · Nov 19, 2009

No, the only similarity is that it converts the png to an indexed image, but
when using pngquant the palette can also include colours with alpha
transparency (varying degrees of opacity), so you still get the ability to
antialias edges of the image against any background as you do with a 24 or
32 bit PNG.

Modern browsers display these correctly, without jaggies, and IE 6 throws
away the pixels that are alpha transparent, which makes the image look jaggy
like a gif

Ah I see, I it does work a bit better as there is no nasty outlines,
but the quality is pretty rough. The image ended up having holes in it
it was so rough in ie6. The color was a little dull compared to png 24
and even gif. I'm looking into the alpha transparency now.

toxee · Nov 19, 2009

Ah I see, I it does work a bit better as there is no nasty outlines,
but the quality is pretty rough. The image ended up having holes in it
it was so rough in ie6. The color was a little dull compared to png 24
and even gif. I'm looking into the alpha transparency now.

Ahh, I figured it out...sort of....

<div class="pearl">


</div>

.....works great except now I don't have a picture in FF.

Is there anyway I can get the swap without other browsers ignoring the
image code since it's inside an IE statement? I can't do it in css
because background images can't scale and stretch and I want this one
to.

toxee · Nov 19, 2009

Ah I see, I it does work a bit better as there is no nasty outlines,
but the quality is pretty rough. The image ended up having holes in it
it was so rough in ie6. The color was a little dull compared to png 24
and even gif. I'm looking into the alpha transparency now.

Click to expand...

Ahh, I figured it out...sort of....

<div class="pearl">


</div>

....works great except now I don't have a picture in FF.
Is there anyway I can get the swap without other browsers ignoring the
image code since it's inside an IE statement? I can't do it in css
because background images can't scale and stretch and I want this one
to.

Okay, I think I've finally got it.
<div class="pearl">
<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
title="Pearl Davis Ministries">

</div>

Gave the gif it's own class 'pearl2' and made the if statement not
display the original 'pearl' class so I don't end up with two images
in ie6. Thanks again for all the help as always!

BootNic · Nov 19, 2009

On Wed, 18 Nov 2009 22:51:47 -0800 (PST)

[snip]

Ahh, I figured it out...sort of....

<div class="pearl">

Content for IE 7 or greater and non IE browsers

</div>

....works great except now I don't have a picture in FF.
Is there anyway I can get the swap without other browsers ignoring the
image code since it's inside an IE statement? I can't do it in css
because background images can't scale and stretch and I want this one
to.

To use a conditional comment to restrict IE versions and display to non
ie browsers you need to use the other form of the conditional comment.

An HTML comment:


An Conditional comment to display its content only to IE or IE version
depending on the instruction:


Content for non IE browsers:

IE should ignore this content non IE browsers should see this as HTML
comment | content to display | HTML comment


The above conditional comment need not limit all IE versions from
showing the content. An example provided in-line above.

--
BootNic Thu Nov 19, 2009 02:59 am
Genius is eternal patience.
*Michelangelo*

â• 235 days remaining

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2.0.12 (GNU/Linux)

iEYEARECAAYFAksE+s8ACgkQmo2774GZ7ql9aACfYjNmfvsiP9nABwCZobeXhAxf
VvMAnjGodJRXg+W0qNa+0dV8Do8oiApX
=7LHr
-----END PGP SIGNATURE-----

+mrcakey · Nov 19, 2009

dorayme said:
The simplest thing, if you are really concerned, is to use gif all the
time rather than png. Show me an example of your images where you are
seeing such a great advantage of png over gif that you would be prepared
to go to the trouble of making two images, loading them and having them
on the server and making them available via conditional comments or
whatever to different browsers...

I presume he's got some transparency in there, in which case - as you know -
there's a big difference between PNG and GIF.

+mrcakey · Nov 19, 2009

Jonathan N. Little said:
<object type="image/png" data="pearl.png"><img src="pearl.gif"></object>

Bloody hell! That does it!

I've been searching all over the place for a simpler solution to this
problem.

I wave many kudos points in your direction.

+mrcakey · Nov 19, 2009

Ah I see, I it does work a bit better as there is no nasty outlines,
but the quality is pretty rough. The image ended up having holes in it
it was so rough in ie6. The color was a little dull compared to png 24
and even gif. I'm looking into the alpha transparency now.

Click to expand...

Ahh, I figured it out...sort of....

<div class="pearl">


</div>

....works great except now I don't have a picture in FF.
Is there anyway I can get the swap without other browsers ignoring the
image code since it's inside an IE statement? I can't do it in css
because background images can't scale and stretch and I want this one
to.

-Okay, I think I've finally got it.
-<div class="pearl">
-<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
-title="Pearl Davis Ministries">
-
-</div>
-
-Gave the gif it's own class 'pearl2' and made the if statement not
-display the original 'pearl' class so I don't end up with two images
-in ie6. Thanks again for all the help as always!

That's quite clever. The solution provided by Jonathan N Little is very
elegant if you want to look at that.

I know that there are a lot of "PNG fix" Javascript solutions out there.
I've never had any luck with any of them, but http://www.mcfc.co.uk uses
transparent PNG files all over the place and still looks good in IE6 so they
must be doing something right if you have time to investigate.

Personally I'm planning to start giving clients a discount if they allow me
the luxury of not supporting IE6. Last project I did I thought I'd finished
then spent another 3 hours fixing some of the pages for IE6. That's a lot of
time on a small project.

Jonathan N. Little · Nov 19, 2009

+mrcakey said:
Bloody hell! That does it!

I've been searching all over the place for a simpler solution to this
problem.

There is one thing to note: where now IE7 does finally support alpha
transparency but doesn't the object, so only IE8 users will see the
spiffy PNG. But hey they are IE users--get what you deserve! ;-)

toxee · Nov 19, 2009

Sometimes there is not such a big difference but I should have withheld
my fingers! Perhaps the way I prepare gifs in Fireworks (it is not so
good in Photoshop) has made me too confident and perhaps it is the sort
of gifs I have often used and the careful choices of backgrounds where
the transparent gifs are placed. But I watch this thread with interest.
I will experiment with some facilities Nick provided when I have time.

Ah so Fireworks prepared gifs a little better than PS?

toxee · Nov 19, 2009

Ahh, I figured it out...sort of....

Click to expand...

<div class="pearl">


</div>

Click to expand...

....works great except now I don't have a picture in FF.
Is there anyway I can get the swap without other browsers ignoring the
image code since it's inside an IE statement? I can't do it in css
because background images can't scale and stretch and I want this one
to.

Click to expand...

-Okay, I think I've finally got it.
-<div class="pearl">
-<img class="pearl" src="pearl.png" alt="Pearl Davis Ministries"
-title="Pearl Davis Ministries">
-
-</div>
-
-Gave the gif it's own class 'pearl2' and made the if statement not
-display the original 'pearl' class so I don't end up with two images
-in ie6. Thanks again for all the help as always!

That's quite clever. The solution provided by Jonathan N Little is very
elegant if you want to look at that.

I know that there are a lot of "PNG fix" Javascript solutions out there.
I've never had any luck with any of them, buthttp://www.mcfc.co.ukuses
transparent PNG files all over the place and still looks good in IE6 so they
must be doing something right if you have time to investigate.

Personally I'm planning to start giving clients a discount if they allow me
the luxury of not supporting IE6. Last project I did I thought I'd finished
then spent another 3 hours fixing some of the pages for IE6. That's a lot of
time on a small project.

I tried the object method and didn't get an image. How does it work?
You're totally right about IE6, I support it because I know so many
people still use it since it comes with XP by default and the average
person(especially my clients) can barely use a pc, let alone upgrade
the browser.

Help with Visual Lightbox: Scripts	2	May 3, 2023
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
CSS Image swap not working.	1	Feb 23, 2016
Im having trouble containing a title an image and a button	2	Oct 26, 2022
Put image over the top of another image on hover	3	Feb 7, 2020
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Help with my responsive home page	2	Dec 14, 2022

Conditional image swap for IE6?

toxee

dorayme

Nik Coughlin

Jonathan N. Little

BootNic

toxee

Adrienne Boswell

Nik Coughlin

toxee

Nik Coughlin

toxee

toxee

toxee

BootNic

+mrcakey

+mrcakey

+mrcakey

Jonathan N. Little

toxee

toxee

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads