Thumbnail Quality Difference

[GigabyteGeek]

If you resize an image using HTML in order to use it as a thumbnail, for example...


<img src="blah.jpg" height="100px">

...why is it that in IE and Firefox, the resolution quality of those thumbnails is so terribly low you can barely even make them out, but in Opera and Safari, the quality is so beautiful as if you had actually resized the images yourself?

I was just curious.

[ray326]

They don't call them dumbnails for nothing. Thumbnails should be generated specifically for the job, not by letting the browsers rescale the image by misusing the width/height attributes.

[datapunk79]

It's probably because the image dimensions are not constrained in the proper proportions. The height and width have to be adjusted based on their original ratio or there will be distortion. Perhaps Opera and Safari do this, but not certain.

Best thing to do is use a photo editor to create the thumbnails with height and width constraints. Or put the proper constrained dimensions in your attributes.

[GigabyteGeek]

Like I said, I was just curious. I thought there might be some kind of coding thing or browser specific thing, I don't know. I use html to define the width and height when I want to preview what thumbnail sizes will look best before I bother creating them. While I was doing that, I had a few browser windows open to make sure some of my code that was on that page was working the same in all of the browsers. That's when I noticed the resolution difference and it made me wonder why. I always assumed IE and FF looked bad when you resized within the img tag because it was something browsers couldn't do, so when I saw that Opera and Safari could, I had to ask.