smooth resize image

I am trying to resize an image in html but when I change the size the image gets messed up. Is there a way to resize the image smoothly in html?

If by "messed up" you mean it looks pixelated (even when reducing the size), that depends entirely on how the browser decides to render the image. Certain browsers such as Safari resize the image using cubic interpolation (which results in a smooth looking image.)

Here's a sample from the original image:
http://agentsteal.110mb.com/good.jpg

Here's the image after it is resized by a few pixels in IE or FF:
http://agentsteal.110mb.com/resized.jpg

Is there a way to fix this?

--Edit: Paste the URL into the address bar; don't click on the links.

As an answer to your question, I can only quote myself:

Quote:

---

Originally Posted by andreasblixt

If by "messed up" you mean it looks pixelated (even when reducing the size), that depends entirely on how the browser decides to render the image. Certain browsers such as Safari resize the image using cubic interpolation (which results in a smooth looking image.)

---

You cannot affect the way the browser renders an image (although it's possible that loading an image through a filter in Internet Explorer could allow you to use cubic interpolation, but it still won't work in other browsers.)

Make two versions of the image if you need it in two different sizes.

Either way, you should always start with a larger resolution image and resize to a smaller resolution. This is the only way to keep the image from pixelating.