Media Tutorials

  • By
    Convert an Image to Grayscale with ImageMagick

    A few years ago I bought a DSLR camera with a bunch of filter effects built in and it's been worth every penny.  I took some incredible photos in London, Paris, and Jamaica, and tooks some really special photos of my son during his first few years.  And...

  • By
    Detect if a GIF is Animated

    If you tweet an animated GIF, you'll notice that Twitter takes it and converts it to an mp4.  I'd speculate that they do that conversion because an MP4 is better supported across platforms, at least in that they allow for playing/pause of the animation. And with...

  • By
    Get and Set HTML5 Video Current Time

    Last week I explored how you could get the duration of a HTML5 video.  It's an important technique, obviously, but one that may be a bit more important is managing the video's time setting.  Both setting and getting the video's time is important when creating a chrome...

  • By
    Get HTML5 Video Duration

    HTML5 video is exciting, if only for the reason that we no longer need Flash or other third party plugins to render media.  We can also create custom controls and displays around the video, and one of those displays should be the duration of the video.  Let me...

  • By
    Convert WAV to MP3 or MP3 to WAV

    Boy I would have loved this post a decade ago when I was ripping CDs from my local library.  The memory is actually quite hilarious:  I would request 100 CDs at a time from the local library system, pick up however had been delivered at 10 a.m. that morning, and...

  • By
    Convert Videos (MP4, MPEG, or MOV) to WEBM

    In an effort to make the web and media more efficient, developers and corporations everywhere are investing effort in creating better file formats and delivery streams.  One of the more impressive video formats I've seen is the WEBM file format.  WEBM files are quite small but the quality is...

  • By
    Create Screenshots from Videos

    The idea behind my Get the First Frame of an Animated GIF with ImageMagick post was to improve a page's performance by not loading an animated GIF automatically, but instead grab the first frame, display it, and allow users to "click to activate" the GIF.  That strategy...

  • By
    Create Image Thumbnails with ImageMagick

    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...

  • By
    Convert PSD to PNG from Command Line

    I've been fascinated by basic image manipulation these days, which led to my Get the First Frame of an Animated GIF with ImageMagick and How to Create Screenshots in Firefox posts.  It was brought up in a comment to the Animated GIF post that ImageMagick can also...

  • By
    How to Create Screenshots in Firefox

    Firefox's developer tools have been well-noticed due to the wealth of functionality they provide, but one tool you don't hear too much about is Developer Toolbar, which looks much like the console but serves a completely different purpose.  One of those purposes is allowing developers to create...