Image optimization

[davidragsdale]

Using Webpack. Images can be added as an entry point then emit those as files separate from the JS bundle.

[davidragsdale]

Here is a process flow from ImageOptim. I'll try to post specific settings as I identify them.

• .jpg
  • If Guetzli is enabled
    1. Guetzli (imagemin-guetzli ?)
  • If Guetzli disabled (default)
    1. Jpegoptim (imagemin-jpegoptim)
       • stripAll: true
       • progressive: false
    2. JpegTran (imagemin-jpegtran)
       • progressive: false
       • arithmetic: false
• .gif
  1. Gifsicle (imagemin-gifsicle)
     • interlaced: false
     • optimizationLevel: 3
• .svg
  1. Svgo (imagemin-svgo)
     • all defaults
  2. svgcleaner
• .png -
  1. ~PngQuant (if desired quality < 100 and > 30) (imagemin-pngquant)~
  2. ~PngCrush (imagemin-pngcrush ?)~
  3. OptiPng (imagemin-optipng)
     • optimizationLevel: 4
  4. Pngout (unless Zopfli desired) (imagemin-pngout)
     • strategy: 0
  5. AdvComp (imagemin-advpng)
     • optimizationLevel: 4
  6. Zopfli (imagemin-zopfli)
     • iterations: 15
     • iterationsLarge: 10
     • transparent: true

Reference: ImageOptim/Backend/Job.m/doEnqueueWorkersInCPUQueue ImageOptim/Resources/defaults.plist http://www.advancemame.it/doc-advpng

[InsideDown]

I have an image minimizer in place I can add as a PR branched from 'release/phase-1'. It just uses 'image-webpack-loader' defaults; seems mostly fine that way.

Since we don't really have an entry point set up in the current setup, not sure the best way this should be organized. I can put a placeholder .js entry point in, but the setup is going to determine how these need to be configured. Thoughts, @davidragsdale?

[davidragsdale]

A .js entry point is fine for now. There's several different ways I know this can be handled and I don't entirely like any of them. An explicit entry point for them is as good as any right now.

[InsideDown]

I've added an image minification branch here: https://github.com/quicksolutions/starter-kit/blob/phase-1/imagemin

@davidragsdale - I'm not sure what branch to be branching from, so currently I did it off of 'release/phase-1'. I can merge these changes into whatever branch they need to be. A few comments:

• changes mainly in newly created webpack.prod.js. (https://github.com/quicksolutions/starter-kit/blob/phase-1/imagemin/webpack.prod.js). I'm sure this structure (and how it is called from package.json) will need to change once we figure out how the pieces all fit together
• As mentioned, we have no entry point in the current files, so I just threw in a placeholder .js entry point
• Tested with SCSS as an entry point as well - works fine that way as well but did not commit those changes to this branch as it would require adding in a number of style loaders (not sure how we're trying to contain features/feature branches/what future plans are). I'm a bit unclear what is going where at this point, feature-branch-wise.
• Webp minification seems to be an interesting issue - it works but causes some oddities for the files in finder
• 'libpng' is called out as a potential issue here: https://github.com/tcoopman/image-webpack-loader. I did not experience that issue, though we could add in a 'brew install libpng' as a postinstall script if we wanted to (Which would, of course, require Homebrew...etc etc...trying to head off potential issues users might have)

[davidragsdale]

Completed in #26