593840 - Optimize .png files in themes/, branding/ and help/

Status: RESOLVED FIXED

(SeaMonkey :: Themes, defect)

Description

[Stefan [:stefanh]]

Seems that we have a lot of icons that contains those chunks.

Comment 1

[Stefan [:stefanh]]

Attachment: remove chunks and optimize further

Total file size of png's in themes/ before: 1304057

Patch made from running 'pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB -brute' on all png's in themes/

Then i reverted the throbbers - since they get squashed to one single image (I hope I didn't missed any):
suite/themes/classic/communicator/brand/throbber16-anim.png
suite/themes/classic/communicator/brand/throbber-anim.png
suite/themes/classic/communicator/sync/sync-16-throbber.png
suite/themes/modern/communicator/brand/throbber16-anim.png
suite/themes/modern/communicator/brand/throbber-anim.png
suite/themes/modern/communicator/sync/sync-16-throbber.png

Now total file size is: 1219344
For me, the optimizing have visual effect. For instance, the mac stop button became significally lighter. Also, the reload button changed. My color profile got removed... (played with reverting and just removing the sRGB chunk).

Comment 2

[Stefan [:stefanh]]

Comment on attachment 516918 [details] [diff] [review]
remove chunks and optimize further

diff --git a/suite/themes/classic/communicator/icons/feedIcon16.png b/suite/themes/classic/communicator/icons/feedIcon16.png
old mode 100755
new mode 100644

No idea what happened here (assuming that most other files have 100644)

Comment 3

[[e-mail]]

(In reply to comment #2)
> diff --git a/suite/themes/classic/communicator/icons/feedIcon16.png
> b/suite/themes/classic/communicator/icons/feedIcon16.png
> old mode 100755
> new mode 100644
> 
> No idea what happened here (assuming that most other files have 100644)
If these were images I created with my Windows graphics package then my Interix hg would have thought that their mode was 755. I'd have had to use hg diff -g to create the patch, which would have maintained the bogus mode.

Comment 4

[[e-mail]]

(In reply to comment #1)
> Then i reverted the throbbers - since they get squashed to one single image (I
> hope I didn't missed any):
> suite/themes/classic/communicator/brand/throbber16-anim.png
> suite/themes/classic/communicator/brand/throbber-anim.png
> suite/themes/classic/communicator/sync/sync-16-throbber.png
> suite/themes/modern/communicator/brand/throbber16-anim.png
> suite/themes/modern/communicator/brand/throbber-anim.png
> suite/themes/modern/communicator/sync/sync-16-throbber.png
sync-32-throbber.png too I'm afraid.

Comment 5

[[e-mail]]

Some of the files in branding and help could be optimised too.

optipng was only able to reduce the files to 1267492 but maybe your figure was lower because you accidentally included sync-32-throbber.png?

Comment 6

[Stefan [:stefanh]]

(In reply to comment #5)
> optipng was only able to reduce the files to 1267492 but maybe your figure was
> lower because you accidentally included sync-32-throbber.png?

Reverting the 2 sync-32-throbber.png's I end up with 1266240 ;-)
Does optipng allow you to remove the gAMA, cHRM, iCCP and sRGB chunks?

Comment 7

[Stefan [:stefanh]]

Attachment: New patch, covers themes/, branding/ and help/

branding: from 388910 to 383130
help: from 37476 to 36632

Comment 8

[Stefan [:stefanh]]

Attachment: Updated patch

Turns out that I added an icon in bug 637176 without optimizing it. I also removed a few icons. This is an updated patch that also takes care of the non-optimized icon.

Comment 9

[Stefan [:stefanh]]

Comment on attachment 518102 [details] [diff] [review]
Updated patch

Oops, forgot to set the flag...

Comment 10

[[e-mail]]

When I applied this patch, it actually increased the size of communicatoricons.png and editoricons-small.png!

Comment 11

[[e-mail]]

So, I analysed the 228 images listed in the patch.
* optipng optimised editoricons-small.png which pngcrush increased.
* optipng was unable to optimise communicatoricons.png; pngcrush increased it.
  Neither was either package able to optimise bookmark-folder-closed.png,
  taskbar.png, folder-closed.png, folder-open.png, remote-blocked.png, nor any
  of the Modern media images.
* optipng was unable to optimise 44 other images, but pngcrush was.
* optipng optimised 6 images but not as well as pngcrush.
* All the other 165 images were optimised better by optipng.

Comment 12

[Stefan [:stefanh]]

OK, so either we take my patch or you provide an optipng patch :-)

Comment 13

[Stefan [:stefanh]]

The way I ran pngcrush it only optimized the IDAT chunks and renoved the gAMA, cHRM, iCCP and sRGB chunks,

Comment 14

[Stefan [:stefanh]]

So, when recompressing the image, the size can increase:

Recompressing suite/themes/classic/editor/icons/editoricons-small.png
   Total length of data found in IDAT chunks    =    42549
   Removed the gAMA chunk.
   IDAT length with method  11 (fm 0 zl 2 zs 2) =    58539
   IDAT length with method  12 (fm 1 zl 2 zs 2) =    60130
   IDAT length with method  13 (fm 2 zl 2 zs 2) =    67650
   IDAT length with method  14 (fm 3 zl 2 zs 2) =    72290
   IDAT length with method  15 (fm 4 zl 2 zs 2) =    62052
   IDAT length with method  16 (fm 5 zl 2 zs 2) =    56603
   IDAT length with method  17 (fm 0 zl 1 zs 0) =    45345
   IDAT length with method  18 (fm 1 zl 1 zs 0) =    51979
   IDAT length with method  19 (fm 2 zl 1 zs 0) =    58527
   IDAT length with method  20 (fm 3 zl 1 zs 0) =    61784
   IDAT length with method  21 (fm 4 zl 1 zs 0) =    55058
   IDAT length with method  22 (fm 5 zl 1 zs 0) =    49850
   IDAT length with method  23 (fm 0 zl 1 zs 1) =    45345
   IDAT length with method  24 (fm 1 zl 1 zs 1) =    51979
   IDAT length with method  25 (fm 2 zl 1 zs 1) =    58527
   IDAT length with method  26 (fm 3 zl 1 zs 1) =    61784
   IDAT length with method  27 (fm 4 zl 1 zs 1) =    55058
   IDAT length with method  28 (fm 5 zl 1 zs 1) =    49850
   IDAT length with method  29 (fm 0 zl 2 zs 0) =    44770
   IDAT length with method  30 (fm 1 zl 2 zs 0) =    51377
   IDAT length with method  31 (fm 2 zl 2 zs 0) =    57952
   IDAT length with method  32 (fm 3 zl 2 zs 0) =    61254
   IDAT length with method  33 (fm 4 zl 2 zs 0) =    54472
   IDAT length with method  34 (fm 5 zl 2 zs 0) =    49313
   IDAT length with method  35 (fm 0 zl 2 zs 1) =    44770
   IDAT length with method  36 (fm 1 zl 2 zs 1) =    51377
   IDAT length with method  37 (fm 2 zl 2 zs 1) =    57952
   IDAT length with method  38 (fm 3 zl 2 zs 1) =    61254
   IDAT length with method  39 (fm 4 zl 2 zs 1) =    54472
   IDAT length with method  40 (fm 5 zl 2 zs 1) =    49313
   IDAT length with method  41 (fm 0 zl 3 zs 0) =    44287
   IDAT length with method  42 (fm 1 zl 3 zs 0) =    51049
   IDAT length with method  43 (fm 2 zl 3 zs 0) =    57671
   IDAT length with method  44 (fm 3 zl 3 zs 0) =    60961
   IDAT length with method  45 (fm 4 zl 3 zs 0) =    54149
   IDAT length with method  46 (fm 5 zl 3 zs 0) =    49011
   IDAT length with method  47 (fm 0 zl 3 zs 1) =    44287
   IDAT length with method  48 (fm 1 zl 3 zs 1) =    51049
   IDAT length with method  49 (fm 2 zl 3 zs 1) =    57671
   IDAT length with method  50 (fm 3 zl 3 zs 1) =    60961
   IDAT length with method  51 (fm 4 zl 3 zs 1) =    54149
   IDAT length with method  52 (fm 5 zl 3 zs 1) =    49011
   IDAT length with method  53 (fm 0 zl 4 zs 0) =    44346
   IDAT length with method  54 (fm 1 zl 4 zs 0) =    51424
   IDAT length with method  55 (fm 2 zl 4 zs 0) =    58372
   IDAT length with method  56 (fm 3 zl 4 zs 0) =    61803
   IDAT length with method  57 (fm 4 zl 4 zs 0) =    54551
   IDAT length with method  58 (fm 5 zl 4 zs 0) =    49347
   IDAT length with method  59 (fm 0 zl 4 zs 1) =    49161
   IDAT length with method  60 (fm 1 zl 4 zs 1) =    54939
   IDAT length with method  61 (fm 2 zl 4 zs 1) =    63134
   IDAT length with method  62 (fm 3 zl 4 zs 1) =    67305
   IDAT length with method  63 (fm 4 zl 4 zs 1) =    58124
   IDAT length with method  64 (fm 5 zl 4 zs 1) =    52200
   IDAT length with method  65 (fm 0 zl 5 zs 0) =    43915
   IDAT length with method  66 (fm 1 zl 5 zs 0) =    50955
   IDAT length with method  67 (fm 2 zl 5 zs 0) =    57904
   IDAT length with method  68 (fm 3 zl 5 zs 0) =    61418
   IDAT length with method  69 (fm 4 zl 5 zs 0) =    54097
   IDAT length with method  70 (fm 5 zl 5 zs 0) =    48916
   IDAT length with method  71 (fm 0 zl 5 zs 1) =    48680
   IDAT length with method  72 (fm 1 zl 5 zs 1) =    54566
   IDAT length with method  73 (fm 2 zl 5 zs 1) =    62739
   IDAT length with method  74 (fm 3 zl 5 zs 1) =    67023
   IDAT length with method  75 (fm 4 zl 5 zs 1) =    57724
   IDAT length with method  76 (fm 5 zl 5 zs 1) =    51837
   IDAT length with method  77 (fm 0 zl 6 zs 0) =    43593
   IDAT length with method  78 (fm 1 zl 6 zs 0) =    50661
   IDAT length with method  79 (fm 2 zl 6 zs 0) =    57591
   IDAT length with method  80 (fm 3 zl 6 zs 0) =    61137
   IDAT length with method  81 (fm 4 zl 6 zs 0) =    53794
   IDAT length with method  82 (fm 5 zl 6 zs 0) =    48682
   IDAT length with method  83 (fm 0 zl 6 zs 1) =    48411
   IDAT length with method  84 (fm 1 zl 6 zs 1) =    54286
   IDAT length with method  85 (fm 2 zl 6 zs 1) =    62482
   IDAT length with method  86 (fm 3 zl 6 zs 1) =    66778
   IDAT length with method  87 (fm 4 zl 6 zs 1) =    57460
   IDAT length with method  88 (fm 5 zl 6 zs 1) =    51637
   IDAT length with method  89 (fm 0 zl 7 zs 0) =    43451
   IDAT length with method  90 (fm 1 zl 7 zs 0) =    50518
   IDAT length with method  91 (fm 2 zl 7 zs 0) =    57435
   IDAT length with method  92 (fm 3 zl 7 zs 0) =    61006
   IDAT length with method  93 (fm 4 zl 7 zs 0) =    53643
   IDAT length with method  94 (fm 5 zl 7 zs 0) =    48513
   IDAT length with method  95 (fm 0 zl 7 zs 1) =    48234
   IDAT length with method  96 (fm 1 zl 7 zs 1) =    54147
   IDAT length with method  97 (fm 2 zl 7 zs 1) =    62295
   IDAT length with method  98 (fm 3 zl 7 zs 1) =    66647
   IDAT length with method  99 (fm 4 zl 7 zs 1) =    57288
   IDAT length with method 100 (fm 5 zl 7 zs 1) =    51468
   IDAT length with method 101 (fm 0 zl 8 zs 0) =    43243
   IDAT length with method 102 (fm 1 zl 8 zs 0) =    50248
   IDAT length with method 103 (fm 2 zl 8 zs 0) =    57154
   IDAT length with method 104 (fm 3 zl 8 zs 0) =    60794
   IDAT length with method 105 (fm 4 zl 8 zs 0) =    53384
   IDAT length with method 106 (fm 5 zl 8 zs 0) =    48264
   IDAT length with method 107 (fm 0 zl 8 zs 1) =    48004
   IDAT length with method 108 (fm 1 zl 8 zs 1) =    53872
   IDAT length with method 109 (fm 2 zl 8 zs 1) =    62020
   IDAT length with method 110 (fm 3 zl 8 zs 1) =    66386
   IDAT length with method 111 (fm 4 zl 8 zs 1) =    57015
   IDAT length with method 112 (fm 5 zl 8 zs 1) =    51203
   IDAT length with method 113 (fm 0 zl 9 zs 0) =    43005
   IDAT length with method 114 (fm 1 zl 9 zs 0) =    50051
   IDAT length with method 115 (fm 2 zl 9 zs 0) =    56935
   IDAT length with method 116 (fm 3 zl 9 zs 0) =    60650
   IDAT length with method 117 (fm 4 zl 9 zs 0) =    53176
   IDAT length with method 118 (fm 5 zl 9 zs 0) =    48016
   IDAT length with method 119 (fm 0 zl 9 zs 1) =    47677
   IDAT length with method 120 (fm 1 zl 9 zs 1) =    53594
   IDAT length with method 121 (fm 2 zl 9 zs 1) =    61705
   IDAT length with method 122 (fm 3 zl 9 zs 1) =    66153
   IDAT length with method 123 (fm 4 zl 9 zs 1) =    56719
   IDAT length with method 124 (fm 5 zl 9 zs 1) =    50869
   IDAT length with method 125 (fm 0 zl 1 zs 3) =    52458
   IDAT length with method 126 (fm 1 zl 1 zs 3) =    56220
   IDAT length with method 127 (fm 2 zl 1 zs 3) =    64105
   IDAT length with method 128 (fm 3 zl 1 zs 3) =    68413
   IDAT length with method 129 (fm 4 zl 1 zs 3) =    59136
   IDAT length with method 130 (fm 5 zl 1 zs 3) =    52859
   IDAT length with method 131 (fm 0 zl 4 zs 3) =    52458
   IDAT length with method 132 (fm 1 zl 4 zs 3) =    56220
   IDAT length with method 133 (fm 2 zl 4 zs 3) =    64105
   IDAT length with method 134 (fm 3 zl 4 zs 3) =    68413
   IDAT length with method 135 (fm 4 zl 4 zs 3) =    59136
   IDAT length with method 136 (fm 5 zl 4 zs 3) =    52859
   Best pngcrush method = 113 (fm 0 zl 9 zs 0) for suite/themes/classic/editor/icons/editoricons-small-new.png
     (1.07% IDAT increase)
     (1.03% filesize increase)

Comment 15

[Stefan [:stefanh]]

It looks to me that optipng doesn't allow you to remove sRGB (and gAMA etc) chunks.

Comment 16

[Stefan [:stefanh]]

Attachment: New version, use both pngcrush and optipng

Total png file size in suite/ = 1735788
Total png file size in suite/ after pngcrush run (and throbber revert) = 1691300
Total png file size in suite/ after opting run (and throbber revert) = 1688597

I first ran pngcrush in suite/ and 225 images were reduced in file size (I checked the output). I didn't checked how many files that pngcrush changed without reducing the actual file size, though. Don't count throbbers, and you have 217 images.

Then I did 'find . -name *.png | xargs optipng -nx -o7' in suite

optipng then reduced the size of 34 images. This includes throbbers, so we have 26 images that optipng managed to further reduce the size of.

Comment 17

[Robert Kaiser]

(In reply to comment #10)
> When I applied this patch, it actually increased the size of
> communicatoricons.png and editoricons-small.png!

Ouch, no size optimization tool should ever be used with settings that allow it to overwrite a smaller file with a larger file, that's b0rken by design!
And yes, I guess those are already well-optimized from one of our earlier such patches to decrease image sizes (IIRC, at least Neil and me did such patches in the past).

Comment 18

[Stefan [:stefanh]]

(In reply to comment #17)
> (In reply to comment #10)
> > When I applied this patch, it actually increased the size of
> > communicatoricons.png and editoricons-small.png!
> 
> Ouch, no size optimization tool should ever be used with settings that allow it
> to overwrite a smaller file with a larger file, that's b0rken by design!
> And yes, I guess those are already well-optimized from one of our earlier such

pngcrush just creates an optimized copy of the original image. So I guess it's in a way my fault, because I just did 'mv -f temp.png $png' for each png image, without checking if the temp.png was smaller than the original. But let me take a closer look at the logs which I happened to save...

Comment 19

[Stefan [:stefanh]]

OK, so I made another run just to check.

1) pngcrush executed: Looking at the diff, 238 files in suite/ changed (including throbbers)

/themes/classic/communicator/icons/communicatoricons.png was increased, but the gAMA chunk was also removed

/themes/classic/editor/icons/editoricons-small.png was increased, but the gAMA chunk was also removed

These are the only increased file sizes I can find.

2) optipng executed: Decreased the size of /themes/classic/communicator/icons/communicatoricons.png with 151 bytes and decreased the size of /themes/classic/editor/icons/editoricons-small.png with 456 bytes. optipng also decreased the size of 24 other files:

/branding/nightly/content/about.png (not changed by pngcrush)
/branding/nightly/icons/gtk/ablistWindow48.png (not changed by pngcrush)
/branding/nightly/icons/gtk/msgcomposeWindow48.png (not changed by pngcrush)
/locales/en-US/chrome/common/help/images/personalbar.png
/locales/en-US/chrome/common/help/images/search.png
/themes/classic/communicator/downloads/downloadButtons.png 
/themes/classic/communicator/icons/communicatoricons-small.png
/themes/classic/editor/icons/editoricons.png (not changed by pngcrush)
/themes/classic/mac/editor/icons/editoricons-small.png
/themes/classic/mac/editor/icons/editoricons.png
/themes/classic/mac/messenger/addressbook/icons/addressbookicons.png
/themes/classic/mac/messenger/icons/messengericons.png
/themes/classic/messenger/addressbook/icons/addressbookicons.png (not changed by pngcrush)
/themes/classic/messenger/icons/messengericons-small.png
/themes/classic/messenger/icons/messengericons.png
/themes/classic/messenger/smime/icons/smimeicons-small.png
/themes/classic/messenger/smime/icons/smimeicons.png (not changed by pngcrush)
/themes/modern/communicator/downloads/downloadButtons.png
/themes/modern/communicator/icons/common.png (not changed by pngcrush)
/themes/modern/global/icons/information-16.png
/themes/modern/global/icons/notfound.png
/themes/modern/navigator/icons/browser-small.png
/themes/modern/navigator/icons/browser.png (not changed by pngcrush)
/themes/modern/preview.png

At this stage, there are now 246 files changed in suite/.

I will attach a new patch in a minute (excluding the throbbers).

Comment 20

[Stefan [:stefanh]]

Attachment: New version, use both pngcrush and optipng

This patch refers to comment #19.

Comment 21

[Stefan [:stefanh]]

If anyone wonders why I put up an identical patch, it's because I spent too much time on this :( (it's the right patch, yes - but the previous one was also right)

Comment 22

[[e-mail]]

Comment on attachment 518986 [details] [diff] [review]
New version, use both pngcrush and optipng

Well, at least none of the files are bigger. But the following files are unchanged in size, presumably because they didn't have any of those chunks:

suite/themes/classic/communicator/bookmarks/bookmark-folder-closed.png
suite/themes/classic/communicator/taskbar/taskbar.png
suite/themes/classic/messenger/icons/folder-closed.png
suite/themes/classic/messenger/icons/folder-open.png
suite/themes/classic/messenger/icons/remote-blocked.png
suite/themes/modern/global/media/muteButton.png
suite/themes/modern/global/media/pauseButton.png
suite/themes/modern/global/media/playButton.png
suite/themes/modern/global/media/scrubberThumb.png
suite/themes/modern/global/media/scrubberThumbWide.png
suite/themes/modern/global/media/unmuteButton.png

Is there a way you can double-check that the file(s) actually have the chunks that you're trying to remove? If not, at least can you avoid making "unnecessary" changes to these files.

Comment 23

[Stefan [:stefanh]]

I should be able to see this in the logs.

Comment 24

[Stefan [:stefanh]]

Attachment: Final patch (pushed)

jftr, this is what I landed - I reverted changes to the files mentioned in comment #22. Pushed as http://hg.mozilla.org/comm-central/rev/2be65fe3798c