Evaluate pngquant for PNG size reduction

RESOLVED FIXED in Firefox 30

Status

()

Firefox for Android
Theme and Visual Design
RESOLVED FIXED
4 years ago
3 years ago

People

(Reporter: rnewman, Assigned: rnewman)

Tracking

(Blocks: 1 bug)

Trunk
Firefox 30
All
Android
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite -

Firefox Tracking Flags

(relnote-firefox -, fennec30+)

Details

Attachments

(6 attachments)

(Assignee)

Comment 1

4 years ago
396,443 => 253,199 bytes.

There are some files with more than 256 colors (sample follows):

drawable-xhdpi/tip_addsearch.png:
  read 5KB file corrected for gamma 2.2
  made histogram...615 colors found

drawable-xhdpi/ic_menu_reload.png:
  read 4KB file corrected for gamma 2.2
  made histogram...397 colors found

drawable-xhdpi/tab_thumbnail_default.png:
  read 6KB file corrected for gamma 2.2
  made histogram...705 colors found

drawable-xhdpi/ic_menu_new_private_tab.png:
  read 3KB file corrected for gamma 2.2
  made histogram...357 colors found

drawable-xhdpi/ic_menu_bookmark_remove.png:
  read 5KB file corrected for gamma 2.2
  made histogram...314 colors found



But apparently some of these can be written as quality-100 in fewer than 256: 

  writing 162-color image as tab_thumbnail_default-fs8.png
(Assignee)

Comment 2

4 years ago
Created attachment 8360069 [details]
quanted tab_thumbnail_default-fs8.png
(Assignee)

Comment 3

4 years ago
Created attachment 8360070 [details]
unquanted tab_thumbnail_default.png
(Assignee)

Comment 4

4 years ago
Well, I can't see a difference between those... Ian?
Flags: needinfo?(ibarlow)
Yeah those look pretty good. Mind trying something that has a little more colour going on in the image? Maybe the Firefox and Aurora logos in http://cl.ly/3x1K270t2t1o ?
Flags: needinfo?(ibarlow)
(Assignee)

Comment 6

4 years ago
firefox.png:
  read 183KB file corrected for gamma 2.2
  made histogram...21805 colors found
  selecting colors...4%
  selecting colors...7%
  selecting colors...11%
  selecting colors...32%
  selecting colors...35%
  selecting colors...56%
  selecting colors...76%
  selecting colors...97%
  selecting colors...100%
  moving colormap towards local minimum
  eliminated opaque tRNS-chunk entries...51 entries transparent
  mapped image to new colors...MSE=3.035 (Q=89)
  writing 256-color image as firefox-fs8.png
No errors detected while quantizing 1 image.


  71K firefox-fs8.png
 183K firefox.png
(Assignee)

Comment 7

4 years ago
Created attachment 8360167 [details]
Fox, pre
(Assignee)

Comment 8

4 years ago
Created attachment 8360168 [details]
Fox, post
(Assignee)

Comment 9

4 years ago
Created attachment 8360169 [details]
quanted firefox.png
(Assignee)

Comment 10

4 years ago
A 110KB saving is pretty compelling, mind. Ought to take a look on a tablet screen. (Take a look in Bugzilla on your phone!)
(Assignee)

Comment 11

4 years ago
Created attachment 8360209 [details] [diff] [review]
Use pngquant for PNG size reduction.

This patch uses

  find . -name '*.png' -print0 | xargs -0 -P8 pngquant --ext .png --force --quality 95-100 --verbose 256

to process the contents of `resources`. No images were reduced below 95 quality, and most seemed to be 99 or 100.
(Assignee)

Updated

4 years ago
Assignee: nobody → rnewman
Status: NEW → ASSIGNED
The main thing I'd be concerned for is that assets that are supposed to sit next to each other with the same colors joining are now no longer guaranteed to have identical colors.

But for stuff like the logos this should be fine and potentially a good win.
The build you posted looks good, Richard. I don't seem to see any issues like GCP raised where icons are different colours -- everything looks good there.

Your large Firefox icon test though is a little problematic. You can see some pretty nasty dithering around the ear, and the shadow of the snout. There is also a noticeable increase in banding on the globe and in the shadow. I don't feel comfortable with that much loss in quality. Can the crushing be dialed back at all for full colour icons like this?
(Assignee)

Comment 15

4 years ago
(In reply to Gian-Carlo Pascutto (:gcp) from comment #13)
> The main thing I'd be concerned for is that assets that are supposed to sit
> next to each other with the same colors joining are now no longer guaranteed
> to have identical colors.

I would think the opposite: so long as an asset uses fewer than 256 colors, the output should be pixel-wise identical, and the individual colors should be identical. pngquant won't actually mutate image *content* unless the image uses more than 256 colors, right?
Of course it doesn't do anything for <= 256 colors. I mean that we probably have separate PNG's that are supposed to sit next to each other in the interface and use surfaces with identical colors, but may have >256 colors total. In this case *after* pnguant there's no guarantee the surfaces still match up. The difference may be so tiny they can't really be noticed, though. But it's an assumption in the design ("these colors are the same") that may suddenly be invalidated.
(Assignee)

Comment 17

4 years ago
(In reply to Ian Barlow (:ibarlow) from comment #14)
> The build you posted looks good, Richard. I don't seem to see any issues
> like GCP raised where icons are different colours -- everything looks good
> there.

Awesome!

> Can the crushing be dialed back at all for full colour icons like this?

The trick that pngquant uses is to drop each pixel down from 24-bit color down to 8-bit color with a custom palette. For low-color images, this is a trivial transform. For high-color images like the Firefox icon, it actually redraws the whole image using some fancy dithering to get it down to 256 colors.

The huge space saving is due to that drop down to a fixed palette.

We can try some other tools for png crushing here, but if dithering is unacceptable, then we won't be able to get the space wins from this approach for these kinds of high-color logos.
(Assignee)

Comment 18

4 years ago
Comment on attachment 8360209 [details] [diff] [review]
Use pngquant for PNG size reduction.

This isn't a patch for reading, per se. Please evaluate the APK, and skim the list of changed files (below).

drawable-hdpi-v11/alert_addon.png
drawable-hdpi-v11/alert_app.png
drawable-hdpi-v11/alert_camera.png
drawable-hdpi-v11/alert_download.png
drawable-hdpi-v11/alert_mic.png
drawable-hdpi-v11/alert_mic_camera.png
drawable-hdpi-v11/firefox_settings_alert.png
drawable-hdpi-v11/ic_menu_addons.png
drawable-hdpi-v11/ic_menu_apps.png
drawable-hdpi-v11/ic_menu_back.png
drawable-hdpi-v11/ic_menu_bookmark_add.png
drawable-hdpi-v11/ic_menu_bookmark_remove.png
drawable-hdpi-v11/ic_menu_desktop_mode_off.png
drawable-hdpi-v11/ic_menu_desktop_mode_on.png
drawable-hdpi-v11/ic_menu_downloads.png
drawable-hdpi-v11/ic_menu_find_in_page.png
drawable-hdpi-v11/ic_menu_forward.png
drawable-hdpi-v11/ic_menu_new_private_tab.png
drawable-hdpi-v11/ic_menu_new_tab.png
drawable-hdpi-v11/ic_menu_quit.png
drawable-hdpi-v11/ic_menu_reload.png
drawable-hdpi-v11/ic_menu_save_as_pdf.png
drawable-hdpi-v11/ic_menu_settings.png
drawable-hdpi-v11/ic_menu_tools.png
drawable-hdpi-v11/ic_status_logo.png
drawable-hdpi/ab_done.png
drawable-hdpi/ab_stacked_transparent_light_holo.9.png
drawable-hdpi/abouthome_thumbnail.png
drawable-hdpi/alert_addon.png
drawable-hdpi/alert_app.png
drawable-hdpi/alert_camera.png
drawable-hdpi/alert_download.png
drawable-hdpi/alert_mic.png
drawable-hdpi/alert_mic_camera.png
drawable-hdpi/arrow_popup_bg.9.png
drawable-hdpi/blank.png
drawable-hdpi/bookmark_folder_closed.png
drawable-hdpi/bookmark_folder_opened.png
drawable-hdpi/close.png
drawable-hdpi/color_picker_row_bg.9.png
drawable-hdpi/copy.png
drawable-hdpi/cut.png
drawable-hdpi/favicon.png
drawable-hdpi/find_close.png
drawable-hdpi/find_next.png
drawable-hdpi/find_prev.png
drawable-hdpi/folder.png
drawable-hdpi/grid_icon_bg_activated.9.png
drawable-hdpi/grid_icon_bg_focused.9.png
drawable-hdpi/handle_end.png
drawable-hdpi/handle_middle.png
drawable-hdpi/handle_start.png
drawable-hdpi/history_tabs_indicator_selected.9.png
drawable-hdpi/home_bg.png
drawable-hdpi/home_star.png
drawable-hdpi/home_tab_menu_strip.9.png
drawable-hdpi/ic_menu_addons_filler.png
drawable-hdpi/ic_menu_bookmark_add.png
drawable-hdpi/ic_menu_bookmark_remove.png
drawable-hdpi/ic_menu_character_encoding.png
drawable-hdpi/ic_menu_forward.png
drawable-hdpi/ic_menu_guest.png
drawable-hdpi/ic_menu_new_private_tab.png
drawable-hdpi/ic_menu_new_tab.png
drawable-hdpi/ic_menu_reload.png
drawable-hdpi/ic_menu_share.png
drawable-hdpi/ic_status_logo.png
drawable-hdpi/ic_url_bar_go.png
drawable-hdpi/ic_url_bar_reader.png
drawable-hdpi/ic_url_bar_search.png
drawable-hdpi/ic_url_bar_star.png
drawable-hdpi/ic_url_bar_tab.png
drawable-hdpi/icon_bookmarks_empty.png
drawable-hdpi/icon_last_tabs.png
drawable-hdpi/icon_last_tabs_empty.png
drawable-hdpi/icon_most_recent.png
drawable-hdpi/icon_most_recent_empty.png
drawable-hdpi/icon_most_visited.png
drawable-hdpi/icon_openinapp.png
drawable-hdpi/icon_pageaction.png
drawable-hdpi/icon_reading_list_empty.png
drawable-hdpi/larry.png
drawable-hdpi/lock_identified.png
drawable-hdpi/lock_verified.png
drawable-hdpi/menu.png
drawable-hdpi/menu_item_check.png
drawable-hdpi/menu_item_more.png
drawable-hdpi/menu_item_uncheck.png
drawable-hdpi/menu_light.png
drawable-hdpi/menu_panel_bg.9.png
drawable-hdpi/menu_pb.png
drawable-hdpi/menu_popup_arrow_bottom.png
drawable-hdpi/menu_popup_arrow_top.png
drawable-hdpi/menu_popup_bg.9.png
drawable-hdpi/paste.png
drawable-hdpi/pause.png
drawable-hdpi/pin.png
drawable-hdpi/play.png
drawable-hdpi/reader.png
drawable-hdpi/reader_active.png
drawable-hdpi/reader_cropped.png
drawable-hdpi/reading_list.png
drawable-hdpi/select_all.png
drawable-hdpi/shield.png
drawable-hdpi/shield_doorhanger.png
drawable-hdpi/spinner_default.9.png
drawable-hdpi/spinner_focused.9.png
drawable-hdpi/spinner_pressed.9.png
drawable-hdpi/tab_close.png
drawable-hdpi/tab_indicator_divider.9.png
drawable-hdpi/tab_indicator_selected.9.png
drawable-hdpi/tab_indicator_selected_focused.9.png
drawable-hdpi/tab_new.png
drawable-hdpi/tab_new_pb.png
drawable-hdpi/tab_thumbnail_default.png
drawable-hdpi/tab_thumbnail_shadow.png
drawable-hdpi/tabs_count.png
drawable-hdpi/tabs_count_foreground.png
drawable-hdpi/tabs_normal.png
drawable-hdpi/tabs_private.png
drawable-hdpi/tabs_synced.png
drawable-hdpi/tip_addsearch.png
drawable-hdpi/top_site_add.png
drawable-hdpi/url_bar_entry_default.9.png
drawable-hdpi/url_bar_entry_default_pb.9.png
drawable-hdpi/url_bar_entry_pressed.9.png
drawable-hdpi/url_bar_entry_pressed_pb.9.png
drawable-hdpi/urlbar_stop.png
drawable-hdpi/validation_arrow.png
drawable-hdpi/validation_arrow_inverted.png
drawable-hdpi/validation_bg.9.png
drawable-hdpi/warning.png
drawable-hdpi/warning_doorhanger.png
drawable-large-hdpi-v11/arrow_popup_bg.9.png
drawable-large-hdpi-v11/ic_menu_back.png
drawable-large-hdpi-v11/ic_menu_forward.png
drawable-large-hdpi-v11/ic_menu_reload.png
drawable-large-hdpi-v11/menu.png
drawable-large-mdpi-v11/arrow_popup_bg.9.png
drawable-large-mdpi-v11/ic_menu_back.png
drawable-large-mdpi-v11/ic_menu_forward.png
drawable-large-mdpi-v11/ic_menu_reload.png
drawable-large-mdpi-v11/menu.png
drawable-large-xhdpi-v11/arrow_popup_bg.9.png
drawable-large-xhdpi-v11/ic_menu_back.png
drawable-large-xhdpi-v11/ic_menu_forward.png
drawable-large-xhdpi-v11/ic_menu_reload.png
drawable-large-xhdpi-v11/menu.png
drawable-mdpi-v11/alert_addon.png
drawable-mdpi-v11/alert_app.png
drawable-mdpi-v11/alert_camera.png
drawable-mdpi-v11/alert_download.png
drawable-mdpi-v11/alert_mic.png
drawable-mdpi-v11/alert_mic_camera.png
drawable-mdpi-v11/firefox_settings_alert.png
drawable-mdpi-v11/ic_menu_addons.png
drawable-mdpi-v11/ic_menu_apps.png
drawable-mdpi-v11/ic_menu_back.png
drawable-mdpi-v11/ic_menu_bookmark_add.png
drawable-mdpi-v11/ic_menu_bookmark_remove.png
drawable-mdpi-v11/ic_menu_desktop_mode_off.png
drawable-mdpi-v11/ic_menu_desktop_mode_on.png
drawable-mdpi-v11/ic_menu_downloads.png
drawable-mdpi-v11/ic_menu_find_in_page.png
drawable-mdpi-v11/ic_menu_forward.png
drawable-mdpi-v11/ic_menu_new_private_tab.png
drawable-mdpi-v11/ic_menu_new_tab.png
drawable-mdpi-v11/ic_menu_quit.png
drawable-mdpi-v11/ic_menu_reload.png
drawable-mdpi-v11/ic_menu_save_as_pdf.png
drawable-mdpi-v11/ic_menu_settings.png
drawable-mdpi-v11/ic_menu_tools.png
drawable-mdpi-v11/ic_status_logo.png
drawable-mdpi/ab_done.png
drawable-mdpi/ab_stacked_transparent_light_holo.9.png
drawable-mdpi/abouthome_thumbnail.png
drawable-mdpi/alert_addon.png
drawable-mdpi/alert_app.png
drawable-mdpi/alert_camera.png
drawable-mdpi/alert_download.png
drawable-mdpi/alert_mic.png
drawable-mdpi/alert_mic_camera.png
drawable-mdpi/arrow_popup_bg.9.png
drawable-mdpi/autocomplete_list_bg.9.png
drawable-mdpi/blank.png
drawable-mdpi/bookmark_folder_closed.png
drawable-mdpi/bookmark_folder_opened.png
drawable-mdpi/bookmarkdefaults_favicon_addons.png
drawable-mdpi/bookmarkdefaults_favicon_support.png
drawable-mdpi/close.png
drawable-mdpi/color_picker_row_bg.9.png
drawable-mdpi/copy.png
drawable-mdpi/cut.png
drawable-mdpi/desktop_notification.png
drawable-mdpi/favicon.png
drawable-mdpi/find_close.png
drawable-mdpi/find_next.png
drawable-mdpi/find_prev.png
drawable-mdpi/folder.png
drawable-mdpi/grid_icon_bg_activated.9.png
drawable-mdpi/grid_icon_bg_focused.9.png
drawable-mdpi/handle_end.png
drawable-mdpi/handle_middle.png
drawable-mdpi/handle_start.png
drawable-mdpi/history_tabs_indicator_selected.9.png
drawable-mdpi/home_tab_menu_strip.9.png
drawable-mdpi/ic_menu_addons_filler.png
drawable-mdpi/ic_menu_bookmark_add.png
drawable-mdpi/ic_menu_bookmark_remove.png
drawable-mdpi/ic_menu_character_encoding.png
drawable-mdpi/ic_menu_forward.png
drawable-mdpi/ic_menu_guest.png
drawable-mdpi/ic_menu_new_private_tab.png
drawable-mdpi/ic_menu_new_tab.png
drawable-mdpi/ic_menu_reload.png
drawable-mdpi/ic_menu_share.png
drawable-mdpi/ic_status_logo.png
drawable-mdpi/ic_url_bar_go.png
drawable-mdpi/ic_url_bar_reader.png
drawable-mdpi/ic_url_bar_search.png
drawable-mdpi/ic_url_bar_star.png
drawable-mdpi/ic_url_bar_tab.png
drawable-mdpi/icon_bookmarks_empty.png
drawable-mdpi/icon_last_tabs.png
drawable-mdpi/icon_last_tabs_empty.png
drawable-mdpi/icon_most_recent.png
drawable-mdpi/icon_most_recent_empty.png
drawable-mdpi/icon_most_visited.png
drawable-mdpi/icon_openinapp.png
drawable-mdpi/icon_pageaction.png
drawable-mdpi/icon_reading_list_empty.png
drawable-mdpi/larry.png
drawable-mdpi/lock_identified.png
drawable-mdpi/lock_verified.png
drawable-mdpi/marketplace.png
drawable-mdpi/menu.png
drawable-mdpi/menu_item_check.png
drawable-mdpi/menu_item_more.png
drawable-mdpi/menu_item_uncheck.png
drawable-mdpi/menu_light.png
drawable-mdpi/menu_panel_bg.9.png
drawable-mdpi/menu_pb.png
drawable-mdpi/menu_popup_arrow_bottom.png
drawable-mdpi/menu_popup_arrow_top.png
drawable-mdpi/menu_popup_bg.9.png
drawable-mdpi/paste.png
drawable-mdpi/pause.png
drawable-mdpi/pin.png
drawable-mdpi/play.png
drawable-mdpi/progress_spinner.png
drawable-mdpi/reader.png
drawable-mdpi/reader_active.png
drawable-mdpi/reader_cropped.png
drawable-mdpi/reading_list.png
drawable-mdpi/scrollbar.png
drawable-mdpi/select_all.png
drawable-mdpi/shield.png
drawable-mdpi/shield_doorhanger.png
drawable-mdpi/spinner_default.9.png
drawable-mdpi/spinner_focused.9.png
drawable-mdpi/spinner_pressed.9.png
drawable-mdpi/start.png
drawable-mdpi/sync_desktop.png
drawable-mdpi/sync_mobile.png
drawable-mdpi/tab_close.png
drawable-mdpi/tab_indicator_divider.9.png
drawable-mdpi/tab_indicator_selected.9.png
drawable-mdpi/tab_indicator_selected_focused.9.png
drawable-mdpi/tab_new.png
drawable-mdpi/tab_new_pb.png
drawable-mdpi/tab_thumbnail_default.png
drawable-mdpi/tab_thumbnail_shadow.png
drawable-mdpi/tabs_count.png
drawable-mdpi/tabs_count_foreground.png
drawable-mdpi/tabs_normal.png
drawable-mdpi/tabs_private.png
drawable-mdpi/tabs_synced.png
drawable-mdpi/tip_addsearch.png
drawable-mdpi/toast.9.png
drawable-mdpi/toast_button_focused.9.png
drawable-mdpi/toast_button_pressed.9.png
drawable-mdpi/toast_divider.9.png
drawable-mdpi/top_site_add.png
drawable-mdpi/url_bar_entry_default.9.png
drawable-mdpi/url_bar_entry_default_pb.9.png
drawable-mdpi/url_bar_entry_pressed.9.png
drawable-mdpi/url_bar_entry_pressed_pb.9.png
drawable-mdpi/urlbar_stop.png
drawable-mdpi/validation_arrow.png
drawable-mdpi/validation_arrow_inverted.png
drawable-mdpi/validation_bg.9.png
drawable-mdpi/warning.png
drawable-mdpi/warning_doorhanger.png
drawable-xhdpi-v11/alert_addon.png
drawable-xhdpi-v11/alert_app.png
drawable-xhdpi-v11/alert_camera.png
drawable-xhdpi-v11/alert_download.png
drawable-xhdpi-v11/alert_mic.png
drawable-xhdpi-v11/alert_mic_camera.png
drawable-xhdpi-v11/firefox_settings_alert.png
drawable-xhdpi-v11/ic_menu_addons.png
drawable-xhdpi-v11/ic_menu_apps.png
drawable-xhdpi-v11/ic_menu_back.png
drawable-xhdpi-v11/ic_menu_bookmark_add.png
drawable-xhdpi-v11/ic_menu_bookmark_remove.png
drawable-xhdpi-v11/ic_menu_desktop_mode_off.png
drawable-xhdpi-v11/ic_menu_desktop_mode_on.png
drawable-xhdpi-v11/ic_menu_downloads.png
drawable-xhdpi-v11/ic_menu_find_in_page.png
drawable-xhdpi-v11/ic_menu_forward.png
drawable-xhdpi-v11/ic_menu_new_private_tab.png
drawable-xhdpi-v11/ic_menu_new_tab.png
drawable-xhdpi-v11/ic_menu_quit.png
drawable-xhdpi-v11/ic_menu_reload.png
drawable-xhdpi-v11/ic_menu_save_as_pdf.png
drawable-xhdpi-v11/ic_menu_settings.png
drawable-xhdpi-v11/ic_menu_tools.png
drawable-xhdpi-v11/ic_status_logo.png
drawable-xhdpi/ab_done.png
drawable-xhdpi/ab_stacked_transparent_light_holo.9.png
drawable-xhdpi/abouthome_thumbnail.png
drawable-xhdpi/alert_addon.png
drawable-xhdpi/alert_app.png
drawable-xhdpi/alert_camera.png
drawable-xhdpi/alert_download.png
drawable-xhdpi/alert_mic.png
drawable-xhdpi/alert_mic_camera.png
drawable-xhdpi/arrow_popup_bg.9.png
drawable-xhdpi/blank.png
drawable-xhdpi/bookmark_folder_closed.png
drawable-xhdpi/bookmark_folder_opened.png
drawable-xhdpi/close.png
drawable-xhdpi/color_picker_row_bg.9.png
drawable-xhdpi/copy.png
drawable-xhdpi/cut.png
drawable-xhdpi/favicon.png
drawable-xhdpi/find_close.png
drawable-xhdpi/find_next.png
drawable-xhdpi/find_prev.png
drawable-xhdpi/folder.png
drawable-xhdpi/grid_icon_bg_activated.9.png
drawable-xhdpi/grid_icon_bg_focused.9.png
drawable-xhdpi/handle_end.png
drawable-xhdpi/handle_middle.png
drawable-xhdpi/handle_start.png
drawable-xhdpi/history_tabs_indicator_selected.9.png
drawable-xhdpi/home_tab_menu_strip.9.png
drawable-xhdpi/ic_menu_addons_filler.png
drawable-xhdpi/ic_menu_bookmark_add.png
drawable-xhdpi/ic_menu_bookmark_remove.png
drawable-xhdpi/ic_menu_character_encoding.png
drawable-xhdpi/ic_menu_forward.png
drawable-xhdpi/ic_menu_guest.png
drawable-xhdpi/ic_menu_new_private_tab.png
drawable-xhdpi/ic_menu_new_tab.png
drawable-xhdpi/ic_menu_reload.png
drawable-xhdpi/ic_menu_share.png
drawable-xhdpi/ic_status_logo.png
drawable-xhdpi/ic_url_bar_go.png
drawable-xhdpi/ic_url_bar_reader.png
drawable-xhdpi/ic_url_bar_search.png
drawable-xhdpi/ic_url_bar_star.png
drawable-xhdpi/ic_url_bar_tab.png
drawable-xhdpi/icon_bookmarks_empty.png
drawable-xhdpi/icon_last_tabs.png
drawable-xhdpi/icon_last_tabs_empty.png
drawable-xhdpi/icon_most_recent.png
drawable-xhdpi/icon_most_recent_empty.png
drawable-xhdpi/icon_most_visited.png
drawable-xhdpi/icon_openinapp.png
drawable-xhdpi/icon_pageaction.png
drawable-xhdpi/icon_reading_list_empty.png
drawable-xhdpi/larry.png
drawable-xhdpi/lock_identified.png
drawable-xhdpi/lock_verified.png
drawable-xhdpi/menu.png
drawable-xhdpi/menu_item_check.png
drawable-xhdpi/menu_item_more.png
drawable-xhdpi/menu_item_uncheck.png
drawable-xhdpi/menu_light.png
drawable-xhdpi/menu_panel_bg.9.png
drawable-xhdpi/menu_pb.png
drawable-xhdpi/menu_popup_arrow_bottom.png
drawable-xhdpi/menu_popup_arrow_top.png
drawable-xhdpi/menu_popup_bg.9.png
drawable-xhdpi/paste.png
drawable-xhdpi/pause.png
drawable-xhdpi/pin.png
drawable-xhdpi/play.png
drawable-xhdpi/reader.png
drawable-xhdpi/reader_active.png
drawable-xhdpi/reader_cropped.png
drawable-xhdpi/reading_list.png
drawable-xhdpi/shield.png
drawable-xhdpi/shield_doorhanger.png
drawable-xhdpi/spinner_default.9.png
drawable-xhdpi/spinner_focused.9.png
drawable-xhdpi/spinner_pressed.9.png
drawable-xhdpi/tab_close.png
drawable-xhdpi/tab_indicator_divider.9.png
drawable-xhdpi/tab_indicator_selected.9.png
drawable-xhdpi/tab_indicator_selected_focused.9.png
drawable-xhdpi/tab_new.png
drawable-xhdpi/tab_new_pb.png
drawable-xhdpi/tab_thumbnail_default.png
drawable-xhdpi/tab_thumbnail_shadow.png
drawable-xhdpi/tabs_count.png
drawable-xhdpi/tabs_count_foreground.png
drawable-xhdpi/tabs_normal.png
drawable-xhdpi/tabs_private.png
drawable-xhdpi/tabs_synced.png
drawable-xhdpi/tip_addsearch.png
drawable-xhdpi/top_site_add.png
drawable-xhdpi/url_bar_entry_default.9.png
drawable-xhdpi/url_bar_entry_default_pb.9.png
drawable-xhdpi/url_bar_entry_pressed.9.png
drawable-xhdpi/url_bar_entry_pressed_pb.9.png
drawable-xhdpi/urlbar_stop.png
drawable-xhdpi/validation_arrow.png
drawable-xhdpi/validation_arrow_inverted.png
drawable-xhdpi/validation_bg.9.png
drawable-xhdpi/warning.png
drawable-xhdpi/warning_doorhanger.png
drawable-xlarge-hdpi-v11/ic_menu_bookmark_add.png
drawable-xlarge-hdpi-v11/ic_menu_bookmark_remove.png
drawable-xlarge-mdpi-v11/ic_menu_bookmark_add.png
drawable-xlarge-mdpi-v11/ic_menu_bookmark_remove.png
drawable-xlarge-xhdpi-v11/ic_menu_bookmark_add.png
drawable-xlarge-xhdpi-v11/ic_menu_bookmark_remove.png
Attachment #8360209 - Flags: review?(mark.finkle)
Ahh, finally found this for ya. Too late eh? Well.. I'll post it anyway:

http://developer.android.com/guide/topics/graphics/2d-graphics.html#drawables-from-images
"Note: Image resources placed in res/drawable/ may be automatically optimized with lossless image compression by the aapt tool during the build process. For example, a true-color PNG that does not require more than 256 colors may be converted to an 8-bit PNG with a color palette. This will result in an image of equal quality but which requires less memory. So be aware that the image binaries placed in this directory can change during the build. If you plan on reading an image as a bit stream in order to convert it to a bitmap, put your images in the res/raw/ folder instead, where they will not be optimized."

since the pngquant stuff is lossy, I bet it does (much) better though.
(Assignee)

Comment 20

4 years ago
Awesome! Thanks for digging that up.

Yeah, this means that pngquanting things ourselves buys us (only) the following:

* Images that can be compacted only lossily will be compacted.
* If aapt _doesn't_ automatically optimize the other images, we'll still have optimized output.
* Our source tree is a little smaller.
(In reply to Ian Barlow (:ibarlow) from comment #14)
> The build you posted looks good, Richard. I don't seem to see any issues
> like GCP raised where icons are different colours -- everything looks good
> there.
> 
> Your large Firefox icon test though is a little problematic. You can see
> some pretty nasty dithering around the ear, and the shadow of the snout.
> There is also a noticeable increase in banding on the globe and in the
> shadow. I don't feel comfortable with that much loss in quality. Can the
> crushing be dialed back at all for full colour icons like this?

I haven't tried, but it might be worth opening the same image actually on the fire. HDPI devices can make dithering look much better (since the pixels are basically indistinguishable). Won't help with banding though...

Alternatively, I ran it through a random online webp converter and knocked it down by a factor of 4 (I'm surprised appt doesn't do that, but it may have been lossy. I don't actually have anything that can view webp installed :) )
(In reply to Wesley Johnston (:wesj) from comment #21)

> Alternatively, I ran it through a random online webp converter and knocked
> it down by a factor of 4 (I'm surprised appt doesn't do that, but it may
> have been lossy. I don't actually have anything that can view webp installed
> :) )

Sadly, webp won't be useful until Android 4.2.1 is our minimum. It's not until 4.2.1 that webp is supported with transparency and is lossless.
Comment on attachment 8360209 [details] [diff] [review]
Use pngquant for PNG size reduction.

1. Can we get an updated "script", like the one in comment 11, used to make the changes?
2. I'd like to hold off until Fx30 to make these changes. I'd like a full cycle to help us spot any image oddities.

You might want to NI yourself to remember to land it after the next merge.
Attachment #8360209 - Flags: review?(mark.finkle) → review+
(Assignee)

Comment 24

4 years ago
Will do. (Can we track for 30+?)
Flags: needinfo?(rnewman)
Whiteboard: [do not land until fx30]
tracking-fennec: --- → 30+
(Assignee)

Comment 25

4 years ago
Revisiting this.

progress_spinner is no longer used, so I removed it.

I re-ran my script, and manually removed changes for any images that were more than 256 colors and either high-visibility or had any visible changes under high magnification. (Many of the candidates for that analysis had antialiased diagonal lines, and thus could be crushed down to 256 colors without any visible change.)
Flags: needinfo?(rnewman)
(Assignee)

Comment 26

4 years ago
https://hg.mozilla.org/integration/fx-team/rev/335d4a52ba44

Size of *.png under resources:

484582 => 305880
Whiteboard: [do not land until fx30]
Target Milestone: --- → Firefox 30
https://hg.mozilla.org/mozilla-central/rev/335d4a52ba44
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Flags: in-testsuite-
Resolution: --- → FIXED
relnoters: use your best judgment on this one. flagging as a fyi.
relnote-firefox: --- → ?
Thanks but while it is nice to have, not sure it is relevant enough to be part of the release notes.
relnote-firefox: ? → -
(Assignee)

Updated

4 years ago
Blocks: 1052837
(Assignee)

Updated

3 years ago
Blocks: 1150974
You need to log in before you can comment on or make changes to this bug.