The purpose of this repository is to demontrate various techniques, how to optimize images for web.
More information could be found in my presentation
I used default settings, to demonstrate that actually developers shouldn't rely on them and setup them by their needs.
You can find tested non-optimized files in ./src/assets/
In ./output folder you can find optimized images.
Note that just imagemin and webpack output's are generated. Rest is done manually.
To compare the size you can run:
cd output
du -sh * | sort -hBut note, that there some folders don't have equal amount of files (kraken.io and tinypng.com have file size limits, svgomg is meant to be just for svgs).
Therefore I created a Google Sheet table, where you can compare the ouput much easier :)
- Set of correct imagemin plugins is a key to the success
- webp is the best format
- for some reason
image-webpack-loaderhas a better output, thanimageminwith the same config. Even though image-webpack-loader is using imagemin under the hood. - imagemin run trough lint-staged has the same output as
node ./imagemin.jsas expected