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

Incredible Demos

  • By
    CSS Ellipsis Beginning of String

    I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to...

  • By
    Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop.

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!