There are many browsers out there and they all interpret code and images differently. Today I am going to do a comparison on how browsers rescale images differently and rate which browser rescales images correctly.
The browsers I am going to compare are Internet Explorer 6, Internet Explorer 7, Firefox 2, Firefox 3, Safari, Opera and the new Google Chrome.
First off I have taken a 400px by 300px image (see below for original) and manually rescaled by 50% to 200px by 150px.
In normal design you wouldn't do this, but you do in fact come across this a lot with content managed sites, where the users have uploaded a larger image or the image has been rescaled to fit into a thumbnail position as well as the main image position.
So now we need to see how it looks in all the browsers
Conclusion
Internet Explorer 6
Corner Rendering: 2 out of 5
Text Rendering: 1 out of 5
Image Rendering: 2 out of 5
Total: 5 out of 15
Internet Explorer 7
Corner Rendering: 3 out of 5
Text Rendering: 4 out of 5
Image Rendering: 3 out of 5
Total: 10 out of 15
Firefox 2
Corner Rendering: 2.5 out of 5
Text Rendering: 1 out of 5
Image Rendering: 3 out of 5
Total: 6.5 out of 15
Firefox 3
Corner Rendering: 3 out of 5
Text Rendering: 4 out of 5
Image Rendering: 4 out of 5
Total: 11 out of 15
Safari
Corner Rendering: 3 out of 5
Text Rendering: 4.5 out of 5
Image Rendering: 4.5 out of 5
Total: 12 out of 15
Opera
Corner Rendering: 2 out of 5
Text Rendering: 1.5 out of 5
Image Rendering: 2 out of 5
Total: 5.5 out of 15
Google Chrome
Corner Rendering: 4.5 out of 5
Text Rendering: 4 out of 5
Image Rendering: 4 out of 5
Total: 11.5 out of 15
Overall Chrome and Safari in my opinion display images that have been re-sized the best, however these are also 2 of the newer browsers, so no matter how you look at it, browsers are getting better at rendering re-sized images.
This however still doesn't replace doing it server side or in an image editor.
About Joel
