959833 - Evaluate pngquant for PNG size reduction

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Theme and Visual Design, defect)

Description

[Richard Newman [:rnewman]]

See Bug 768579 Comment 5.

Comment 1

[Richard Newman [:rnewman]]

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

Comment 2

[Richard Newman [:rnewman]]

Attachment: quanted tab_thumbnail_default-fs8.png

Comment 3

[Richard Newman [:rnewman]]

Attachment: unquanted tab_thumbnail_default.png

Comment 4

[Richard Newman [:rnewman]]

Well, I can't see a difference between those... Ian?

Comment 5

[Ian Barlow (: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 ?

Comment 6

[Richard Newman [:rnewman]]

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

Comment 7

[Richard Newman [:rnewman]]

Attachment: Fox, pre

Comment 8

[Richard Newman [:rnewman]]

Attachment: Fox, post

Comment 9

[Richard Newman [:rnewman]]

Attachment: quanted firefox.png

Comment 10

[Richard Newman [:rnewman]]

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

Comment 11

[Richard Newman [:rnewman]]

Attachment: 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.

Comment 12

[Richard Newman [:rnewman]]

Test build:

http://people.mozilla.com/~rnewman/fennec-quant.apk

Comment 13

[Gian-Carlo Pascutto [:gcp]]

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.

Comment 14

[Ian Barlow (:ibarlow)]

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?

Comment 15

[Richard Newman [:rnewman]]

(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?

Comment 16

[Gian-Carlo Pascutto [:gcp]]

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.

Comment 17

[Richard Newman [:rnewman]]

(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.

Comment 18

[Richard Newman [:rnewman]]

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

Comment 19

[Wesley Johnston (:wesj)]

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.

Comment 20

[Richard Newman [:rnewman]]

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.

Comment 21

[Wesley Johnston (:wesj)]

(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 :) )

Comment 22

[Mark Finkle (:mfinkle) (use needinfo?)]

(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 23

[Mark Finkle (:mfinkle) (use needinfo?)]

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.

Comment 24

[Richard Newman [:rnewman]]

Will do. (Can we track for 30+?)

Comment 25

[Richard Newman [:rnewman]]

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.)

Comment 26

[Richard Newman [:rnewman]]

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

Size of *.png under resources:

484582 => 305880

Comment 27

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/335d4a52ba44

Comment 28

[Richard Newman [:rnewman]]

Relanded some upstream assets:

https://hg.mozilla.org/integration/fx-team/rev/d7f2934f2f29

Comment 29

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/d7f2934f2f29

Comment 30

[Erin Lancaster [:elan]]

relnoters: use your best judgment on this one. flagging as a fyi.

Comment 31

[Sylvestre Ledru [:Sylvestre]]

Thanks but while it is nice to have, not sure it is relevant enough to be part of the release notes.