Media Tutorials

  • By
    Detect WEBP Support with JavaScript

    Image optimization is a huge part of improving front-end performance.  We've traditionally used JPG/JPEG, GIF, and PNG images but Google and the Chrome team developed the WEBP format which crunches file size and optimizes rendering.  If you go to a site like GIPHY in Chrome you'll...

  • By
    10 Excellent Image Tricks and Enhancements with Cloudinary

    If you've read this blog over the past months, you'll know that Cloudinary offers an amazing array of functionality, whether it be imagery, video, and even audio. I wanted to highlight ten of my favorite features and tricks when transforming your media on Cloudinary! Outline...

  • By
    Fetch and Transform Remote Images with Cloudinary

    Many of my dives into Cloudinary's amazing API like Instagram-like Filters, Image Security, Custom eCommerce, have started with uploading media (images, video, audio) to Cloudinary and then manipulating from there.  As social media and user generated content has taken the web by storm, however, we as...

  • By
    Image Security with Cloudinary

    When developers think about security within their web apps, seldom does image security top the list; not because securing media isn't important, of course, but because media security isn't always easy.  Some will even tell you that media security isn't important, but if you want to keep media owner...

  • By
    JPEG Compression with Guetzli

    A little while ago Google released its Guetzli JPEG encoder, which claims a 20-30% improvement in file size over libjpeg. Being intrigued, I decided to give it a go. My tool of choice for optimizing JPEGs has long been jpeg-recompress, one of the...

  • By
    Create Short Preview from Video

    Displaying a preview image before loading a video is common practice with web media these days; oftentimes that image preview is the video's first frame or an important frame from the video.  If you've visited an adult site recently (ahem), you will have noticed that not only do you get a preview image...

  • By
    Normalize a Directory of mp3s

    Back in the early days of Napster, Kazaa, eMule, and other file sharing networks, I would download as many apps, movies, game, and movies as possible.  My illegal downloading was out of control; I would get DMCA notices from my ISP for apps and games I had...

  • By
    Get and Remove EXIF Data from Photos

    If you've ever worked for an agency or a small web shop, I'd be willing to bet you've coded a fair amount of photo galleries.  You've probably also uploaded photos to social media, sent photos to friends and family, and so on.  Photos seem fairly innocent but, as is the...

  • By
    Modify Video Speed with ffmpeg

    I watch a lot of sports and recently I've become fascinated with some of the methodologies they use to illustrate events within the game.  I don't have their advanced TV software or hardware, of course, but I do have a love for ffmpeg, which allows me to do...

  • By
    Slice Videos with ffmpeg

    Isolating a specified portion of a video is a very common task for those who work within the media, probably using nice GUI tools to slice clips from the full video.  I'm a developer, however, and know how amazing ffmpeg is so I prefer to do my basic video slicing from command...