Page MenuHomePhabricator

Compress OOjs UI PNGs with pngcrush -brute -reduce
Closed, DeclinedPublic

Description

pngcrush finds that a number of core/resources/lib/oojs-ui/themes/mediawiki/images/*/*png files can be reduced in size.
I would have submitted a patch against OOjs but oojs/ui/src/themes/ contains no PNG files and docs don't mention what creates them. Please adjust your PNG-creation methods before throwing those files in resources/lib/, thanks.

Numbers:

$ find resources/lib/ -name '*png' -exec pngcrush -force -brute {} {}.out \; 2>&1 | grep -B 2 "filesize reduction" 
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/arrow-down.png.out
     (8.43% critical chunk reduction)
     (6.90% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/arrow-rtl-invert.png.out
     (11.46% critical chunk reduction)
     (9.61% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/alert-invert.png.out
     (13.66% critical chunk reduction)
     (11.74% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/arrow-up.png.out
     (10.12% critical chunk reduction)
     (8.29% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/arrow-ltr-invert.png.out
     (4.65% critical chunk reduction)
     (3.83% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/arrow-down-invert.png.out
     (2.76% critical chunk reduction)
     (2.29% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/arrow-ltr.png.out
     (12.94% critical chunk reduction)
     (10.63% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/required.png.out
     (6.86% critical chunk reduction)
     (5.81% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/alert.png.out
     (9.18% critical chunk reduction)
     (7.73% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/arrow-up-invert.png.out
     (8.33% critical chunk reduction)
     (6.99% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/arrow-rtl.png.out
     (13.22% critical chunk reduction)
     (10.90% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/indicators/required-invert.png.out
     (6.11% critical chunk reduction)
     (5.26% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/search-invert.png.out
     (7.88% critical chunk reduction)
     (6.83% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/move-rtl-invert.png.out
     (6.52% critical chunk reduction)
     (5.43% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/arched-arrow-rtl-invert.png.out
     (12.40% critical chunk reduction)
     (10.85% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/expand-invert.png.out
     (1.14% critical chunk reduction)
     (0.94% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/settings.png.out
     (11.04% critical chunk reduction)
     (8.90% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/arched-arrow-ltr.png.out
     (8.23% critical chunk reduction)
     (7.09% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/remove.png.out
     (15.56% critical chunk reduction)
     (12.21% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-invert.png.out
     (12.66% critical chunk reduction)
     (10.95% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/circle.png.out
     (8.70% critical chunk reduction)
     (7.38% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/alert-invert.png.out
     (8.10% critical chunk reduction)
     (7.46% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/add-constructive.png.out
     (16.52% critical chunk reduction)
     (12.50% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/move-ltr-invert.png.out
     (4.26% critical chunk reduction)
     (3.56% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/tag-invert.png.out
     (10.08% critical chunk reduction)
     (8.81% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/advanced.png.out
     (12.79% critical chunk reduction)
     (11.78% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/picture.png.out
     (15.34% critical chunk reduction)
     (13.71% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/search.png.out
     (10.05% critical chunk reduction)
     (8.54% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/link.png.out
     (8.36% critical chunk reduction)
     (7.37% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/add.png.out
     (13.08% critical chunk reduction)
     (9.72% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/settings-invert.png.out
     (12.73% critical chunk reduction)
     (10.40% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/move-ltr.png.out
     (9.34% critical chunk reduction)
     (7.76% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/close-invert.png.out
     (3.96% critical chunk reduction)
     (3.41% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/check-constructive.png.out
     (26.25% critical chunk reduction)
     (23.53% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/window.png.out
     (7.01% critical chunk reduction)
     (5.98% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/info-invert.png.out
     (7.94% critical chunk reduction)
     (7.16% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/collapse.png.out
     (8.82% critical chunk reduction)
     (7.25% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/arched-arrow-rtl.png.out
     (8.97% critical chunk reduction)
     (7.69% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/remove-destructive.png.out
     (19.74% critical chunk reduction)
     (15.87% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/close.png.out
     (5.74% critical chunk reduction)
     (4.88% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/code-invert.png.out
     (7.69% critical chunk reduction)
     (6.73% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/help.png.out
     (14.02% critical chunk reduction)
     (13.04% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/arched-arrow-ltr-invert.png.out
     (11.24% critical chunk reduction)
     (9.87% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/tag.png.out
     (7.11% critical chunk reduction)
     (6.11% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/check-invert.png.out
     (8.48% critical chunk reduction)
     (7.28% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/alert.png.out
     (9.09% critical chunk reduction)
     (8.31% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/code.png.out
     (9.36% critical chunk reduction)
     (8.09% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/menu-invert.png.out
     (15.54% critical chunk reduction)
     (12.43% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/remove-invert.png.out
     (20.14% critical chunk reduction)
     (16.02% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/advanced-invert.png.out
     (14.20% critical chunk reduction)
     (13.19% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/add-invert.png.out
     (14.41% critical chunk reduction)
     (10.81% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/comment.png.out
     (12.64% critical chunk reduction)
     (10.43% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/circle-constructive.png.out
     (19.80% critical chunk reduction)
     (17.61% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/clear.png.out
     (3.82% critical chunk reduction)
     (3.42% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/picture-invert.png.out
     (13.93% critical chunk reduction)
     (12.63% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/link-invert.png.out
     (3.69% critical chunk reduction)
     (3.28% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/help-invert.png.out
     (10.25% critical chunk reduction)
     (9.62% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/menu.png.out
     (12.59% critical chunk reduction)
     (9.88% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/comment-invert.png.out
     (16.84% critical chunk reduction)
     (14.16% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/window-invert.png.out
     (8.90% critical chunk reduction)
     (7.69% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/check.png.out
     (8.08% critical chunk reduction)
     (6.81% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/move-rtl.png.out
     (9.60% critical chunk reduction)
     (7.94% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/clear-invert.png.out
     (0.29% critical chunk reduction)
     (0.26% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/icons/info.png.out
     (11.34% critical chunk reduction)
     (10.06% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/mediawiki/images/textures/transparency.png.out
     (16.67% critical chunk reduction)
     (12.41% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/indicators/arrow-down.png.out
     (8.33% critical chunk reduction)
     (6.51% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/indicators/arrow-up.png.out
     (8.21% critical chunk reduction)
     (6.43% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/indicators/arrow-ltr.png.out
     (9.30% critical chunk reduction)
     (7.23% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/indicators/required.png.out
     (6.86% critical chunk reduction)
     (5.81% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/indicators/alert.png.out
     (9.18% critical chunk reduction)
     (7.73% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/indicators/arrow-rtl.png.out
     (8.21% critical chunk reduction)
     (6.43% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/settings.png.out
     (11.04% critical chunk reduction)
     (8.90% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/arched-arrow-ltr.png.out
     (8.23% critical chunk reduction)
     (7.09% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/remove.png.out
     (15.56% critical chunk reduction)
     (12.21% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/advanced.png.out
     (12.79% critical chunk reduction)
     (11.78% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/picture.png.out
     (15.34% critical chunk reduction)
     (13.71% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/search.png.out
     (10.05% critical chunk reduction)
     (8.54% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/link.png.out
     (8.36% critical chunk reduction)
     (7.37% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/add.png.out
     (13.08% critical chunk reduction)
     (9.72% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/move-ltr.png.out
     (9.34% critical chunk reduction)
     (7.76% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/window.png.out
     (7.01% critical chunk reduction)
     (5.98% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/collapse.png.out
     (8.82% critical chunk reduction)
     (7.25% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/arched-arrow-rtl.png.out
     (8.97% critical chunk reduction)
     (7.69% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/close.png.out
     (5.74% critical chunk reduction)
     (4.88% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/help.png.out
     (14.02% critical chunk reduction)
     (13.04% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/tag.png.out
     (7.11% critical chunk reduction)
     (6.11% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/alert.png.out
     (9.09% critical chunk reduction)
     (8.31% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/code.png.out
     (9.36% critical chunk reduction)
     (8.09% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/comment.png.out
     (12.64% critical chunk reduction)
     (10.43% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/clear.png.out
     (3.82% critical chunk reduction)
     (3.42% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/menu.png.out
     (12.59% critical chunk reduction)
     (9.88% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/check.png.out
     (8.08% critical chunk reduction)
     (6.81% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/move-rtl.png.out
     (9.60% critical chunk reduction)
     (7.94% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/icons/info.png.out
     (11.34% critical chunk reduction)
     (10.06% filesize reduction)
--
     for output to resources/lib/oojs-ui/themes/apex/images/textures/transparency.png.out
     (16.67% critical chunk reduction)
     (12.41% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png.out
     (no critical chunk change)
     (47.12% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-bg_glass_75_dadada_1x400.png.out
     (1.55% critical chunk reduction)
     (38.17% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png.out
     (6.57% critical chunk reduction)
     (33.13% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png.out
     (6.20% critical chunk reduction)
     (40.46% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-icons_222222_256x240.png.out
     (30.08% critical chunk reduction)
     (31.29% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png.out
     (no critical chunk change)
     (47.34% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png.out
     (16.33% critical chunk reduction)
     (43.57% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-icons_cd0a0a_256x240.png.out
     (2.76% critical chunk reduction)
     (5.56% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-icons_454545_256x240.png.out
     (30.80% critical chunk reduction)
     (31.98% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-icons_888888_256x240.png.out
     (30.82% critical chunk reduction)
     (32.00% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png.out
     (no critical chunk change)
     (46.23% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png.out
     (4.10% critical chunk reduction)
     (31.93% filesize reduction)
--
     for output to resources/lib/jquery.ui/themes/smoothness/images/ui-icons_2e83ff_256x240.png.out
     (2.76% critical chunk reduction)
     (5.56% filesize reduction)

Event Timeline

Nemo_bis raised the priority of this task from to Needs Triage.
Nemo_bis updated the task description. (Show Details)
Nemo_bis added a project: OOUI.
Nemo_bis changed Security from none to None.
Nemo_bis subscribed.

Change 176637 had a related patch set uploaded (by Prtksxna):
Add PNG compression grunt task using 'pngmin'

https://gerrit.wikimedia.org/r/176637

Patch-For-Review

Jdforrester-WMF renamed this task from Compress OOjs PNGs with pngcrush -brute -reduce to Compress OOjs UI PNGs with pngcrush -brute -reduce.Dec 1 2014, 5:57 PM
Jdforrester-WMF assigned this task to Prtksxna.
Jdforrester-WMF triaged this task as Low priority.
Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.

Change 176637 abandoned by Prtksxna:
Add PNG compression grunt task using 'pngmin'

Reason:
Not worth it.

https://gerrit.wikimedia.org/r/176637

Prtksxna removed a project: Patch-For-Review.
Prtksxna moved this task from Doing to Backlog on the OOUI board.
matmarex claimed this task.

Per discussion on the patch, it seems that there is practically no gain (several bytes across all icons together) and the build process is already too complicated. If you find that there exists a compression method that actually reduces the size, please reopen.

matmarex subscribed.
matmarex unsubscribed.
matmarex lowered the priority of this task from Low to Lowest.Feb 5 2015, 5:32 PM
gerritbot subscribed.

Change 188845 had a related patch set uploaded (by Nemo bis):
Compress OOjs UI PNGs with pngcrush -brute -reduce

https://gerrit.wikimedia.org/r/188845

Patch-For-Review

Change 188845 abandoned by Jforrester:
Compress OOjs UI PNGs with pngcrush -brute -reduce

Reason:
Don't make downstream changes to libraries.

https://gerrit.wikimedia.org/r/188845

Change 188845 restored by Nemo bis:
Compress OOjs UI PNGs with pngcrush -brute -reduce

Reason:
Only if you respect MediaWiki development guidelines when merging upstream stuff

https://gerrit.wikimedia.org/r/188845

Change 188845 abandoned by Jforrester:
Compress OOjs UI PNGs with pngcrush -brute -reduce

Reason:
This is not the way to complain about another patch, and you know it.

https://gerrit.wikimedia.org/r/188845

Change 188845 restored by Nemo bis:
Compress OOjs UI PNGs with pngcrush -brute -reduce

Reason:
It is. I can compress the PNGs every time you update oojs, no worries. Just cc me and I'll amend your updates.

https://gerrit.wikimedia.org/r/188845

"Needs Volunteer".
Change 188845 abandoned by Jforrester
Change 188845 abandoned by Jforrester

I'm having issues reconciling mixed messaging from the product's maintainers.

James' opinion generally overrides my opinion on repositories he's the product manager for, like this one. The priority field value is badly named (being discussed on T78617) and just means lowest priority.

Jdforrester-WMF claimed this task.
Jdforrester-WMF subscribed.

"Needs Volunteer".
Change 188845 abandoned by Jforrester
Change 188845 abandoned by Jforrester

I'm having issues reconciling mixed messaging from the product's maintainers.

There are no mixed messages. You're the one that declared this wasn't declined, not us.

Can't really be declined until the development guidelines are changed for this to be in compliance with them.

Change 188845 abandoned by Krinkle:
Compress OOjs UI PNGs with pngcrush -brute -reduce

https://gerrit.wikimedia.org/r/188845

We are not talking about couple of bytes. We are talking about 3 kilobytes spread over 69 files (around 10% for each file). And these images are going to be loaded/embedded millions of times. Compressing images is a standard practice and should apply to all of MediaWiki. This task should not be declined just because "it is too difficult" to compress the images.

$ git show --stat | grep 'Bin' | wc -l
69
$ git show --stat | grep 'Bin' | awk '{sum += $4-$6} END {print sum}'
3293

We are not talking about couple of bytes. We are talking about 3 kilobytes spread over 69 files (around 10% for each file). And these images are going to be loaded/embedded millions of times. Compressing images is a standard practice and should apply to all of MediaWiki. This task should not be declined just because "it is too difficult" to compress the images.

$ git show --stat | grep 'Bin' | wc -l
69
$ git show --stat | grep 'Bin' | awk '{sum += $4-$6} END {print sum}'
3293

It's not "too difficult", it's irrelevant. The PNGs this task was filed about are not used in production, they're just demonstration test files.

The PNGs "in" OOjs UI are for use in non-MediaWiki contexts as a fall-back for clients that don't support SVGs; in MediaWiki, the few users in this situation get PNGs auto-constructed on the fly by RLIM. Beyond token testing pages on WMF Labs, the PNGs are not used anywhere at all.

I kind of changed my mind about it. It could be useful, but for a different reason: reproducible builds. When I build the library locally and update it in MediaWiki for testing, every single PNG file shows as "rewrite" in Git diff, obscuring the real changes. Hopefully optimizing them would result in everyone getting the same files, regardless of platform. (But if it does not, then I still think this is not worth working on.)