SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Hybrid View
-
Aug 28, 2007, 06:02 #1
- Join Date
- Jun 2004
- Location
- UK
- Posts
- 605
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Jagged image edges when resized with CSS
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
-
Aug 28, 2007, 06:08 #2
- Join Date
- Oct 2003
- Location
- Winona, MN USA
- Posts
- 10,053
- Mentioned
- 142 Post(s)
- Tagged
- 2 Thread(s)
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!)Linda Jenkinson
"Say what you mean. Mean what you say. But don't say it mean." ~Unknown
-
Aug 28, 2007, 06:16 #3
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Does anyone know how to stop this? Apart from not using IE that is.
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!)
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.
-
Aug 28, 2007, 06:20 #4
- Join Date
- Jun 2004
- Location
- UK
- Posts
- 605
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 28, 2007, 06:26 #5
- Join Date
- Jun 2004
- Location
- UK
- Posts
- 605
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can't warp a pixel based image and expect it not to become pixelated!
I hate the Zoom feature - Designers put their heart and soul into those pixels.
-
Aug 28, 2007, 06:39 #6
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Firefox can, and does.
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.
-
Aug 28, 2007, 06:48 #7
- Join Date
- Jun 2004
- Location
- UK
- Posts
- 605
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 28, 2007, 06:54 #8
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
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.
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 applicationRound 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 painA 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.
Bookmarks