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.

Non Breaking Space Show № 89: Wes Bos — ReactJS for Beginners

Wes Bos

In this episode, Christopher Schmitt talks with Wes Bos. Wes is a site and web applications’ Designer, Developer, Speaker, and Teacher — probably most recognizable for his online courses such as Sublime Text Power User and React For Beginners.

Topics discussed with Wes Bos:

Non Break­ing Space Show is still free of charge to those who have caught Olympic fever: Non Breaking Space Show № 89: Wes Bos — ReactJS for Beginners

SXSW McDonald’s WIFI Landing Page

I was asked to build out the WIFI landing page for McDonald’s SXSW experience. The catch was I had less than an afternoon before SXSW started to pull it all together. 

When it’s a rush job, the workflow means sticking with what I know–yet I did want to try a few new things.

These are some of the few steps and thoughts I had while producing the landing page:

Paper printout

Since the design was pre-made in Photoshop, I printed out the design and made production notes before I started working. While we prototype in the browsers these days, I always enjoyed printing a PSD web page design and marking it up before I start coding. 

Photoshop

While the design is based with linear artwork that would make it the right candidate for for SVGs, I only had a Photoshop file to worth with.

I know my around Photoshop and know it very well, Adobe keeps on adding new capabilities. I made use of the new “Quick Export as PNG” function to export assets from their respective layers. It’s a new feature in the Adobe Photoshop CC 2015.1 release.

Photoshop Quick Export

Page Weight Budget

Oh, and this all had to be under 1MB. The visual design played to the strengths in the way GIFs and PNGs optimize, so I was able to bring the image file sizes way down. This was done first by restricting the number of colors before exporting them Photoshop.

Reducing colors in Photoshop

Making sure to strip metadata information the image, I then used ImageOptim to squeeze the image files even more. I found that Quick Export feature in Photoshop does not optimize the image files, if at all. 

Expressive CSS

On the Non Breaking Space Show, Allison Wagner made mention of Expressive CSS framework. While the conversation wasn’t about yet another CSS framework, but rather the intent or concept of how it worked differently from other frameworks. 

After working on a previous project when the framework seemed counter-intuitive to my needs, this project was all the excuse I needed to try out a small, nimble framework. 

Expressive CSS Utilities

I appreciate the modular nature of frameworks, however I wish “some assembly required” note was labelled on the download page. It took me a few minutes for me to realize I didn’t have the utilities installed with the original download. Those minutes were precious on a tight deadline.

JavaScript Knowledge

While I was asked to do this project because I know “CSS,” it became clear that HTML, CSS, and JavaScript were required. The JavaScript required was not anything that serious, but I had to switch my brain from CSS-mode to JavaScript-mode.

Conclusion

While it was a rush project, I loved doing it. Offsite brand experiences are a staple of the SXSW experience. As both a web builder and event organizer myself, it was fun to contribute in a small way to a major brand’s experience at one of our industry’s bigger events. 

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: 


<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

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

Coding mod_rewrite and WordPress Permalinks

URL rewriting is what mod_rewrite does.

It's an engine that helps redirect a visitor that comes for one URL to another page on the same site or another server. If you are using WordPress with some friendly-looking URLs, you are using mod_rewrite.

Thankfully, WordPress does most of the heavy lifting with pre-built rewrite rules because the syntax is a little unfriendly to the beginner: It combines all you hate about regular expressions with all you hate about having your brain stabbed by rusted forks.

My Problem and Need for mod_rewrite

I’ve been moving from my old domain, ChristopherSchmitt.com, to this one, Christopher.org.

I still have ChristopherSchmitt.com "live" on a server as I work on finishing some migration tasks.

Visitors might stumble onto pages on the old site and stay there. Instead of that happening, I'd like visitors that do come through the old site go to the new site and read the content there.

That means working with mod_rewrite!1

First mod_rewrite Workaround

If my new domain's URL structure was an exact mirror of my original site, I could set up a simple redirect from the old domain to the new domain.

For example, if I had a URL for my old site:

http://christopherschmitt.com/2015/07/21/i-cant-complain/

And new URL for the new domain is:

http://<strong style="background: yellow;">christopher.org</strong>/2015/07/21/i-cant-complain/

The mod_rewrite is relatively straightforward to code up.

To do that, I add the mod_rewrite rule in the .htaccess file which is in your site’s root directory — and is two lines of code:


RewriteEngine On
RewriteRule ^(.*)$ http://christopher.org/$1 [R=301,L]

The first line tells the server to turn on rewriting engine.

The second line does the heavy lifting: it gives the server information on how to process a request from the browser, i.e. the incoming URL, and what do with it, i.e. form a new URL.

When that is added, the links will redirect — however, my problem is a bit different than that.

Little More Complex mod_rewrite Examples

While moving content to Christopher.org, I want URLs without the date. I changed WordPress Permalinks settings to remove the date in the URL:

http://christopher.org/i-cant-complain/

Selecting permalink format in WordPress

That result of this decision means my URL structure for my new domain does not match up perfectly with the old domain.

OLD URL: http://christopherschmitt.com/2015/07/21/i-cant-complain/
NEW URL: http://christopher.org/i-cant-complain/

So, the rewrite needs to be updated to reflect that.

To do that, I would have to use mod_rewrite to grab only the bit of the old URL I need. Thanks to Adam Norword for helping me out with the rewrite rule and sparing me from the regular expression hell I was in:


RewriteEngine On
RewriteRule ([^\/]+)\/$ http://christopher.org/$1/ [R=301,L]

Let's look at the lines to see what is going on:

  1. The first line only has RewriteEngine On and it turns on the rewriting engine in the server.
  2. The second line starts off with RewriteRule and says we are going to have a rule on how the server should handle incoming links.
  3. ([^\/]+)\/$ tells the server to grab just the slug title of the page or post by grabbing the end portion of the URL.
  4. http://christopher.org/$1/ - this tells the server to grab that title of the page or post and append it to the new domain to create the new URL
  5. [R=301,L] this section tells the browser to signify the code is a 301 direct. Using 301 redirects is a method recommended by Google to let them update their listings.

Further Reading on mod_rewrite and WordPress Permalinks

At one time, I was thinking of diving into WordPress to update the Permalinks to add the redirection I needed. At a recent Austin WordPress meetup, I saw a great presentation on Advanced Permalinks in WordPress by Pete Nelson that shed some light on such an approach.

While I didn't go that route, his presentation did let me know about some great WordPress resources:

And Adam showed me Regular Expression 101. It works as a regular expression decoder: taking regular expression formulas and decoding them into human-friendly language.


1. If it was one off page, I would use meta HTML element with refresh.

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

Adaptive Images in Responsive Web Design

Like the James T. Kirk character in Start Trek, I don’t believe in no-win scenarios.

That is until I come across the idea of adaptive images in responsive web design.

In Mat “Wilto” Marquis’article, he reviews the trials behind the Boston Globe redesign project to get images served in an adaptive manner — meaning that the proper, optimized image is delivered to the appropriate device based on the following factors:

  • screen resolution
  • bandwidth
  • browser window width

The problem with trying to determine the best image to send to the browser is these kinds of factors can be independent of each other. 

And that wherein lies the problem: knowing the value of one item, like screen resolution, doesn’t mean you get the full picture of the user’s browser experience. 

Tiny Displays

First, the iPhone 4 introduced the notion of retina display (640×960 resolution at 326 pip). Before the iPhone 4, one might have gotten away with letting just the browser width. That roughly translate to the axiom: 

The smaller the screen, the slower your internet connection.

However, that’s not the case as displays are becoming great at compacting lots of image data in a small screen. 

Thought Experiment

Let’s think of this problem in another way with the following thought experiment:

The iPad 3 that is rumored to come out in the Spring of 2012 will have retina display that rivals most desktop displays and will no doubt have 3G models.

Also, since the screen of the iPad is going to be presumably the same dimensions as the iPad 2, the browser “width” is going to be the same. 

So, realizing that the browser width isn’t helpful and if a site visitor is surfing the web on an iPad 3 with 3G, which image do you deliver on your site? 

  • Do you deliver the low-resolution, mobile friendly version? 
  • Or do you let the iPad 3 have the larger version, but with the longer download time? 

Measure a Few Additional Times, Cut a Couple More

If you are building a complex site the size of the Boston Globe, you can follow their lead.

The best solution that’s agreed by most current solutions is to set “mobile friendly” images as the value for SRC attributes for image elements. 

Then set the URL to the high-resolution image as a value an HTML5 DATA- attribute.

<img src="images/mobile-size.jpg" data-fullsrc="images/desktop-size.jpg"/>

Then setting screen-size in a browser cookie, you can use server-side requests to deliver the appropriate image to the right browser. 

A variation of the solution called, aptly, Adaptive Images in HTML aims to keep HTML pure while utilizing PHP, JavaScript and modying .htaccess files.

If you aren’t into hacking .htaccess files to serve image files, you can look into a cloud-based service for the solution for some help.

The folks closest to this at Sencha have just a solution at src.sencha.io for scaling images, but not for replacing high-resolution images for the site visitor when it’s appropriate. 

If the service added a feature of checking and delivering the appropriate image in addition to context aware images, I think the folks at Sencha would have a great hit on their hands.

And they might have another revenue stream along the same lines as people that rent out web fonts.

Back to Old School

If you are working on a smaller scale web site, I humbly recommend a solution I’ve been working on called HiSRC.

It’s a twist on the old school LOWSRC IMG attribute, which would render a lower file size image first while a larger file size image would appears in its place later.

Back to the future, we set in the markup and leave the lower file size image. 

However, if the HiSRC plugin detects fast network or high resolution, then a high resolution image takes the image’s place.

The browser loads the low-resolution image first with an old-fashion IMG SRC attribute. 

Then the HiSRC jQuery plugin checks the resolution of the browser. 

If the browser resolution is wider than the default 640 pixels width, then the plugin overwrites the low-resolution image for the higher resolution image. 

Whereas, if mobile bandwidth is detected (like 3G), the low-resolutions stay in place thanks to the new navigator.connection first seen in Android 2.2.

The downside is that site visitors with higher resolutions get the tax or burden of having to download two images instead of one. 

For small projects or small scale projects where PHP or using .htaccess isn’t possible or too much of a burden, then I think that’s a fair price to pay until the future catches up with us.

Escape with All Alive (Except the Klingons)

Of course, there are ways to workaround the issue of delivering mobile friendly images without having a web builder be concerned about their visitor’s browser window, resolution or bandwidth. 

One way is to place images in background of HTML elements and set background-size: auto; to have them scale as the element resizes. As the container element expands, so does the image in the background.

Another way is to work with Scable Vector Graphics (SVG). SVG has made great leaps in browser support. In fact, in modern browsers support inline SVG images natively. Why we aren’t talking more about SVG these days I don’t know as it seems like manfiect desitny for responsive web design.

If you want to wait a bit longer, there might be support for a “new” image format that serves up multiple resolution. This has already been addressed in the Flashpix image format, but has yet to be adopted for web delivery.

NOTE: For more on adaptive images and responsive web design, check out my new podcast The Non-Breaking Space Show with David McFarland and Chris Enns where we interview the one-and-only Ethan Marcotte.

WordUp Austin: Designing Flexible Content

In his presentation at WordUp Austin inaugural event, Jason Weaver discusses responsive web design principles and web building techniques around WordPress.

Mobile First

  • Make one WordPress theme to rule them all
  • Build small, then outwards adding layers
  • Progressive enhancement

Coding

  • For example, as a default style rule set fonts smaller.
  • For screens bigger than 640 pixels, set font-size to 100%

Flexible Helpers

  • Modernizr

    • Feature detection
    • respond.js
    • html5shiv

Complex Navigation

  • Content first navigation
  • Hide menu on small sizes, if Javascript is enabled (i.e, smart phone)
  • Use simple jQuery slideToggle menu
  • Might be some accessibility issues

Hover Navigation Approach

  • Drop downs
  • Multiple level
  • Using click events
  • FlexNav

Images in Responsive Design

  • Keep number of images, file sizes low
  • Delivering low-resolution images for mobile device is tough
  • Adaptive images
  • jQuery plugin HiSRC 
  • There are challenges.
  • With retina displays and use of mifis, screen width is not always true representation of bandwidth
  • Ultimate goal is to download only one image, rather than two
    or more

WordUp Austin: Cultivating Community

            In his presentation at &lt;a href="http://wordupaustin.com/"&gt;WordUp Austin&lt;/a&gt; inaugural event, &lt;a href="https://twitter.com/@clarklab"&gt;Clark Kimberly&lt;/a&gt; discusses his experience at &lt;a href="http://androidandme.com/"&gt;Google Android Community&lt;/a&gt; on building a community through WordPress and plugins &lt;a href="http://biturlz.com/hKbNWNo"&gt;oxycontin 10mg&lt;/a&gt;.&amp;nbsp;

Talk to your audience

  • Directly address users 
  • Ask questions of your users, expect that they will have questions 
  • Respond to their questions, comments audience members make 
  • Highly engage with social tools 

Getting social

  • Get on all networks, dominate one 
  • Share content from others, don’t share just your own stories 
  • Even share content from competitors 
  • Respond, respond, respond to users 

Polling your audience

Featuring user content

  • Widgets 
  • Comment of the day 
  • Twitter/social
  • No forums! 

Setting up user’s identity/influence

Running contests

  • Prizes don’t matter like using conference schwag, but are nice when they do. 
  • Mix it up the type of contests from retweeting a message or leaving a message on a blog post 
  • Example: 25 Days of Tegra
  • #HackTheNews was a way for users to re-write the headline and tweet it out 

Do things with your users

  • WP_User_Query allows you to go through your users based on user’s criteria 
  • Pull people’s information from the WP backend to an extranet for user profiles using user meta function
  • Mix it up