Create Image Thumbnails with ImageMagick

By  on  

ImageMagick is, for lack of better term, magic.  You can throw just about anything at it and succeed.  With that in mind, I was recently using Google Page Speed to see how I could improve my website and it occurred to me I wasn't generating thumbnails for my post lists -- I was simply scaling down preview images with CSS.  Certainly not the most efficient technique you've ever heard of.  ImageMagick to the rescue -- now I can parse for images and generate thumbnails to make my site much faster to download!

ImageMagick is loaded with options but the syntax to generate a thumbnails is dead easy:

convert billboard.png -trim -resize 32x32 thumbnail.png

Instead of simply scaling down an image with CSS, I should be generating a thumbnail and serving that up instead.  And since it's so easy to do so, there's really no reason not to!

Recent Features

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • By
    Introducing MooTools HeatMap

    It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

Discussion

  1. There is a -thumbnail option to create, you’ve guessed it, thumbnails : http://www.imagemagick.org/script/command-line-options.php#thumbnail

  2. And if you need to do it on the fly, here’s a chainable wrapper for GD (PHP): https://github.com/claviska/SimpleImage

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!