Basic Image Display question

He has: 14 posts

Joined: Sep 2005

Hi,

I'm not sure if I'm displaying images properly.

Let's say "something.gif" (it's actually a screenshot) is 200px by 100px. When I resize it with:
<img width="100" height="50" src="something.gif">
Is it normal to experience a severe loss of image quality (the text in the image appears to be broken and the image itself becomes "pixelated")?

What must I do to ensure the image is displayed without loss of quality? When I right-click in Firefox (then "view image"), the original size (and quality) is restored. I hope I'm making sense. Roll eyes

Any help is appreciated, thanks!

Busy's picture

He has: 6,151 posts

Joined: May 2001

first up NEVER EVER resize images with the width and height elements - resize the image in an image program (ifranview is good for that, no distortion and is free).

The .gif will always look distorted at less than 3/4 size (is only 256 colours), convert into .jpg or .png and it will remain readable (if size premits)

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

Busy is right. Resizing within the HTML code (as opposed to using an actual image editor to resize the image) is never advisable. That's not to say I have not been guilty of it myself once or twice, but I avoid it whenever possible.

However, I think what Busy is saying, is that if you MUST resize with HTML code, bad distortion will appear if you do it to a GIF. Try a JPG or PNG instead. Even then, however, there will be quite a bit of loss of quality.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.