The main complaint I often read about Geutzli, Google’s new JPEG encoder is that it takes a long time to work.

If you are compressing images based on how fast it’s for you, then I honestly don’t think it’s a fair criticism. The way Geutzli works is a very different kind of compression than other methods we employ so, yes, it does take a while to work.

Recently, I had the need to compress a sizable number of JPEGs. Keeping image integrity high, the JPEGs were saved without much compression. So, it was not a shock that the result of the image file sizes from a Photoshop exports combined with an ImageOptim pass didn’t result in large file sizings.

Setting up an automated process for Geutzli, I got up and walked away for a lunch break. When I came back the images were all processed.

Selecting the JPEGs and then pressing Control + Command + I on Mac OS, I’m able to get combined file size of the images and get a comparison of the file savings.

It turns out, by leveraging my time, I was able to get them to 60% of their original file sizes. Then I ran the images again through ImageOptim and was able to shave off another additional 1-2% file savings.

While we might not be able to point Geutzli put into a Grunt task and expect it to wrap up in a few seconds, that doesn’t mean you can’t toss a large number of images to be converted during an extended break or overnight or even over a weekend. When you come back, your users could be enjoying a substantial increase in web performance without a perceptual loss in image quality.

That can never be a problem.

Google’s new Guetzli JPEG encoder does an excellent job of reducing file sizes while maintaining high quality in image integrity. Due it’s nature of compressing, though, it’s a computation process is very slow and batch processing of JPEGs isn’t available yet.

The good news is that the Image compression tinkerer Kornel Lesiński, who works on ImageOptim, says Guetzli is going to in the next version.

Automating Guetzli

The better news is that until that happens, B. Scott following up on a blog post on Medium told me he coded a Mac OS Automator service that can do that now!

Downloading the files from the GitHub project repository and installing the service worker is pretty much straightforward.

Download the files from the repo. Then double-click on the .workflow file, which should cause the Automator file should appear.

From that point on, right-click on the images you want to optimize and select Services > GZLI_Default.

Then, if you installed Guetzli with Homebrew, the image should start the long process of optimizing, one-by-one.

The new files have OPT appended to the filename, which should be easy to change to your personal taste in the Automator.

Last week, Google released to open source JPEG encoder that can create images file sizes 35% smaller than currently available methods. Called Guetzli, which means cookie in Swiss German, it seems new possibilities for the format that’s been around since the late 1980s!

Using a different method than other optimizers, Guetzli doesn’t have a set of rules or laws in a race to the lowest file size when encoding images.

Instead, Guetzli relies on a tool that measures differences between images the way the human eye detects differences called butteraugli.

The results on images appear that Guetzli walks a fine line by not applying general compression metric that some artifacts as other methods by focusing on areas of barely noticeable perceptual differences between images.

Guetzli on Images

I ran the CSS Dev Conf speaker photo images to test out the compression and found that I saved almost 200kb.

This amount of file savings did not apply to all my images, but enough for me to go through all my JPEGs on the site!

I even processed a line art image to see how Guetzli would handle the compression and it saved almost 70kb, with barely any noticeable changes.

I wanted to see, if anything, Google’s encoder did anything to that image, I threw both images into the Kaleidoscope app and put them under the Difference view.

Amazing how much work Guetzli did to the image while my eye barely noticed any differences. In fact, I thought the subtle changes enhanced the image!

Future of Guetzli

At the time of my writing, I could not do batch processing, and I did not even try to hook it up to an automated build process since it was a slow optimization process for Guetzli to do its thing.

Only announced last week, I think it’s safe to say this is only the start of Guetzli. I bet the speed will increase, and Guetzli is going to be part of the build processes sooner than later.

Working on a new site means I need to include a favicon. The magical favicon is a design treatment that is made up of a small image or icon that can represent a website or web page. 

Where Favicons are Found

Favicons are commonly displayed in the browser’s address bar next to the web URL, but can be found in other other areas:

• Address bar
• Links bar
• Bookmarks/Favorites
• Tabs
• “Dragged to Desktop”

Since they are found in and around the browser as well as sometimes on a desktop when a bookmark is dragged to a PC’s desktop, having a favicon is an important site asset. 

Image Formats for Favicon

Internet Explorer 5 first started using favicons and only through the ICO image file format. 

Other browsers have since widely adopted the favicon and support more file formats. Most browsers support GIF, JPEG, and PNG. 

SVG images are also supported–but only in Firefox and Safari at the time of this writing.

The ICO format is the original responsive image format as it can contain multiple images at different sizes like an image storage locker. 

For example, a browser will use the 16×16 pixel ICO image. However, if a browser is on a computer with a retina screen, it might pick out the 32×32 pixel image instead leaving the smaller image behind.

Since all browsers support ICO file format, going with this “responsive” ICO image format makes the most sense to me. 

Creating a Favicon

For Macs, there is a great application called Icon Slate that makes creating an ICO file easy.¹

Using my logo as the image source, I exported different sizes and placed them in their respective slots:

Once the images are lined up in their respective sections, I start the build process by selecting File > Build which produces a hot ‘n’ fresh ICO file.

Inserting a Favicon into a Web Site

Making sure to rename the file to favicon.ico, place the ICO file in the root or main directory of your site:

By placing the file in the root directory and giving the file this specific name, the browser picks up the favicon file automatically. No fuss, no muss. 

This way updating the favicon then becomes easy: in the future, create a new image, rename it favicon.ico, and replace the file on the server. 

What If I Don’t Have Access to My Root Directory?

If there is a reason I could not drop the ICO file in the root directory, I could then tell the browser that a favicon would be found elsewhere through a bit of HTML in the document header: 

<link rel="shortcut icon" href="http://example.com/folder1/folder2/myicon.ico" /> 

This link approach is practical if you cannot access the root of a web site for one reason or another and still want to deliver favicon. 

Conclusion

Adding a bit of flair of your personal brand is pretty straightforward. Give it a shot, if you haven’t already!

UPDATED: To include Can I Use charts for PNG and SVG support.

---

1. Use can use the versatile Icon Slate creating icons for pretty much any situation you might need an icon: Apple Watch, folder icons, Android, and much more learn the facts here now. ↩