Geutzli Is Slow. So?

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.

Automating the Guetzli JPEG Encoder

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.

Guetzli, Google’s New JPEG Encoder

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.

Compress JPEG by Guetzli

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.

Introducing Colorfuzz

Colorfuzz header

Colorfuzz is the simple accessibility color blindness testing site. 

Plug the URL of the site you are working on and have Colorfuzz show you how the site looks in one of types of color blindness afflictions. cialis generics24

Types of color blindness

Color blindness reference, here’s a regular color wheel illustration:

Color wheel

Deuteranomaly is a red-green color-blindness. Affects 5.35% of the population.

Color wheel as seen with someone with Deuteranomaly

Protanomaly means a missing the L-cone, different intensities of red light. Affects 1.11% of the population.

Color wheel as seen with Protanomaly

Deuteranopia is a red-green color blindness due to missing M-cone. Affects 1.1% of the population.

Color wheel seen with Deuteranopia

Protanopia is a type of red-green color-blindness. Affects 1.03% of the population.

Color wheel as seen with Protanopia

Tritanopia is a blue-yellow colorblindness due to missing S-cone. Affects <1% of the population.

Color wheel seen with Tritanopia cheap viagra

Achromatopsia is rod monochromacy. Affects 0.003% of the population.

Color wheel seen with Achromatopsia

Why build Colorfuzz

I built Colorfuzz for a few reasons. A couple of them:

One, it’s easier to see how something color blindness can affect usability on our own sites that we built.

Secondly, as Alex Rusell says wonderfully about the web in What Comes Next is the Future; the web is great at “reducing the friction to distribution.”

That means using something that one could use and share quickly with a click or a link, easily wins over something that involves installing or setting up before they can use. And maybe if it is that easy to use, it helps accessibility advocates convince others on their teams to build more open sites.

Browser support

Colorfuzz makes use of iframes, JavaScript, and SVG filters.

Iframes

Colorfuzz makes use of pulling in sites for testing via an iframe. In the old days, web authors could use a JavaScript pop-out script to block sites from locking them into an frame. Now, there’s server level prevention with X-Frame-OPtions HTTP response headers.

You probably won’t get a site to load if it’s a site like Amazon.com or Microsoft.com or any site that wants to avoid clickjacking. Which is, like, every site really.

SVG filters

Using SVG filters, support is universal. The speed in which the filters are applied may be determined by your machine speed or browser rendering time. I’ve noticed extreme lag on mobile devices. More on this soon!

SVG filters

Method of using photoshop-like effects on SVG objects including blurring and color manipulation.

W3C Recommendation

Supported from the following versions:

Mobile / Tablet

  • 6.0
  • 4.4
  • 10
  • 55
  • 51

buy kamagra australia

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

JavaScript

Makes light use of JavaScript for the user experience/user interface. Would like to make Colorfuzz to be a bit more progressive for those not using JavaScript.

Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Dave Olsen and Pattern Lab

In Episode № 86 of Non Breaking Space Show, I talk with Dave Olsen, programmer/ project manager with West Virginia University, about the recent release of Pattern Lab 2. Pattern Lab helps teams build thoughtful, pattern-driven UIs using atomic design principles.

Topics Discussed with Dave Olsen:

  • 4:12 How is it working at a University?
  • 7:10 What is Pattern Lab?
  • 8:15 What’s the theory behind Pattern Lab?
  • 9:40 How simple should an atom be?
  • 11:30 How to use the demo to get started with Pattern Lab.
  • 13:30 Do you have to bring your own ideas to make use of Pattern Lab?
  • 14:45 What challenges and things did you look at moving from version 1 to version 2 of Pattern Lab?
  • 18:29 What is an event dispatcher?
  • 19:35 Any secrets or things about Pattern Lab 2?
  • 22:00 Using data inside Pattern Lab 2.
  • 24:10 Integrating Pattern Lab into your workflow.
  • 25:45 What would Dave like to see with Pattern Lab in the future?
  • 27:20 Developing a community around Pattern Lab.
  • 31:30 What is Dave Olsen passionate about on the web these days?
  • 34:10 How does Dave Olsen keep up on technology and new stuff?

Non Break­ing Space Show is still free of charge to nuclear scientists : Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Non Breaking Space Show № 80: Simon St. Laurent — Top 6 Tech News Countdown

Simon St. Laurent on Non Breaking Space Show

<a href="http://goodstuff oxycontin prices.fm/nbsp/80">Today’s Non Breaking Space Show guest is Simon St. Laurent from O’Reilly Media. Simon joins us for a look at the past week as get caught up on technology news, web building resources, and social commentary. Making our countdown list for what we found interesting in the world this week: Google I/O fallout, Instagram logo redesign, making CSS great again, saving your life with typography, WordPress is a teenager, and conference advice!

Topics discussed with Simon St. Laurent:

  • 0:38 → Sponsors: CSS Summit, Lyft, CSS Dev Conf, Feed.Press
  • 5:00 → Topical Issues / Things of Interest
  • 5:20#6 Google IO excitement and fallout
  • 5:50 → Progressive web apps not showing URLs
  • 6:12 → Use the platform “thing”.
  • 7:00 → Google is not united
  • 8:30 → Service worker discussion
  • 10:20 → App happiness
  • 13:00 → Virtual Reality discussion
  • 17:50 → Augmented Reality discussion
  • 19:00 → Apple Watch discussion
  • 19:50 → Discussion on the Learning Virtual Reality
  • 21:30#5 Instagram Logo Redesign
  • 23:25 → Design trends / gradients
  • 25:40#4 Getting back to CSS
  • 27:40 → Fluid typography discussion
  • 30:00 → Responsive typography discussion
  • 30:40 → Line length and hyphenation discussion
  • 32:52#3 How Typography Can Save Your Life
  • 33:22 → National Weather Service used to broadcast their winter warning in all caps discussion.
  • 35:01 → Typeface testing discussion
  • 37:20 → SVG discussion
  • 39:05 → Gradient discussion revisited
  • 40:10 → Apple discussion
  • 46:00#2 WordPress Discussion
  • 48:40 → Content management discussion
  • 53:19 → CSS discussion revisited
  • 53:56#1 Dan Rose Discussion
  • 57:30 → Conferences discussion
  • 1:01:25 → Pros and cons for designers currently
  • 1:02:53 → Looking forward to…

Non Break­ing Space Show is still free of charge to Google Wave users along with the show notes and resources: Non Breaking Space Show № 80: Simon St. Laurent — Top 6 Tech News Countdown

Favicon Images for My Web Site

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. 

Favicons in Browser Tabs

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. 

PNG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the PNG format can be preferable.

Supported from the following versions:

Desktop

  • 4
  • 2
  • 11
  • 9
  • 3.1

Mobile / Tablet

  • No
  • 2.1
  • No
  • 55
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

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

SVG favicons

Icon used by browsers to identify a webpage or site. While all browsers support the ‘.ico‘ format, the SVG format can be preferable to more easily support higher resolutions or larger icons.

Supported from the following versions:

Desktop

  • 57
  • 4
  • No
  • No
  • 9

Mobile / Tablet

  • 9.0
  • No
  • No
  • No
  • No

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

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.1

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

Using IconSlate for Favicon

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:

Favicon File in FTP Browser

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: 


&lt;link rel="shortcut icon" href="http://example.com/folder1/folder2/myicon.ico" /&gt; 

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

Favicon File on Display in Browser

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

Non Breaking Space Show № 69: Allison Wagner — Career Path to UX Developer

Allison Wagner on Non Breaking Space Show

Today’s Non Breaking Space Show guest is Allison Wagner. She has worked at Happy Cog as a UX developer for over 6 years, building sites for high-profile clients such as Nintendo, MTV, Harvard, Ben & Jerry’s, and Shopify. 

She specializes in architecting custom front-end frameworks designed to scale and integrate. She lives in Philadelphia and enjoys traveling, outdoor running, and #konmarie in her spare time.

Her formal training is in design and advertising. She attended Temple University in Philadelphia, graduating with a BA from the School of Communications. 

She started coding her own web designs, and found her true passion to be in development. As she honed her skills, she garnered a sincere appreciation for standards-based development practices, believing whole-heartedly in the importance of an accessible web.

Topics discussed with Allison Wagner:

  • 3:30 Allison’s career path to development
  • 15:30 Expressive CSS
  • 22:00 Using Patternlab and Atomic Design
  • 28:50 Allison travelling and working adventures.
  • 35:00 Picking a good AirBnB location
  • 42:00 Working at the same place for a long time vs moving on quickly
  • 50:22 The magic of tidying up.
  • 53:27 Is your workspace actually working?
  • 54:45 Running and getting active.
  • 1:03:28 Career path for developers 

Non Breaking Space Show is still free of charge to high school teachers along with show notes and resources: Episode № 69: Allison Wagner — Career Path to UX Developer

The Non-Breaking Space Show: Ethan Marcotte

A new podcast, The Non-Breaking Space Show, is focused on interviewing the best and brightest in web design and development.

Hosted by Dave McFarland and myself, we strive to dive deep into current topics

Our inaugural guest was the delightful Ethan Marcotte to talk about Responsive Web Design, both the web development principle and his book of the same name.

He frequently speaks on web standards and responsive web design at conferences and tweets about it @beep and @rwd.

Below are the links & notes talked about during the show:

Slow Kills

Web builders need to add speed to their toolkit once again.

Back in the 1990s, when surfing the Web meant dial-up or worse, the assets that built up layouts had to be built lean. 

Complex patterns and textures meant longer download times, forcing users to wait and grow impatient. Sure, your server might be at fault, but your user only sees your logo slowly rendering and blames you for it.

With the saturation of broadband in major rural areas of the United States, Americans have grown used to Internet as commonplace as gas stations along the roadside. 

Designers and programmers have inflated their Web pages with large images, JavaScript libraries and plugins without realizing there is an often unseen cost to their efforts. People with slower or spotty Internet connections can’t use their Web sites.

Within this past month, Google has come out and said it: “Slow kills.”

For a company that will do almost anything to shave off a millisecond of response time (even experimenting with their own ultra broadband networks), it makes sense for Google to factor speed into search engine rankings. 

In fact, speed has been a factor in their AdWords program since 2008.

What we need to do is re-learn what old techniques we’ve thrown away in recent years, but also how we can compress and optimize the scripts of our sites today.

Web 2.0 isn’t going to go away in a dot-com-bust. However we need to learn how to make it work smarter, not harder, for our users. 

Note: I’m hosting the online Web Optimization Summit next week on May 12, 2010. If you can’t make the day of the conference, your ticket affords you the chance to watch the recordings recordings will be made available after the conference for you to review whenever you want.