/    Sign up×
Community /Pin to ProfileBookmark

Thumbnail Quality Difference

Copy linkTweet thisAlerts:
Jul 26.2008

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

[code]
<img src=”blah.jpg” height=”100px”>
[/code]

…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.

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Jul 26.2008 — 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.
Copy linkTweet thisAlerts:
@datapunk79Jul 26.2008 — 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.
Copy linkTweet thisAlerts:
@GigabyteGeekauthorAug 03.2008 — 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.
×

Success!

Help @GigabyteGeek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...