Suggestion: Better Image Resize

[rx8wej]

When people improperly use HTML to resize their images smaller than the original dimensions, they often look really bad. I was thinking if it did some sort of sampling instead of a straight image resize it could look considerably better. Computers are powerful enough these days to do this sort of computation on the fly, and if it is a burden for a slower system, it could be an option with a few different methods for resizing, including the current one.

Some examples of resampling algorithms that could potentially be used:

• http://en.wikipedia.org/wiki/Lanczos_resampling
• http://en.wikipedia.org/wiki/B-spline
• http://en.wikipedia.org/wiki/Hermite_interpolation

I don't know much about implementation of these things, but I do know that images look a lot nicer when resized properly.

[ulillillia]

I see pixel averaging effects on scaled up images so it does appear that this is being done. Downscaling, that I don't know. I usually use a separate image file for that. I've actually written a C program that scales images, for automating an otherwise highly repetitive system, needed for my game's ground. I don't know which algorithm name it uses, but I'm using a pixel-weighting method. Scale an image to 2/3 the size, each pixel in the source is like 3 "credits" and the output uses 2 "credits". Of course, 720x480 going to 480x320 has the same idea - 720 "credits" per pixel in the source for 480 in the output. It also works for upscaling too. It would need some fine-tuning though.

[patrickjdempsey]

Firefox uses bilinear resampling by default. This was one of the big improvements that came in Firefox 3.0... "smooth" image resizing. Site authors (for instance those who host sites that have up-scaled sprite graphics) can choose to disable the smoothing:
https://developer.mozilla.org/En/CSS/Image-rendering

I've done experiments with forcing downward resizing of images in Firefox and I've found that resizing by 2/3 or 1/3 gives much better results than resizing by 3/4 or 1/2. For instance I found that resizing a 16x16 image to 11x11 looked dramatically better than resizing the same image to 12x12 despite only being one pixel-width smaller. There's also been other reports that resizing works best at certain factors.

This note seems to confirm my suspicion that for efficiency reasons, the resampling algorithms work best at certain factors:
http://en.wikipedia.org/wiki/Image_scaling#Efficiency

Even in the graphics applications I often use which use bicubic resampling, one must be very careful with choosing how to resize an image to get the best quality. Because of this I often scale my much larger original vector image to a certain factor of the desired final icon image for the best downsizing. Generally graphics applications do a much betting job a resizing than the browser, because they have the freedom to use much more processor-intensive methods such as bicubic. The web browser on the other hand needs to use whatever is the cheapest (in terms of resource use) method that looks the best. For now that's bilinear resampling.

The moral of the story is friends don't let friends resize bitmapped images in the browser. Period.

[RNiK]

FYI

Bug 486918 - Awful image quality in image scaling
Bug 372462 - Improve image quality on resize
Bug 445888 - Resized image looks terrible if it is loaded incrementally

[patrickjdempsey]

And do NOT "bump" or comment any of those bug reports... it's obvious Mozilla knows about the problem for some time now and simply doesn't have the resources to dedicate to it at the moment. I suspect they may also avoid it if it possibly means taking a memory hit.

[rx8wej]

One thing I have noticed is that Thunderbird exhibits the same bad quality when loading HTML emails with images. It seems to not be specific to FF, but to the Gecko engine in general. I imagine it will eventually get fixed. Probably after they minimize the interface down to two buttons and run out of things to delete. At least there are bugs filed about it already.

[patrickjdempsey]

Yes, it will be the same on any Gecko-rendered products TMK. Yes there are bugs out on it, but there are bugs out on a million things that may or may not ever get fixed.... welcome to Mozilla.

[Bluefang]

Performance is still an issue with higher quality resampling. The developers chose bilinear resampling because it had the best balance of performance to image quality.