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
    MooTools HTML Police: dwMarkupMarine

    We've all inherited rubbish websites from webmasters that couldn't master valid HTML. You know the horrid markup: paragraph tags with align attributes and body tags with background attributes. It's almost a sin what they do. That's where dwMarkupMarine comes in.

  • By
    Create a Clearable TextBox with the Dojo Toolkit

    Usability is a key feature when creating user interfaces;  it's all in the details.  I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements.  No holding the delete key down.  No pressing it a...

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!