Minimize image assets

[devinreams]

trafficstars

Minification is happening when NODE_SUGGESTED_ENV=production thanks to webpack. This minfies our JS pretty handily but nothing is handling images (just tested .

As mentioned, we should consider compressing images (SVG) where possible.

[jimporter]

We should get this for free with https://github.com/tcoopman/image-webpack-loader, which I think would be a better way to do image loading than what we have now.

[pdehaan]

For my own future reference, here's a list/grep of image files in the repo:

$ git ls-files | egrep "\.(gif|jpe?g|png|svg)"

src/icon.png
src/webextension/icons/lb_locked.svg
src/webextension/icons/lb_unlocked.svg
src/webextension/images/lockie_v2.svg

[jimporter]

Let's start doing this (manually as we add SVG files). @pdehaan @devinreams, do either of you have opinions on what config we should use for svgo? I was leaning towards

svgo FILE --pretty --indent=2 --disable=removeXMLProcInst

That gives us pretty-substantial savings, and the source still looks nice, which is occasionally helpful when there are weird SVG rendering issues (I've had to look at SVG source when trying to diagnose anti-aliasing issues before).

[devinreams]

From @changecourse in Slack: "it's worth mentioning that we've implemented SVGO via sketch for all future svg export as part of our process" ... so I don't think this is urgent.

do either of you have opinions on what config we should use for svgo

Nope. And yours looks like a sane starting point. 👍

I did a quick read of the docs and searched the rest of the mozilla GitHub org to see what others are doing. Nothing jumped out...

[changecourse]

Included below are the default settings we're using for SVGO, via the .json in our plugin... please let me know if you'd like anything to be handled differently...

I'll need to take stock/audit of the current icons and re-export accordingly.

{ "comment": "This is the settings file for the SVGO Compressor Plugin. For more info, please check https://github.com/BohemianCoding/svgo-compressor", "pretty": true, "indent": 2, "plugins": [ { "name": "cleanupIDs" }, { "name": "cleanupListOfValues" }, { "name": "cleanupNumericValues" }, { "name": "collapseGroups" }, { "name": "convertColors" }, { "name": "convertStyleToAttrs" }, { "name": "convertTransform" }, { "name": "mergePaths" }, { "name": "minifyStyles" }, { "name": "removeComments" }, { "name": "removeDesc", "params": { "removeAny": true } }, { "name": "removeDoctype" }, { "name": "removeEditorsNSData" }, { "name": "removeEmptyAttrs" }, { "name": "removeEmptyContainers" }, { "name": "removeEmptyText" }, { "name": "removeMetadata" }, { "name": "removeNonInheritableGroupAttrs" }, { "name": "removeTitle" }, { "name": "removeUnknownsAndDefaults" }, { "name": "removeUnusedNS" }, { "name": "removeUselessDefs" }, { "name": "removeUselessStrokeAndFill" }, { "name": "removeXMLProcInst" }, { "name": "sortAttrs" } ] }

[changecourse]

Audit of current svg icons in app:

Already Optimized (SVGO) -account.svg -arrowhead-left-16.svg -arrowhead-right-16.svg -external-link.svg -options.svg -sign-out.svg

Needs to be Optimized -nessie_v2.svg

No longer Needed ~~-arrowhead-down-16~~

[pdehaan]

I've just always minimized using SVGO's default settings (which is truly minimized and not entirely readable). :+1: to either solution above (svgo FILE --pretty --indent=2 --disable=removeXMLProcInst) or the more verbose JSON config in https://github.com/mozilla-lockbox/lockbox-extension/issues/301#issuecomment-369062735) and we can re-review later in the future based on how big the assets are.

In the future, we could also rerun SVGO during some publish/deploy step where we try and shave every possible KB from the source and don't care about readability. But it may also not be worth the effort of wiring it up to Webpack or whatever if we're only saving 2-3KB over our current --pretty config. ¯\_(ツ)_/¯

---

Current:

$ git ls-files | grep "\.svg$"

src/webextension/icons/account.svg
src/webextension/icons/arrowhead-down-16.svg
src/webextension/icons/arrowhead-left-16.svg
src/webextension/icons/arrowhead-right-16.svg
src/webextension/icons/default-avatar.svg
src/webextension/icons/external-link.svg
src/webextension/icons/lb_locked.svg
src/webextension/icons/lb_unlocked.svg
src/webextension/icons/options.svg
src/webextension/icons/signout.svg
src/webextension/images/nessie_v2.svg

$ ls -lash src/webextension/{icons,images}/*.svg
   461B  src/webextension/icons/account.svg
   594B  src/webextension/icons/arrowhead-down-16.svg
   436B  src/webextension/icons/arrowhead-left-16.svg
   455B  src/webextension/icons/arrowhead-right-16.svg
   1.3K  src/webextension/icons/default-avatar.svg
   1.3K  src/webextension/icons/external-link.svg
   534B  src/webextension/icons/lb_locked.svg
   467B  src/webextension/icons/lb_unlocked.svg
   2.1K  src/webextension/icons/options.svg
   778B  src/webextension/icons/signout.svg
    32K  src/webextension/images/nessie_v2.svg

Pretty:

$ $(npm bin)/svgo -f src/webextension/icons/ --pretty --indent=2 --disable=removeXMLProcInst
$ $(npm bin)/svgo -f src/webextension/images/ --pretty --indent=2 --disable=removeXMLProcInst

$ ls -lash src/webextension/{icons,images}/*.svg
334B   src/webextension/icons/account.svg
336B   src/webextension/icons/arrowhead-down-16.svg
218B   src/webextension/icons/arrowhead-left-16.svg
237B   src/webextension/icons/arrowhead-right-16.svg
1.3K   src/webextension/icons/default-avatar.svg
424B   src/webextension/icons/external-link.svg
565B   src/webextension/icons/lb_locked.svg
450B   src/webextension/icons/lb_unlocked.svg
679B   src/webextension/icons/options.svg
414B   src/webextension/icons/signout.svg
 23K   src/webextension/images/nessie_v2.svg

Minimized:

$ $(npm bin)/svgo -f src/webextension/icons/
$ $(npm bin)/svgo -f src/webextension/images/

$ ls -lash src/webextension/{icons,images}/*.svg
   329B   src/webextension/icons/account.svg
   331B   src/webextension/icons/arrowhead-down-16.svg
   213B   src/webextension/icons/arrowhead-left-16.svg
   232B   src/webextension/icons/arrowhead-right-16.svg
   1.3K   src/webextension/icons/default-avatar.svg
   416B   src/webextension/icons/external-link.svg
   523B   src/webextension/icons/lb_locked.svg
   434B   src/webextension/icons/lb_unlocked.svg
   674B   src/webextension/icons/options.svg
   409B   src/webextension/icons/signout.svg
    23K   src/webextension/images/nessie_v2.svg

Actually, the difference between a minimized nessie_v2.svg (22.914KiB) versus a pretty+indented nessie_v2.svg (23.296KiB) is only 1.7%, so probably not even worth the effort of über optimizing.