Jagged image edges when resized with CSS

[danwednesday]

Hi,

I have some graphics which are required to be shown at different sizes on a website. Rather than resize each graphic and save twice, we're scaling some of the images down with CSS by using a smaller width attribute.

This is fine in Firefox, but in IE7 (not tried 6) the graphic becomes very jagged when resized with CSS. When you zoom in (ctrl +) or out (ctrl -) of the page they smoothen out. Even 99% zoom makes them smooth, but 100% makes them jagged.

Does anyone know how to stop this? Apart from not using IE that is.

Thanks

[Shyflower]

Apart from not using IE that is.

Thanks

The best solution - but of course you'll have to persuade the majority of your visitors on that.

Try using png format instead of gif. Another solution that works most of the time is to use vector drawn images rather than rastor. However, once they are on the web, they're pretty rastorized anyway (I think --- if I'm wrong someone will jump in and tell you so!)

[markbrown4]

Does anyone know how to stop this? Apart from not using IE that is.

You can't warp a pixel based image and expect it not to become pixelated!

Try using png format instead of gif. Another solution that works most of the time is to use vector drawn images rather than rastor. However, once they are on the web, they're pretty rastorized anyway (I think --- if I'm wrong someone will jump in and tell you so!)

I'd be pretty surprised if .png rendered differently..
SVG (Scalable Vector Graphics) will be freaking awesome!... when browsers support them.
At the moment we need to stick with pixel based images - Or you could use flash for this.

Resize the images and save them twice. It's the only stable way to use images at the moment.

Also, IE7 and Opera uses a zoom feature by default - not text-size increase like Firefox.
It streches the images and there's nothing you can do about the way it displays.
Firefox keeps the images how they should be! unwarped by the browser - unless explicity set like you are wanting - and just resizes the text.

I hate the Zoom feature - Designers put their heart and soul into those pixels.

[danwednesday]

The images are photographs, so they're not suited to SVG format. Neither are most of the browsers our users currently use. Of course any common web image format (i.e. gif, jpg and png) is raster so the will all be rendered in the same way by a browser I'd imagine.

I just wondered if there's something that can be done to get them to smoothen out in IE7.

[danwednesday]

You can't warp a pixel based image and expect it not to become pixelated!

Firefox can, and does. IE7 does when the browser is resized. It must therefore be possible. I just don't know if there's a way to get IE7 to do it by default.

I hate the Zoom feature - Designers put their heart and soul into those pixels.

Me too, but then I'm not visually impared. The images actually look much more crisp in IE7 when I zoom, so I'd really like to achieve the same thing but without zooming.

[markbrown4]

Firefox can, and does.

When I said you 'can't' - it was more of a "You can't possibly do that to the image"..

To me a image that has been 'cheaply resized' within the browser looks like absolute crud - but maybe it's just me who's precious about pixels.

I wouldn't do it.

[danwednesday]

To me a image that has been 'cheaply resized' within the browser looks like absolute crud - but maybe it's just me who's precious about pixels.

I completely agree, I'm precious too, which is the reason for this post - I want the images to look good when scaled down in the browser, like they do in Firefox and at 99% zoom in IE. The site has hundreds of thousands of images, growing daily, so to minimise on server resources the images are only stored once. This is the reason I am in this situation. Being a pixel perfectionist myself though, I want to try to fix the IE7 bug which makes scaled down images jagged, and wondered if there's a common solution to it (perhaps some kind of META directive which alters the way IE7 renders CSS scaled images). To be honest, I've only Googled briefly, so will probably continue on that line of enquiry and post my findings back here.

[markbrown4]

I completely agree, I'm precious too, which is the reason for this post - I want the images to look good when scaled down in the browser, like they do in Firefox and at 99% zoom in IE.

I think we must disagree on what looks good with a resized image.
Browsers do not scale an image, anti-alias the lines within the image and smooth the way say Photoshop or Fireworks would when you resize. Think of the browser more like the paintbrush type of application Round the calculation to the nearest pixel and chop it off.

If IE7 is your only concern and there is a way to fix it for you someone will be able to respond here and let you know. I just like to challenge peoples questions and be a pain A lot of people ask the wrong questions.

It's interesting that you talk about server load.
The way you are wanting to design it is to have the client download every images at it's largest resolution.
If you had a gallery with 50 thumbnails and the average person looked at 5 images - The way you are planning would result in more server load than if you just supplied the large images to the users who requested it. Just a thought.