Which browser scales images the best?
20 CommentsPublished January 29th, 2007 12:51 PM EST By Daniel Goldman
Ryan from the CyberNet blog had an interesting post last week where he looked at how Opera, Internet Explorer 7 (IE7), Firefox 2, and Firefox 3 handle the scaling of images.
Read the test results for yourself. Here’s a snippet from the conclusion:
“The point that I wanted to make was that Firefox 3’s Cairo rendering engine will make more of a difference than you think, and that Opera also does a truly amazing job scaling images.”
I’m not sure if it’s just me (cause I’m biased toward my most favorite browser) or it’s a fact, but I’ve noticed so many times how Opera displays images with crispy clear edges, while IE (and sometimes Firefox) shows rough edges on certain images (use this image as an example). It always impressed me how good Opera’s image rendering engine is. I guess it’s gotta to be good, if the Opera browser needs to scale down images for small screens on mobile phones.
If you enjoyed this post, then make sure you subscribe to my RSS Feed.
using
I’m pretty sure it’s not just you – a friend of mine mentioned his anger at Firefox for poor image scaling; I tested a few images in Opera, FF2, and IE7, and Opera’s was a hell of a lot better.
using
This proves once more that Firefox 3 rendering engine is coming closer to the one we have inside Opera.
using
the presented screenshots shows imho that opera’s scaling is the best. esp. the details on the cameleon are a little blurred with ff3’s method. still great improvement they made since ff2
using
Not only does it have to be good to be usable on smartphones, but Opera is the only (well-known) browser that can scale whole websites, so you would see it more clearly if images would scale poorly than on Firefox or IE.
And btw. it’s interesting how many of the commenters already use Opera “9.12″ — me too
using
I actually mentioned this a week ago in the desktop team blog, haha. I’ve been having problems with very large scaled down images on my site causing very slow scrolling..only in Opera, however, the images appear absolutly fantastic in Opera, while appears blotty and fairly ugly in other browsers. Opera definitly has the best rendering capabilities as far as I am concerned! But, there does seem to be a problem with shifting these images and ‘redrawing’ them as I scroll. Have a look if you wish..
- http://www.kyleabaker.com/
The screenshot images are very clear and clean, but cause the window to scrolls lowly in Opera, but in other browsers they appear very pixelated and scroll fine. As soon as Opera gets this scrolling issue fixed..it will be 100% better when it comes to dealing with large images that are scaled down (both rendering them and scrolling).
using
>And btw. it’s interesting how many of the
>commenters already use Opera “9.12″ — me too
Well, it’s the spyware-edition, so we all want to support Opera, aren’t we?
I just compared to the firefox-scaling would never have thought, that there’s a notable difference, but there clearly is.
using
A user in this dutch tech forum noticed differences in how FF/IE (’and any other viewer’) and Opera rendered a particular JPG @ 300%: link. The difference is indeed noticeable. However, I’m not tech-savy enough to judge what this shows about IE/FF vs Opera. What is considered a fair rendering. I can imagine that a renderer can wipe out glitches that are nevertheless in the picture itself. (Correct me if I talk nonsense
).
using
Yeah, in Firefox 3 it both renders and scrolls nicely… Shame it’s still ~10 months off…
using
Kyle, I can confirm your experiences: beautiful zoomed down screenshots while scrolling is slow in Opera and pixel-images in Firefox2 and IE7. I discovered the page zoom of IE7 produces a similar effect – better images and worse scrolling.
wupperbayer: IE7 (IMHO well known) can scale whole websites in a Opera-like way – a feature supported since Opera2 in 1996. Fit-to-width is still missing.
using
Well, I could have made that post three years ago. I thought everyone knew. The only difference is that Cairo is finally catching up now…
using
I’ve noticed that on a few sites now.. and never realised it was due to people setting image sizes via HTML.
You might want to create thumbnails for your screenshots, 750KB is too much for a single webpage for most people(esp. those on dialup).. Could cut it down to 17KB(instead of 130KB+) per image if you used thumbnails.. Do you -need- to use the full screenshot res there?
D
using
Well kyle has got the right idea. Seems to me to be a performance trade-off. Downscaled images do look bad in ie7 and ff2, but opera lags the most when scrolling kyle’s page – I’m sure there’s some relation.. (haven’t tried ff3 since i don’t have it installed)
random note: ie7 does nicer scaling when using page zoom. Maybe keep the zoom at 99% haha
using
Uhhh… How do you figure? You think Opera will go without improvements? Interesting theory…
Anyway, something that we know won’t change in Firefox/Gecko is that it’s bigger and slower than Opera.
using
I’ve actually discovered for a long time that Opera renders images better than other major browsers. (I am not sure about Safari)
But I know Firefox 3 is catching up fast. Because I’ve heard that the major change from Firefox 2 and 3 is the rendering engine, especially on imaging.
It seems that the new Gecko engine is very promising, it even passes the Acid test.
using
How do you know? Wow, Acid2 and better image rendering… Yeah, that sure means that Firefox is catching up fast since Opera is clearly not getting any improvements!
using
Opera uses better looking but more CPU intensive scaling algorithm. That’s all.
One can turn it off here
opera:config#Multimedia|InterpolateImages
to make it faster (and uglier). To all needs
using
Sorry about the delay in a response (Internet has been acting up)
I KNOW that Opera is better than FF at this (and almost everything else I try). I hate it when I use my brothers comps (they refuse to use any non open-source browser) cause FF feels so wrong.
The scaling down of images is ****
IT AUTOMATICALLY ADDS A BORDER TO LINKS IMAGES!!!!!!!!!!!!!!!!!!
When I DOUBLE CLICK ON A URL I WANT IT TO SELECT THE WHOLE URL NOT JUST A SECTION!!!!!!!!!
Thus ends my rant
using
Great find diz. Works great
Yeah developers should use thumbnails instead… Save us the CPU usage, bandwidth, and can use an even better resize algorithm.
using
That’s a great hint, diz (although I’ll not turn it off as long as my computer is still fast enough)
Besides that I discovered that page-zoom in IE7 is different: background-images are not zoomed (at least not always), while Opera does. IE7-zoom is breaking the look and feel of my website
using
Plus making your own thumbnails allows you to do selective cropping. Some images aren’t clear when you shrink them, whether you do it in Photoshop or let the browser handle it. In those case, it often helps to pick a smaller section of the image, crop it, then create the thumbnail.