Command Line Image Optimization

ImageOptim-CLI is a handy little command line tool (OS X only) by Jamie Mason / @fold_left that incorporates ImageAlpha, ImageOptim and JPGmini. It can be automated as a git pre-commit hook for fire and forget front end development, something I’ve found useful.

Pre-Commit Hook

Add hook to: your_project/.git/hooks/pre-commit

images=$(git diff --exit-code --cached --name-only --diff-filter=ACM -- '*.png' '*.jpg')
$(exit $?) || (echo "$images" | imageoptim && git add $images)

JPGmini does carry a price tag at the Mac App Store, so one would need to evaluate if regular use of JPEG calls for it. On the other hand, open source projects ImageAlpha and ImageOptim are pretty much the best tools in class when dealing with PNG.

I took the tool for a spin on this blog. Even though it is not image heavy, over the course of incarnations I have had a few images accumulate in my public/images folder, currently at a modest 1.5 MB after subtracting sundry animated GIFs. (There are many volumes worth of material to be written about animated GIF optimization and compression, so I will stick to JPEG and PNG for now.) I obtained some large PNG and JPEG images to give a good sample size of 37.8 MB on our test run.

After hitting it with ImageOptim-CLI, the folder’s size became 16.2 MB, a savings of 21 MB or 42.9%. Not too shabby. Now you get to figure out the presentation of your images. Since this is Jekyll, perhaps something simple like using Front Matter to create a photo gallery as in this tutorial: Jekyll Tips. Since we are not using the image gallery anywhere else, it makes sense to do this instead of creating a Jekyll Collection.

Add the image list to the Front Matter on this post:

---
  images:
    - image_path: /assets/img/PNG_JPEG/png_wolf_by_itsdura-d3cle9k.png
      title: PNG Wolf
      link: http://itsdura.deviantart.com/art/PNG-Wolf-202552184
    - image_path: /assets/img/PNG_JPEG/apple.png
      title: Apple
    - image_path: /assets/img/PNG_JPEG/coffee_beans.png
      title: Coffee Beans
    - image_path: /assets/img/PNG_JPEG/GDEM-10km-colorized.png
      title: ASTER image of world
    - image_path: /assets/img/PNG_JPEG/Pillars_of_Creation.jpeg
      title: Pillars of Creation
    - image_path: /assets/img/PNG_JPEG/Star-forming_region_S106_%28captured_by_the_Hubble_Space_Telescope%29.jpg
      title: Hubble star-forming region S106
    - image_path: /assets/img/PNG_JPEG/Japan.jpg
      title: Japan
    - image_path: /assets/img/PNG_JPEG/Cat.jpg
      title: Domestic Cat
---

Then we add code on the post to loop through the array of images. We can even add links to each image to make them clicky, (a highly technical SEO term.)

  <ul class="photo-gallery">
    {% for image in page.images %}
      <li>
        <a href="{{ image.link }}">
          <img src="{{ image.image_path }}" alt="{{ image.title}}"/>
        </a>
      </li>
    {% endfor %}
  </ul>

(Incidentally I learned about using the raw tag for Liquid templates inside code blocks.) Finally, the CSS to present the images:

.photo-gallery, .photo-gallery li {
  list-style: none;
  padding: 0;
}

.photo-gallery li {
  display: inline-block;
  width: 33%;
}

.photo-gallery li img {
  width: 100%;
}

The finished result is a quickly-loading, easily-configurable gallery of optimized photos:

I really liked using ImageOptim-CLI and would recommend it to automate the process. Even when not using this command line tool at all, image optimization should be a part of every front end developer work flow.

In closing, ImageMagick must be mentioned as the gold standard of open source command line image manipulation. It allows amazingly fine grain control and has excellent documentation well beyond the scope of this humble post.

Docs:

• ImageOptim-CLI
• ImageMagick
• ImageAlpha
• ImageOptim
• JPEGmini

Natural Philosophy Redux

There is a grand adventure to be embarked upon every time a student asks a question and the mentor says: “I don’t know, let’s find out.” The chance to learn occurs at the moment of uncertainty by forcing the knowledge seeker to step out of their comfort zone and expose ignorance. Own ignorance. Keep uncovering new uncertainties to investigate.

With regard to convention and standards, become proficient enough with your tools to recognize the value that is being added by following them. Promptly try to break the rules to see what happens. Find out why you are told to do things a certain way, then figure out how to do it better.

Respect elders and tradition while at the same time questioning authority, institutions, and customary manners of doing things. Wise elders when questioned thusly will recognize the positive value of reinforcing fundamentals and the chance however small of learning something completely new. The greatest scientific breakthroughs have been made from examining established beliefs and taking an alternate tack.

Break down the pillars of beliefs to atomic constituents. Build them back up by carefully considering each addition, being ruthless in the inquisition of your tenets. Hold no belief so fanatically that contravening evidence is ignored. Be fluid in ways.

Finally, recognize the struggles that others have around you. Help them. You will probably learn something in the process. Voraciously consume resources and be mindful to give credit. Strive to be a good citizen steward of code and contribute to open source software projects. Give and receive feedback as a gift. Be grateful to be able to see this episode of history from your particular unique vantage point.

Remember to be human, and to step out of your skin sometimes.

Never Read The Comments

As a fun little project I started playing around with Firebase and this Jekyll blog. In a move I hope to not live to regret, I made it possible to submit comments!

Update (December 2016): Retired (aka nuked) the code shown in this tutorial from my blog. As much fun as it was to over-engineering a comments section in Jekyll, it’s time to retire the seldomn used (if ever) comments section. Incidentally, the tutorial led me to learn how to use Google’s reCAPTCHA and Liquid templating which was fun.
Lastly, due to Google’s aquisition of Firebase shortly after this post was published, I was able to painlessly transfer the database from the legacy servers to the shiny new Material Design interface at Firebase Console

Folks who have pertinent and kind comments can scroll to the bottom of a post and enter a name, message, and an optional email for a Gravatar image.

Isn’t that nice?

I used part 3 of an article from CSS-Tricks¹, so if you’re curious, go ahead and follow those directions. The only tricky part was configuring the security rules.

If I get hit with lots of spam, I will need to take corrective steps, but for now the only validation that is done is checking for the presence of a name and a message.

Firebase is really cool, fast and well documented. I am loving the realtime NoSQL cloud database which stores data as familiar JSON objects. For a simple blog it does seem to be a bit overkill, but I just love to over-engineer this lil’ blog to bits.

Got feedback? Leave a comment, bub. Or, you know, just reach out to me on Twitter or email.