We were supposed to roll out my wife’s website last night, but it’s been delayed. The reason? My last minute adjustments and testing on MS IE showed that I’m seeing drastically different things between IE and Firefox. Different isn’t necessarily bad. In this case, I’m proclaiming IE as guilty of misbehavior. When I state that <img width=”970″>, I expect it to take 970 pixels across my monitor. That’s what Firefox does. But IE inflates it by (this is just guestimation here - I’m not on that monitor now) maybe 25%. The image in Firefox looks clean and crisp and the text that is embedded in the image has well-defined borders. Not so in IE. Pardon my Esperanto, but IE’s display of my page looks like rubo. (And if someone wants to correct my Esperanto, I’d be much obliged.) The embedded text is really fuzzy around the borders, the image is way larger than I intended, the quality of the image even looks lacking. To be fair, it all could have something to do with the funky scaling up of the image that IE is doing, but it’s hard to get a side by side comparison when IE is munging the page so badly.
This is my first experience of being abused by IE. I’m no web designer (or really a web developer) as I thoroughly warned my wife upon doing this for her, but I can’t believe that the terrible page display is all me. It looks at least tolerable in Firefox. It just looks awful in IE.
The biggest problem in IE is how it is mangling the words that my wife embedded in the image. We’ve tried jpeg and png. I’ve tried a variety of resolutions which are reasonable to put in a web page. We’ve tried some different fonts. I even tried mucking around with tables, using the image as a background, and positioniong <a> tags on top of the image where I want them. (Which is exactly what they were for - just links.)
Now, what I’m resorting to tonight is splitting two copies of the image (one “normal” resolution, one high resolution) up into the same number and same size, shape, and position of smaller images, throwing the “normal” resolution images into a table and replacing the pieces that contain text with the higher resolution images (and leaving the img width and height attributes at the “normal” values). IE will likely still munge my image, but at least it’ll have higher quality images in the text slots. Hopefully it won’t mess that up as well.
I think it’s ridiculous that I have to go through such gymnastics in order to get a page to display properly in IE, but I’m nearly certain that the majority of site visitors will use IE. Am I going about this all wrong? I really don’t like the idea of using a 900 pixel wide image as a banner, but my wife’s business is very image intensive, so she wants the site to represent her work (which is basically family-oriented custom graphic design).
Anybody have any Firefox/IE compatibility tips for graphically intensive sites? How about IE compatibility war stories?
Also, don't resize images with the browesr
Unless it's absolutely necessary, you probably shouldn't be resizing an image in the browser anyways.
Why not?
Slower scrolling
Crummy looking pictures
Slower load times in many cases
Flakey results
Takes more resources on the user's machine
Generaly just no good.
Also, don't resize images with the browesr
Yeah, this is pretty much a last resort kind of deal. I haven't really considered "slower scrolling" although that could be a possibility.
"Crummy looking pictures" is actually what I'm trying to avoid. It's a conflict between letting the browser's rendering engine scale an image, or doing it beforehand. My problem is that MS IE is scaling the image up, anyway, so I'm having to increase the resolution of some of the images I've embedded in a table (the "critical" ones) then tell the browser that they are smaller than they actually are. It's a pain and probably bad form, but I don't see many other options.
"Slower load times" is something I'm just going to have to deal with. But, out of the master image that I've split into about 40 smaller images, only half a dozen or so are resized, so I don't expect it to be so bad. In fact, after testing it in IE, this is the best that I've been able to get it. I could resize the whole image to be extremely huge, then tell the browser to resize the whole thing down (rather than just the effected pieces), but that would be even worse than bad. This will be a frequently viewed set of images, so they'll be cached, so it should only be moderately bad the first page view. But then, you have to be concerned about "first impressions"...
"Flakey results" - I'm assuming you mean inconsistent results between browsers? Probably. I'm primarily focused on IE since that's what I expect the most of. It displays pretty equally well on IE and Firefox on the same monitor, so I'm OK with that.
"Using more resources on the user's machine" is OK. It'll be a little more memory intensive and use a little CPU to actually do it, but I don't feel too badly about that. They would get it worse all around if I had flash or shockwave or something on the site.
Thanks for the comments. And I totally agree with you. I hate doing it, but IE is making it look totally unlike what I'm telling the browser to display, so "desperate times" and all that....
Just a thought...
...but have you changed the DPI on this machine? If the DPI (Display Properties, Settings, Advanced) is set to anything other than 96dpi, Windows will try to scale pretty much *everything* at display time to make it the right *physical* size on screen. The only other default setting is 120dpi, which is 125% scaled.
If it's that, you shouldn't need to work around it, because it will only do that on the displays of people who've made that change, and not many do. And anyone who *has* is probably *used to* things looking nasty and fuzzy.
Disable Automatic Image Resizing
Go to Tools-Internet Options.
Move to Advanced tab.
Uncheck "Enable Automatic Image Resizing" under Multimedia.
Just a thought...
Thanks. This helped a ton. I don't know if I changed it or if I should blame it on Dell. I'd prefer to blame it on Dell :-)
Because of your advice, I'm actually not dropping in higher res images and then scaling them down. And I'm able to go with a slightly lower res image. It's still pretty honking big. I may split it into four images and throw it into a table, still. Maybe that'll give the impression of the image loading faster. But I'll wait until I get the site out to a production server to test it and see how it loads for me.
Thanks for the tip!