Closed Bug 1001250 Opened 10 years ago Closed 6 years ago

High-quality downscaling for app icons

Categories

(Firefox OS Graveyard :: Gaia, defect)

Product:
Firefox OS Graveyard
Component:
Gaia
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED WONTFIX

People

(Reporter: gbrander, Unassigned)

References

Details

We need automated bitmap icon downscaling for icons for 2.0 timeframe (see rational below).

* High-quality downscaling is important for icons/logos. Current icon downscaling results are not good https://mozilla.app.box.com/256scale/1/1858233339/16315811245/1. Everything else: good enough is good enough.
* roc suggests a client-side install-time build step for doing expensive
things like creating/saving high-quality icon downscales.
* roc also suggests we could implement scaling in JavaScript/canvas.

Rational / meeting notes here: https://etherpad.mozilla.org/fxos-scaling
Summaries from email thread, for posterity:

On 24 Apr 2014, at 17:05, Gordon Brander wrote:

* ImageMagick Lanczos looks good.
* ImageMagick bicubic also gives good results. No discernible difference between it and Lanczos for our purposes.
* Same for ImageMagick bilinear
* ImageMagich Lanczos, bicubic, bilinear scales all have very slightly "flat" cardinal points.
* Photoshop bicubic and bilinear both have very slightly rounder cardinal points, without the nub.
* Firefox Desktop has great results except for that nub at the cardinal points.

So I don't think the algorithm is the issue here. It may be some very slight difference in the math each use.

On 21 Apr 2014, at 17:18, Gordon Brander wrote:

- The 2.0 home app may feature the ability to go from a 3-up grid to
4-up.
- Our most tenable plan for delivering the right icon sizes to our
proliferating range of screens: scale down a 1024px image, store
result on device [1].
- Building Blocks are being updated for multi-res, multi-form-factor.

Here's a screenshot of a downscaled icon in Firefox Desktop [2].
Notice the "nub" artifacts that appear at the cardinal points of the
image. Not an uncommon artifact, but it's considered unprofessional to
see this type of scale artifact in an icon or logo. Changing
image.high_quality_downscaling.enabled doesn't seem to change the result.

On Firefox OS, things are worse. This screenshot [4] of Inari
downscaling a 256 image is typical across our range of devices [5]
[6]. Lots of rough px around edges. Again, toggling
image.high_quality_downscaling.enabled in build doesn't seem to make a
difference. I tried this in the browser and in a certified app,
with no difference. Scaling largish images (1024px) will frequently
result in strange gfx bugs, including icons blinking in/out and black
backgrounds on paint layers.

Questions:

* Can we change the scaling algorithm used for images? Is this labor
intensive?
* What is causing the difference between Fx OS and Fx? Different
scaling libraries? Scaling features turned off for efficiency?
* Is there any approach that could make client-side bitmap scaling
effective and efficient? A native API?

[1] https://etherpad.mozilla.org/homescreen2-0 Mon Apr 14:
Implications of Larger Icon Sizes on Marketplace and Content Partners
[2] https://bug999218.bugzilla.mozilla.org/attachment.cgi?id=8409894
[3] http://gordonbrander.com/2014-03-icon-scaling/,
http://bit.ly/1024scale, http://bit.ly/256scale Icon scaling test cases.
[4] https://mozilla.app.box.com/256scale/1/1858233339/16315811245/1
[5] 1024px test case screenshots
http://mozilla.box.com/fxos-icon-size-test
[6] 256px test case screenshots https://mozilla.app.box.com/256scale
Why is the scale-down algorithm used in FirefoxOS lower quality than on desktop? Is that a deliberate decision?
Flags: needinfo?(jmuizelaar)
It is a deliberate decision:
http://dxr.mozilla.org/mozilla-central/source/b2g/app/b2g.js#56

It's also worth noting that the high quality downscaling is not available to canvas
Flags: needinfo?(jmuizelaar)
I guess doing the scaling in JS is looking like the right solution.
Hi team. It's the last week of Sprint 3 and this bug isn't assigned yet. Please let me know if anyone is working on this.
The graphics team isn't. Not sure who to ask for "all of Gaia".  David maybe?
Flags: needinfo?(dscravaglieri)
I would assume that this is part of the homescreen work, and would be under Gregor. Clearing David's ni? - but feel free to chime in if you want David.

I think what we should do is see if we are "happy" or not with what we currently have. Unfortunately we won't really know until we have the new icons in place. Both bugs 1014591 and bug 1009111 should land in the next day or two. When they do - we can take a look to see if they are acceptable, and if not look at implementing some scaling algorithms.
Flags: needinfo?(dscravaglieri)
What is the status of this one? I'm checking on the last remaining, open visual refresh bugs to see what we can close out or otherwise update. Thanks!
Flags: needinfo?(kgrandon)
Gordon filed this - so I would redirect to him and ask if he is currently happy with our current solution in master. If it is not good enough, we will need more investigation.
Flags: needinfo?(kgrandon) → needinfo?(gbrander)
This was based on the understanding that we would need to "bake" scaled images to get performant icon rendering on homescreen. Back to kev (sorry :)) with a few questions:

* Back when I did the linked test cases, the platform was configured only to do low-quality image downsampling. I assume this must have changed because my homecscreen icons don't all look crap. What's happening? Did this change? Are we using canvas to downscale?
* I know we're currently running into memory constraints that may force us to go from 3 icons to 4 per row. Is the downscaling approach we're using causing this problem? Do we need platform support to fix this problem?

Thanks!
Flags: needinfo?(gbrander) → needinfo?(kgrandon)
(In reply to Gordon Brander :gordonb from comment #11)> 
> * Back when I did the linked test cases, the platform was configured only to
> do low-quality image downsampling. I assume this must have changed because
> my homecscreen icons don't all look crap. What's happening? Did this change?
> Are we using canvas to downscale?

I would have to defer to graphics folks here. We are just using whatever the default is, so I'm not sure if stuff changed or not.

> * I know we're currently running into memory constraints that may force us
> to go from 3 icons to 4 per row. Is the downscaling approach we're using
> causing this problem? Do we need platform support to fix this problem?

We've changed from 3 columns to 4 columns only on low memory devices. It's not specific to downscaling, but just the size of the icons. More image data = more memory. The graphics team is seeing what they're doing to address this though. We may be able to play with the display port or tiles to get this down further, but unlikely for 2.0.
Flags: needinfo?(kgrandon)
Firefox OS is not being worked on
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.