Actually I'm sure you all know that - it is quite revealing to look at the stats for the various websites I am associated with and look at the browser usage which varies quite considerably from site to site. On this site for example FIREFOX is the clear favourite accounting for 51% of the visitors. With another site I am associated with it is Internet explorer which dominates with 62% of the visitors using that. Over 20% of the visitors for that site are still on the dreaded MSIE 6 which is such a pain when developing web pages as is MSIE 7 to a lesser extent since they obey their own rules(1) - meaning of course a beautifully laid out web page turns to custard when viewed in these browsers and has to be tweaked to get it looking right usually to its detriment in other browsers.
Anyway below are screen prints a picture displayed in six browsers using the exact same html. The difference is remarkable.
What has happened here is a large image has been resized using HTML to a smaller size and a screen print taken of the result. Best practice of course is to resize the image to the required display size using graphics software. The images you are viewing are not scaled at all (except the initial scaling done by each browser), so hopefully the differences in results will be readily apparent regardless of which browser you are using.
Image 1 
Image 2
Image 3
Image 4
Image 5
Image 6
Theoretically some of the browsers use the same rendering engine but each image has rendered differently regardless of that.
(1) Being a naturally curious fellow after writing this post I checked it out in various browsers. To my not very great surprise MSIE 7 mangles it slightly while MSIE 6 totally screws it up. I know why and could probably - with effort fix it. But its only a blog post after all.
Anyway below are screen prints a picture displayed in six browsers using the exact same html. The difference is remarkable.
What has happened here is a large image has been resized using HTML to a smaller size and a screen print taken of the result. Best practice of course is to resize the image to the required display size using graphics software. The images you are viewing are not scaled at all (except the initial scaling done by each browser), so hopefully the differences in results will be readily apparent regardless of which browser you are using.
Image 1 Image 2Image 3 Image 4Image 5Image 6Your mission should you decide to accept it is to match which browser rendered which image. The browsers are presented in random order and each is the most current version.
- Chrome
- Safari
- MSIE 8
- SeaMonkey
- Firefox
- Opera
Theoretically some of the browsers use the same rendering engine but each image has rendered differently regardless of that.
Good post Andrei.
ReplyDeleteIn my experiments, Safari renders photos rather nicely - even photos that have been shrunk don't seem to have the "jaggies". Safari's text is nicely anti-aliased as well (in this latest version).
Safari also honours the tags on photographs to show the color the photographer intended. You can turn this feature on in Firefox 3 as well (although it is not by default). If this is not turned on, then the browser just used sRGB and the colors don't display correctly.
See HERE for examples and for how to turn the feature on in Firefox 3.
I use Firefox most of all for day-to-day browsing.
One of the other cool things about the new Safari is that you can save a webpage in Web Archive format. That means one file that contains text, images, and everything. Mac users have been able to do this for a while, but it's only in the latest release that Windows users can now, too.
ps, having the browser display colors correctly is very useful and important for sites like flickr and other places where people upload their photographs and you want to see them as they should be seen.
ReplyDelete"Mac users have been able to do this for a while, but it's only in the latest release that Windows users can now, too."
ReplyDelete*snickers*
Indeed it is the anti-aliasing that has made all the difference to these images and two different algorithms are discernible - which is best is a matter of taste I guess.
ReplyDeleteThere is no doubt in my mind that the way Safari renders web pages is easily the most pleasing to the eye, to mine at least.
What I don't entirely get is the amount of MSIE 6 users there still are. I know some of it is corporates who have built intranets around its idiosycracies and cannot easily move forward - although MSIE has addressed this supposedly with its quirks mode for MSIE 8.
But why anybody else who is on Windows XP or above is using it is a mystery to me.
Check this page out in Firefox - it does not work at all nicely because it is ie 6 dependent I think.
Oh the folly of developers who choose not to follow standards.