Tag Archiv: images

Turn an animated GIF into a <video>


Animated gifs are fun and all but they can get big (in filesize) quickly. At some point, maybe after just a few low-resolution frames it's better to use an MP4 and an HTML <video> element. You also preferably need a "poster" image for the video so people can see a quick preview before they decide to play your video. The procedure can be pretty simple thanks to freely available amazing open source command-line tools.

Step 1: an MP4

For this we use ffmpeg:

$ ffmpeg -i amazing.gif amazing.mp4

Step 2: a poster image

Here we use ImageMagick to take the first frame in a gif and export it to a PNG:

$ magick "amazing.gif[0]" amazing.png

... or a JPEG, depending on the type of video (photographic vs more shape-y)

Step 3: video tag

<video width="640" height="480" 
  controls preload="none" poster="amazing.png">
  <source src="amazing.mp4" type="video/mp4">
</video>

Step 4: optimize the image

... with your favorite image-smushing tool e.g. ImageOptim

Comments

I did this for a recent Perfplanet calendar post and the 2.5MB gif turned to 270K mp4. Another 23MB gif turned to 1.2MB mp4.

I dunno if my ffmpeg install is to blame but the videos didn't play in QuickTime/FF/Safari, only in Chrome. So I ran them through HandBrake and that solved it. Cuz... ffmpeg options are not for the faint-hearted.

Do use preload="none" so that the browser doesn't load the whole video unless the user decides to play. In my testing without a preload=none Chrome and Safari send range requests (like an HTTP header Range: bytes=0-) for 206 Partial Content. Firefox just gets the whole thing

There is no loading="lazy" for poster images 🙁

Comments are closed.

Simple upload image and create a thumbnail image

Here is an example for a simple way of uploading an image and then create a thumbnail image automatically. This PHP script does the following:

  • it uploads the image to a temporary location,
  • then it copies the uploaded image to a permanent location,
  • the script then creates a smaller thumbnail image and saves this to a special thumbnail image location

This PHP script is set up only to allow the upload of JPG formatted images. But with some PHP knowledge you will be able to change this.

(more…)

Comments are closed.

Watermark Uploaded Images On-The-Fly Using Overlay Image

This script uses PHP and GD library functions to watermark uploaded images on the fly. You can use any transparent PNG image as the watermark source image (e.g. your company logo or a copyright notice). This image is then imprinted on the uploaded image. The script also creates a backup of the original image before applying watermark. (more...)
Comments are closed.
Powered by Gewgley