Skip to content

Img optimize#1106

Merged
msecret merged 2 commits into
uswds:18f-pages-stagingfrom
PeterDaveHello:img-optimize
May 10, 2016
Merged

Img optimize#1106
msecret merged 2 commits into
uswds:18f-pages-stagingfrom
PeterDaveHello:img-optimize

Conversation

@PeterDaveHello

@PeterDaveHello PeterDaveHello commented Apr 9, 2016

Copy link
Copy Markdown
Contributor

115 images losslessly optimized via zopflipng and jpegoptim!

 docs/assets/img/home/example_voteUSAgov.jpg | Bin 171168 -> 171092 bytes
 dist/img/alerts/error.png                                             | Bin 19875 -> 4154 bytes
 dist/img/alerts/info.png                                              | Bin 19481 -> 3623 bytes
 dist/img/alerts/success.png                                           | Bin 19928 -> 4071 bytes
 dist/img/alerts/warning.png                                           | Bin 18534 -> 3159 bytes
 dist/img/arrow-down.png                                               | Bin 978 -> 296 bytes
 dist/img/arrow-right.png                                              | Bin 837 -> 266 bytes
 dist/img/correct8.png                                                 | Bin 2989 -> 195 bytes
 dist/img/correct9.png                                                 | Bin 1026 -> 447 bytes
 dist/img/favicons/favicon-114.png                                     | Bin 902 -> 588 bytes
 dist/img/favicons/favicon-144.png                                     | Bin 885 -> 696 bytes
 dist/img/favicons/favicon-16.png                                      | Bin 290 -> 215 bytes
 dist/img/favicons/favicon-192.png                                     | Bin 972 -> 740 bytes
 dist/img/favicons/favicon-57.png                                      | Bin 649 -> 526 bytes
 dist/img/favicons/favicon-72.png                                      | Bin 574 -> 401 bytes
 dist/img/favicons/favicon.png                                         | Bin 935 -> 729 bytes
 dist/img/logo-img.png                                                 | Bin 21100 -> 1022 bytes
 dist/img/minus.png                                                    | Bin 610 -> 143 bytes
 dist/img/plus.png                                                     | Bin 858 -> 241 bytes
 dist/img/search.png                                                   | Bin 3196 -> 316 bytes
 dist/img/social-icons/png/facebook25.png                              | Bin 2512 -> 575 bytes
 dist/img/social-icons/png/rss25.png                                   | Bin 2854 -> 1267 bytes
 dist/img/social-icons/png/twitter16.png                               | Bin 2684 -> 1036 bytes
 dist/img/social-icons/png/youtube15.png                               | Bin 3387 -> 1630 bytes
 docs/assets/img/alerts/error.png                                      | Bin 19875 -> 4154 bytes
 docs/assets/img/alerts/info.png                                       | Bin 19481 -> 3623 bytes
 docs/assets/img/alerts/success.png                                    | Bin 19928 -> 4071 bytes
 docs/assets/img/alerts/warning.png                                    | Bin 18534 -> 3159 bytes
 docs/assets/img/arrow-down.png                                        | Bin 978 -> 296 bytes
 docs/assets/img/arrow-right.png                                       | Bin 837 -> 266 bytes
 docs/assets/img/correct8.png                                          | Bin 2989 -> 195 bytes
 docs/assets/img/correct9.png                                          | Bin 1026 -> 447 bytes
 docs/assets/img/default_example_emanifest.png                         | Bin 9471 -> 6754 bytes
 docs/assets/img/epa-emanifest-screenshot.png                          | Bin 123725 -> 50432 bytes
 docs/assets/img/favicons/favicon-114.png                              | Bin 902 -> 588 bytes
 docs/assets/img/favicons/favicon-144.png                              | Bin 885 -> 696 bytes
 docs/assets/img/favicons/favicon-16.png                               | Bin 290 -> 215 bytes
 docs/assets/img/favicons/favicon-192.png                              | Bin 972 -> 740 bytes
 docs/assets/img/favicons/favicon-57.png                               | Bin 649 -> 526 bytes
 docs/assets/img/favicons/favicon-72.png                               | Bin 574 -> 401 bytes
 docs/assets/img/favicons/favicon.png                                  | Bin 935 -> 729 bytes
 docs/assets/img/home/example_VAappeals_full_mock.png                  | Bin 80379 -> 33590 bytes
 docs/assets/img/home/example_VAappeals_mock.png                       | Bin 136118 -> 115564 bytes
 docs/assets/img/home/homepage_illustrations_508_box_2x.png            | Bin 4934 -> 4447 bytes
 docs/assets/img/home/homepage_illustrations_best_easiest_2x.png       | Bin 3099 -> 2833 bytes
 docs/assets/img/home/homepage_illustrations_designer_2x.png           | Bin 2760 -> 2432 bytes
 docs/assets/img/home/homepage_illustrations_developer_2x.png          | Bin 1499 -> 1321 bytes
 docs/assets/img/home/homepage_illustrations_flag_cropped_2x.png       | Bin 3048 -> 2795 bytes
 docs/assets/img/home/homepage_illustrations_flexible_2x.png           | Bin 4527 -> 4258 bytes
 docs/assets/img/home/homepage_illustrations_reuse_2x.png              | Bin 3364 -> 3006 bytes
 docs/assets/img/home/homepage_illustrations_ui_components_2x.png      | Bin 2533 -> 2252 bytes
 docs/assets/img/home/homepage_illustrations_visual_style_guide_2x.png | Bin 3105 -> 2741 bytes
 docs/assets/img/logo-img.png                                          | Bin 21100 -> 1022 bytes
 docs/assets/img/merriweatheronly_example_playbook.png                 | Bin 35301 -> 26418 bytes
 docs/assets/img/minus.png                                             | Bin 610 -> 143 bytes
 docs/assets/img/plus.png                                              | Bin 858 -> 241 bytes
 docs/assets/img/robust_example_standardshome.png                      | Bin 40315 -> 29804 bytes
 docs/assets/img/search.png                                            | Bin 3196 -> 316 bytes
 docs/assets/img/social-icons/png/facebook25.png                       | Bin 2512 -> 575 bytes
 docs/assets/img/social-icons/png/rss25.png                            | Bin 2854 -> 1267 bytes
 docs/assets/img/social-icons/png/twitter16.png                        | Bin 2684 -> 1036 bytes
 docs/assets/img/social-icons/png/youtube15.png                        | Bin 3387 -> 1630 bytes
 docs/assets/img/ssponly_example_va.png                                | Bin 23867 -> 20786 bytes
 docs/assets/img/static/Alerts_UI_v1.png                               | Bin 45825 -> 18917 bytes
 docs/assets/img/static/Buttons_UI_v1.png                              | Bin 62684 -> 24948 bytes
 docs/assets/img/static/Checkboxes_UI_v1.png                           | Bin 13967 -> 5425 bytes
 docs/assets/img/static/Colors_UI_v1.png                               | Bin 31248 -> 13402 bytes
 docs/assets/img/static/Contact-Form_UI_v1.png                         | Bin 40549 -> 16405 bytes
 docs/assets/img/static/Date_Picker_UI_v1.png                          | Bin 11662 -> 5031 bytes
 docs/assets/img/static/Dropdown_UI_v1.png                             | Bin 6667 -> 2899 bytes
 docs/assets/img/static/Footer_FullUI_v1-930width.png                  | Bin 251772 -> 182005 bytes
 docs/assets/img/static/Grid_Examples_UI_v1.png                        | Bin 185725 -> 77992 bytes
 docs/assets/img/static/Grid_UI_v1.png                                 | Bin 26243 -> 11830 bytes
 docs/assets/img/static/HeaderNav_FullUI_v1-930width.png               | Bin 201119 -> 144833 bytes
 docs/assets/img/static/Headers_Navigation_UI_v2.png                   | Bin 351100 -> 252519 bytes
 docs/assets/img/static/Icons_v1.png                                   | Bin 882176 -> 226069 bytes
 docs/assets/img/static/Labels_UI_v1.png                               | Bin 40488 -> 15500 bytes
 docs/assets/img/static/Layouts_UI_v1.png                              | Bin 91145 -> 47515 bytes
 docs/assets/img/static/Login_UI_v1.png                                | Bin 55753 -> 21093 bytes
 docs/assets/img/static/NameBlock_UI_v1.png                            | Bin 27125 -> 10808 bytes
 docs/assets/img/static/PasswordReset_UI_v1.png                        | Bin 45135 -> 17489 bytes
 docs/assets/img/static/Radio_Buttons_UI_v1.png                        | Bin 11722 -> 4522 bytes
 docs/assets/img/static/Range_Slider_UI_v1.png                         | Bin 6085 -> 2464 bytes
 docs/assets/img/static/SSN_UI_v1.png                                  | Bin 8723 -> 3301 bytes
 docs/assets/img/static/Search_Bar_UI_v1.png                           | Bin 16128 -> 6105 bytes
 docs/assets/img/static/Search_Results_UI_v1.png                       | Bin 380330 -> 164956 bytes
 docs/assets/img/static/Tables_UI_v1.png                               | Bin 105447 -> 49433 bytes
 docs/assets/img/static/Text_Input_UI_v1.png                           | Bin 20941 -> 8177 bytes
 docs/assets/img/static/Typography_UI_v1.png                           | Bin 444764 -> 407638 bytes
 docs/assets/img/static/USAddressForm_UI_v1.png                        | Bin 27796 -> 10476 bytes
 docs/assets/img/typography_example_apple_pie.png                      | Bin 357988 -> 340873 bytes
 docs/assets/img/va-appeals-screenshot.png                             | Bin 98052 -> 33455 bytes
 src/img/alerts/error.png                                              | Bin 19875 -> 4154 bytes
 src/img/alerts/info.png                                               | Bin 19481 -> 3622 bytes
 src/img/alerts/success.png                                            | Bin 19928 -> 4098 bytes
 src/img/alerts/warning.png                                            | Bin 18534 -> 3159 bytes
 src/img/arrow-down.png                                                | Bin 978 -> 296 bytes
 src/img/arrow-right.png                                               | Bin 837 -> 265 bytes
 src/img/correct8.png                                                  | Bin 2989 -> 195 bytes
 src/img/correct9.png                                                  | Bin 1026 -> 446 bytes
 src/img/favicons/favicon-114.png                                      | Bin 902 -> 606 bytes
 src/img/favicons/favicon-144.png                                      | Bin 885 -> 698 bytes
 src/img/favicons/favicon-16.png                                       | Bin 290 -> 215 bytes
 src/img/favicons/favicon-192.png                                      | Bin 972 -> 775 bytes
 src/img/favicons/favicon-57.png                                       | Bin 649 -> 526 bytes
 src/img/favicons/favicon-72.png                                       | Bin 574 -> 400 bytes
 src/img/favicons/favicon.png                                          | Bin 935 -> 729 bytes
 src/img/logo-img.png                                                  | Bin 21100 -> 1022 bytes
 src/img/minus.png                                                     | Bin 610 -> 142 bytes
 src/img/plus.png                                                      | Bin 858 -> 241 bytes
 src/img/search.png                                                    | Bin 3196 -> 316 bytes
 src/img/social-icons/png/facebook25.png                               | Bin 2512 -> 574 bytes
 src/img/social-icons/png/rss25.png                                    | Bin 2854 -> 1263 bytes
 src/img/social-icons/png/twitter16.png                                | Bin 2684 -> 1036 bytes
 src/img/social-icons/png/youtube15.png                                | Bin 3387 -> 1669 bytes

@maya

maya commented Apr 11, 2016

Copy link
Copy Markdown
Contributor

Thanks @PeterDaveHello for submitting this PR! Saving space is really important for performance, and images are usually one of the biggest culprits.

Our team will take a look at this in the next few days and get back to you.

@PeterDaveHello

PeterDaveHello commented Apr 12, 2016

Copy link
Copy Markdown
Contributor Author

No problem @maya

@Haroenv

Haroenv commented Apr 12, 2016

Copy link
Copy Markdown

wouldn't it be better to use something like gulp-imageoptim instead?

@PeterDaveHello

PeterDaveHello commented Apr 12, 2016

Copy link
Copy Markdown
Contributor Author

@Haroenv try to optimize in every build may waste time, by lossless compression, the optimized images can't be smaller by the same compression, if the origin build process won't touch the images, just copy dist from src, then pre-compression can provide better efficiency, can currently, zopflipng may be the optimizer which has the most highest compression ratio, which spends a long time to compress a png image, so I assume the optimized result of gulp-imageoptim will be larger than the result in this PR.

@jhfrench

jhfrench commented Apr 15, 2016

Copy link
Copy Markdown

I take @Haroenv 's suggestion to mean "wouldn't it be better to incorporate gulp-imageoptim (or similar) into the build process so that any future image adds or edits will automatically be optimized?"

@msecret

msecret commented Apr 15, 2016

Copy link
Copy Markdown
Contributor

Thanks @PeterDaveHello for this PR. I'd also agree with @Haroenv and @jhfrench that it would be very helpful for us if the process you took to optimize these images would repeatable in our nodejs build process. This would mean we could keep this work consistent when we add new images.

jpegoptim seems to have an npm package, although it seems to depend on libraries like libjpg and I wonder how often that's available on different OSes. I also found https://github.com/imaya/zopfli.js. @PeterDaveHello, what do you think about adding this to the build process?

@PeterDaveHello

PeterDaveHello commented Apr 15, 2016

Copy link
Copy Markdown
Contributor Author

The problem of zopfli is that it needs a very long time to compress a image, I'm not sure if you would like to wait for hours in each build just because of the image optimization, if the images are not changed so often, there is no need to do that.

@maya

maya commented Apr 19, 2016 •
edited
Loading

Copy link
Copy Markdown
Contributor

I agree that since we will not be changing or adding images in the near future, doing it once should be fine.

Question: Is there a way to have something automated only run on newly added images?

@jhfrench

jhfrench commented Apr 19, 2016 •
edited
Loading

Copy link
Copy Markdown

@maya There is a way to automate zopfli to only run on newly added (or changed) images.

~~Sorry to beat the Gulp drum...it's just the only tool I know. I'd bet that anything that can be done with Gulp can also probably be done with other build tools.~~Ummm...just kidding (now that I've read the CONTRIBUTING.md and see the project uses Gulp). 😁

@maya maya mentioned this pull request Apr 25, 2016
Closed
@msecret msecret merged commit 0617cad into uswds:18f-pages-staging May 10, 2016
@PeterDaveHello PeterDaveHello deleted the img-optimize branch May 11, 2016 04:45
@PeterDaveHello

PeterDaveHello commented May 17, 2016

Copy link
Copy Markdown
Contributor Author

hmmm ... seems this was overwritten by d4c3445 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@PeterDaveHello @maya @Haroenv @jhfrench @msecret @juliasolorzano