Improve heart animation image asset for dark mode
Categories
(Firefox :: Messaging System, defect, P1)
Tracking
()
People
(Reporter: Mardak, Assigned: Mardak)
References
(Blocks 1 open bug, )
Details
Attachments
(7 files)
[Tracking Requested - why for this release]: Firefox 100 upgrade spotlight image doesn't look good on dark
The asset that landed in bug 1762270 is a 115x94 gif with light theme background mostly replaced with transparent and rendered as 90x73, so there's some artifacts that show up for dark theme. It was originally used in a remote ECO message and resized to 70x57 in bug 1759680.
We could optimize the image with video codecs like vp9 to get both quality and file size, but that would require changing from setting the image as a background-image: url().
For an asset-only change, we can use a different animated image format that supports actual color transparency.
Assignee | ||
Comment 1•3 years ago
|
||
Here's an example with webp adjusting quality and resolution to hit some target file size:
$ ffmpeg -framerate 32.84 -i Heart-Ribbon_%05d.png -c:v libwebp_anim -loop 0 -quality 84 -vf scale=-1:110 -y heart-q84-x110.webp
Assignee | ||
Comment 2•3 years ago
|
||
Assignee | ||
Comment 3•3 years ago
|
||
Assignee | ||
Comment 4•3 years ago
|
||
Assignee | ||
Comment 5•3 years ago
|
||
Going with this 100KB webp that has good enough 49% quality and high enough 136x110 resolution to look good when resized to 90x73.
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Comment 6•3 years ago
|
||
Updated•3 years ago
|
Assignee | ||
Comment 8•3 years ago
|
||
Some would say the gif quality is really bad
Assignee | ||
Comment 9•3 years ago
|
||
Comment on attachment 9271183 [details]
Bug 1763486 - Improve heart animation image asset for dark mode r?dmose
Beta/Release Uplift Approval Request
- User impact if declined: Poor quality heart animated gif shown to users upgrading to 100 especially with dark theme, e.g., attachment 9271151 [details]
- Is this code covered by automated tests?: No
- Has the fix been verified in Nightly?: No
- Needs manual test from QE?: Yes
- If yes, steps to reproduce:
- activate dark theme
- configure to show upgrade spotlight (
browser.startup.homepage_override.mstone
set to "99",browser.startup.upgradeDialog.version
set to 94) - restart Firefox
- List of other uplifts needed: none
- Risk to taking this patch: Low
- Why is the change risky/not risky? (and alternatives if risky): Image asset change from .gif to .webp
- String changes made/needed: none
Assignee | ||
Updated•3 years ago
|
Comment 10•3 years ago
|
||
bugherder |
Comment 11•3 years ago
|
||
I‘ve verified this issue using the latest Firefox Nightly 101.0a1 (Build ID: 20220408094506) on Windows 10 x64, macOS 11.6, and Ubuntu 20.04.
- The heart logo is correctly visible when Dark theme is enabled and the “brand-logo” class has the “chrome://activity-stream/content/data/content/assets/heart.webp” URL.
Comment 12•3 years ago
|
||
Comment on attachment 9271183 [details]
Bug 1763486 - Improve heart animation image asset for dark mode r?dmose
Approved for 100.0b4
Comment 13•3 years ago
|
||
bugherder uplift |
Updated•3 years ago
|
Comment 14•3 years ago
|
||
I‘ve verified this issue using Firefox Beta 100.0b6 (Build ID: 20220414190112) on Windows 10 x64, macOS 11.6, and Ubuntu 20.04.
- The heart logo is correctly visible when Dark theme is enabled and the “brand-logo” class has the “chrome://activity-stream/content/data/content/assets/heart.webp” URL.
Description
•