Being a front-end developer, one of big things I tend to always worry about is performance. Of course, this worry came with not only time and learning, but also with the introduction of mobile devices that rely on non-broadband networks to get content. This is why when I developed my new blog, I wanted to make sure, as I ported over my old portfolio pieces, that I took into account the images I was serving to my audience.
When I initially created my old portfolio site, I exported everything out of PhotoShop as a jpg or png file — sometimes gif files where it made sense. The only adherence to file size I made at that time was upping the compression a tad to help with some of the larger images to be displayed. This tended to leave these images at around 150-200k in size because they were typically screenshots of the sites I created. This time I know I did not want to leave the images like this, luckily, Google had just released their image compression tool called Guetzli.
Compression with amazing results
The thing that Guetzli touts is that it produces file sizes that are easily 20-30% smaller file size than that of libjpeg with no loss of quality. I have to say this is pretty on par with what I found.
Installing it is a breeze if on a Mac via homebrew: brew install guetzli. After installation, it’s pretty easy to run the command on a single file guetzli [--quality Q] [--verbose] original.png output.jpg.
The single file command works great if you are starting out with a couple of files here and there, but I needed to run it on a slew of files found in different directories. So I ended up running this command from the root of my project to grab and process all the images in my portfolio.
1 | find . -name '*.png' -print0 | xargs -0 -I{} -P1 guetzli --verbose --quality 85 {} {}` |
The only thing, which is mentioned in the README of the repository, is that it does take some processing power to accomplish what it does and may also take a while for large batches. When I ran it against roughly thirty files on a MacBook, it took about five minutes which is not too bad. After it was complete, it produces a nice output on the savings of the files and in each case, I was able to save around 50% of the file size.