Media Tutorials

  • By
    Count Frames in an Animated GIF

    The animated GIF always makes me chuckle; on one hand they seem like a relic of the "old web", on the other hand they aren't going anywhere and their meme-like presence seem to only make them more popular.  If you browse through my media blog...

  • By
    Uppy File Uploading

    One of the big tasks I was charged with at my first job was setting up a system by which any customer or potential customer (aka anonymous user) could upload PDF and image files. I had loads of constraints to deal with: browser support...

  • By
    How to Use OBS as a Webcam

    As I learn more about streaming video games on Twitch and continue broadcasting the Script & Style Show, I've become skilled in the art of Open Broadcasting Software (OBS).  OBS is a bit like PhotoShop for video, wherein you can layer effects like...

  • By
    Detect Video Resolution

    Video resolution has always been something I've been interested in, starting with the purchase of my first HD television.  The HD video quality felt life-changing, especially when watching the World Cup, which I'd bought that TV for.  I carried that enthusiasm through to being an early...

  • By
    Dynamic Waveform Visualizations with wavesurfer.js

    Waveform images are an awesome addition to boring audio widgets.  They can be functional as well as aesthetically pleasing, allowing users to navigate audio visually.  I recently found wavesurfer.js, an amazing waveform image utility that uses to Web Audio API to create super customizable...

  • By
    Cloudinary Launches a Complete Video Solution

    Over the past year I've shown you how amazing Cloudinary is for media delivery, optimizationimage filters and transformations, Vue and React; whatever the task, Cloudinary has you covered.  Today I'm happy to share that Cloudinary has a massive new feature announcement: ...

  • By
    Convert JPG, PNG, and Animated GIF to WEBP

    New image formats like WEP and MOZJPEG will be a major boost to load time on the web.  The majority of page load and render time is usually attributed to unoptimized images, so these new formats will make both mobile and desktop load times faster.  I've...

  • By
    Image and Video Conversion with Cloudinary

    I've always been fascinated with media formats and converting both images and video from one format to another.  Media conversion allows us to play videos on devices or apps with picky media requirements and load optimized formats for faster download speed.  I've written several media-related...

  • By
    Contest:  Cloudinary Style Transfer on CodePen!

    Cloudinary provides web designers and developers the ability to do a huge number of operations, like resize, optimize, and format almost all media types, but my favorite parts of their service are the vast amount of visual transformations their API allows you to play with; ...

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