Skip to content

Latest commit

 

History

History
50 lines (32 loc) · 2.1 KB

README.md

File metadata and controls

50 lines (32 loc) · 2.1 KB

Image Optimization

The purpose of this repository is to demontrate various techniques, how to optimize images for web.

More information could be found in my presentation

Compared image processors

I used default settings, to demonstrate that actually developers shouldn't rely on them and setup them by their needs.

Tested files

You can find tested non-optimized files in ./src/assets/

Output folder

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 -h

But 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 :)

What I learned after comparsion

  • Set of correct imagemin plugins is a key to the success
  • webp is the best format
  • for some reason image-webpack-loader has a better output, than imagemin with 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.js as expected

Recommended reading