cloudflare / embed-box

Universal install guide for embed codes and CMS plugins.
http://embedbox.io
MIT License
77 stars 12 forks source link

optimize png images using zopflipng #126

Closed PeterDaveHello closed 7 years ago

PeterDaveHello commented 7 years ago

Use Google's zopflipng to re-compress the png images losslessly, 62 imgs optimized as below:

 app/site/assets/customize-feature.png                                    | Bin 207120 -> 102023 bytes
 app/site/assets/documentation-feature.png                                | Bin 102102 -> 51066 bytes
 app/site/assets/dotted.png                                               | Bin 83 -> 73 bytes
 app/site/assets/favicon.png                                              | Bin 1084 -> 648 bytes
 app/site/assets/got-plugins-feature.png                                  | Bin 128379 -> 73403 bytes
 app/site/assets/logo.png                                                 | Bin 3649 -> 2735 bytes
 app/targets/drupal/activate-plugin.png                                   | Bin 58071 -> 29963 bytes
 app/targets/drupal/upload-plugin.png                                     | Bin 160839 -> 116902 bytes
 app/targets/joomla/activate-plugin.png                                   | Bin 109174 -> 63844 bytes
 app/targets/joomla/choose-file.png                                       | Bin 148487 -> 82464 bytes
 app/targets/joomla/choose-template.png                                   | Bin 245769 -> 163156 bytes
 app/targets/joomla/insert-code-body.png                                  | Bin 200490 -> 117057 bytes
 app/targets/joomla/insert-code-head.png                                  | Bin 229923 -> 134310 bytes
 app/targets/joomla/open-templates.png                                    | Bin 190055 -> 109830 bytes
 app/targets/joomla/save.png                                              | Bin 67748 -> 34689 bytes
 app/targets/joomla/upload-plugin.png                                     | Bin 110528 -> 65765 bytes
 app/targets/shopify/shopify-latest/choose-template.png                   | Bin 108555 -> 57839 bytes
 app/targets/shopify/shopify-latest/edit-template.png                     | Bin 104922 -> 53951 bytes
 app/targets/tumblr/tumblr-latest/edit-appearance.png                     | Bin 97414 -> 52482 bytes
 app/targets/tumblr/tumblr-latest/edit-html.png                           | Bin 43109 -> 21687 bytes
 app/targets/tumblr/tumblr-latest/edit-theme.png                          | Bin 161622 -> 87770 bytes
 app/targets/weebly/paste-embed-code-footer.png                           | Bin 64649 -> 33345 bytes
 app/targets/weebly/paste-embed-code-header.png                           | Bin 64770 -> 33392 bytes
 app/targets/wordpress/activate-plugin.png                                | Bin 99369 -> 49287 bytes
 app/targets/wordpress/upload-plugin.png                                  | Bin 97148 -> 54470 bytes
 dist/assets/app/targets/joomla/activate-plugin.png                       | Bin 109174 -> 63844 bytes
 dist/assets/app/targets/joomla/choose-file.png                           | Bin 148487 -> 82464 bytes
 dist/assets/app/targets/joomla/choose-template.png                       | Bin 245769 -> 163156 bytes
 dist/assets/app/targets/joomla/insert-code-body.png                      | Bin 200490 -> 117057 bytes
 dist/assets/app/targets/joomla/insert-code-head.png                      | Bin 229923 -> 134310 bytes
 dist/assets/app/targets/joomla/open-templates.png                        | Bin 190055 -> 109830 bytes
 dist/assets/app/targets/joomla/save.png                                  | Bin 67748 -> 34689 bytes
 dist/assets/app/targets/joomla/upload-plugin.png                         | Bin 110528 -> 65765 bytes
 dist/assets/app/targets/shopify/shopify-latest/choose-template.png       | Bin 108555 -> 57839 bytes
 dist/assets/app/targets/shopify/shopify-latest/edit-template.png         | Bin 104922 -> 53951 bytes
 dist/assets/app/targets/tumblr/tumblr-latest/edit-appearance.png         | Bin 97414 -> 52482 bytes
 dist/assets/app/targets/tumblr/tumblr-latest/edit-html.png               | Bin 43109 -> 21687 bytes
 dist/assets/app/targets/tumblr/tumblr-latest/edit-theme.png              | Bin 161622 -> 87770 bytes
 dist/assets/app/targets/weebly/paste-embed-code-footer.png               | Bin 64649 -> 33345 bytes
 dist/assets/app/targets/weebly/paste-embed-code-header.png               | Bin 64770 -> 33392 bytes
 dist/assets/app/targets/wordpress/activate-plugin.png                    | Bin 99369 -> 49287 bytes
 dist/assets/app/targets/wordpress/upload-plugin.png                      | Bin 97148 -> 54470 bytes
 media/annotation-assets.png                                              | Bin 59929 -> 36162 bytes
 media/annotation-assets.sketch/QuickLook/Preview.png                     | Bin 56144 -> 30927 bytes
 media/annotation-assets.sketch/QuickLook/Thumbnail.png                   | Bin 82158 -> 58671 bytes
 media/customize-feature/assets/blue.png                                  | Bin 71930 -> 34514 bytes
 media/customize-feature/assets/green.png                                 | Bin 72023 -> 34616 bytes
 media/customize-feature/assets/orange.png                                | Bin 72656 -> 34441 bytes
 media/customize-feature/assets/purple.png                                | Bin 72183 -> 34588 bytes
 media/customize-feature/assets/red.png                                   | Bin 72550 -> 34643 bytes
 media/customize-feature/customize-feature.sketch/QuickLook/Preview.png   | Bin 207225 -> 101840 bytes
 media/customize-feature/customize-feature.sketch/QuickLook/Thumbnail.png | Bin 173290 -> 129170 bytes
 media/favicon.sketch/QuickLook/Preview.png                               | Bin 1626 -> 1341 bytes
 media/favicon.sketch/QuickLook/Thumbnail.png                             | Bin 58621 -> 17935 bytes
 media/generic.sketch/QuickLook/Preview.png                               | Bin 16763 -> 6731 bytes
 media/generic.sketch/QuickLook/Thumbnail.png                             | Bin 103235 -> 56277 bytes
 media/logo-alt.png                                                       | Bin 3649 -> 2735 bytes
 media/logo.png                                                           | Bin 2752 -> 2058 bytes
 media/logo.sketch/QuickLook/Preview.png                                  | Bin 6105 -> 2386 bytes
 media/logo.sketch/QuickLook/Thumbnail.png                                | Bin 74406 -> 22256 bytes
 media/shopify-icon.sketch/QuickLook/Preview.png                          | Bin 42169 -> 24018 bytes
 media/shopify-icon.sketch/QuickLook/Thumbnail.png                        | Bin 44385 -> 31194 bytes
GirlBossRush commented 7 years ago

Hi Peter!

Thank you for your PR. I've implemented zopflipng compression in the build script. v2.0.3 now features significantly smaller assets! 😄

Cheers, Eric Teffen Ellis

PeterDaveHello commented 7 years ago

Runnung zopflipng during on the build will take a very long time, and actually I found that the assets in this PR are much smaller than v2.0.3, anyway, still good to see the change.

GirlBossRush commented 7 years ago

Hi Peter,

It's possible that our configuration of zopflipng can be adjusted to match your results. As you mentioned the compression does increase build time by quite a bit!

I believe the separation of source and compiled assets is a great way to keep development easier for contributors. It's possible we can cut the build times by moving this step to a maintenance script since the images don't often change.

Cheers