webAnimation

Creating web-ready animation files

Comparison of file types

Which is the best file type to use? The answer is that there is no “best.” How you choose depends on a variety of factors. Do you need color depth? Is performance on mobile browsers critical? Does the image contain variable opacity (that is, semi-transparent elements, like the reflection in our bouncing ball above)? Must the file render in all browsers? How you answer those questions will determine the “best” file choice.

Ironically, due to the history of file type development, the file types that do the worst in most categories are the files that have the most support on the web! Watch this space, however: the newer generation of file types was only developed after the rise of the mobile device. File types like WEBP and AVIF hit the sweet spot of combining high quality with high compression. It’s only a matter of time before they replace older file types like the GIF. Having said that, the GIF is still wildly popular — and predictions of its imminent demise have persistently proven to be incorrect!

Simple GIFs

Animated GIF creation is much simpler than people assume. The hardest part is in the individual frame creation, not the actual GIF creation. After discussing frame-making, we’ll introduce two paths to making a simple animated GIF.

Creating frames

While no two frame-creation jobs seem to be alike, the frames for this GIF are fairly representative of the workflow for frame-creation from existing photographic sources:

• The frames were created by taking apart a large JPG file with 12 frames of motion.
• Each frame was carefully cropped to fit inside the format and size required by the website.
• To achieve smoother motion, each frame was aligned using clues from the background.
• Pixel material was added to the top of each frame by cloning the dark background.
• The sepia tone was desaturated to pure grayscale.
• Exposure was “averaged” to avoid flash-framing, although some of the differences, in contrast, were kept to maintain a sense of “antique” imagery in the final GIF.

The work done on the frames, each saved as a JPG, is available for download and inspection in the sample file link at the top of this wiki title.

Making animated GIFs at Ezgif

Ezgif.com sponsors a super-simple GIF maker and conversion toolkit is this author’s favorite place on the web (besides newMediaWiki, of course!). Among other things, you can quickly and easily:

• Create new gifs from frames at GIF Maker
• Convert a short video at Video to GIF
• Wrong size? Use GIF Resizer
• Compress using Optimizer

YOUR TURN: Ezgif

Use Ezgif to make your own Muybridge GIF from the download sample.

Animated GIFs in Photoshop

YOUR TURN: Photoshop

Animated GIF with transparency

As we can see, the creation of a transparent GIF is no different than a “normal” one, save that the frames have transparent elements. Above, you can see the original file from which the animation was generated. After deleting the background, we generated frames using a Photoshop Transform Rotate by 3 degrees per frame, for a total of 120 frames for one full rotation.

YOUR TURN: Photoshop

Find and download the Catherine Wheel sample file at the top of this wiki title. Then, use the sample frames to create a transparent looping GIF in Photoshop.

New kids on the transparency block

The new kids on the block are animated PNG, or APNG, along with WEBP and AVIF. Despite their clear advantages of quality and compression, browsers have been a bit slow in adopting them. Until as late as 2017, many major browsers did not support APNG. WEBP animation only achieved wider support in 2020 — and even then, Safari support was dependent on the MacOS it was running on. AVIF animation is now running on most major browsers as of this writing (2023), but Edge is still lagging. As more browsers align with these high-quality high-compression file types, we anticipate a rapid increase in their proliferation.

All three animated file types work similarly to GIFs while supporting sophisticated variable transparency not available in GIFs. Now, compare the appearance of our bouncing ball APNG across a range of background values to that of a similar GIF file. Compared to the unsightly edge on the GIF, you can immediately see the advantage in the anti-aliased transparent edges and the transparency in the reflection.

For each of the filetypes below, we’ll use the same set of frames found in the Bouncing Ball sample file, which you can download from the link at the top of this wiki title.

APNG

Creating with Ezgif

There are two ways to make an APNG file with Ezgif: 

• Convert an existing GIF at GIF to APNG 
• Create APNG using frames at APNG Maker

NOTE: It can’t be stressed enough that converting an existing GIF with transparency will NOT clean up the edges or provide variable opacity! You should only use the GIF to APNG to make APNGs without transparency.

However, if you make your PNG frames from scratch in Photoshop, with transparency-anti-aliasing at edges and variable opacity in drop shadows, reflections, and similar effects, Ezgif makes remarkable files with APNG Maker. Use the Bouncing Ball frames in the download above to practice.

Creating with Photoshop

Historically, Photoshop has had some bugs in its output to APNG, but the latest update seems to have solved this. So, with that history in mind, let’s have a go at creating an APNG!

Theoretically, here is the workflow:

• Go to File > Export > Render Video.
• On the dropdown menu change from Adobe Media Encoder to Photoshop Image Sequence.
• Click on the dropdown list for Format and change it to PNG.
• Add a name for the file and location, then select Render to save it there.

We continue to monitor potential issues with Photoshop here. If you encounter issues with rendering despite assurances from Adobe that they’ve solved the problem, a reasonable workaround is to generate good-quality PNG frames and take them to Ezgif for the APNG Maker above.

YOUR TURN: APNG

Use the bouncing ball sample frames to create an APNG in Ezgif and Photoshop (if it will allow!). Name them ballbounce_ezgif.png and ballbounce_ps.png to distinguish them.

WEBP

Creating with Ezgif

There are two ways to make a WEBP file with Ezgif: 

• Convert an existing GIF at GIF to WebP 
• Create WEBP using frames at WebP Maker

Just as we warned with APNG files, we don’t recommend trying to convert transparency WEBP files with transparency GIF files. Better to use PNG, WEBP, or AVIF files built from scratch, like our bouncing ball frames.

Creating with Photoshop

Photoshop 23.2 and later supports WEBP. However, you may need a plug-in to create animated WEBP files. If that’s true, we don’t want you to mess with your Photoshop configuration.

YOUR TURN: WEBP

Use the bouncing ball sample frames to create a WEBP in Ezgif and Photoshop (if you don’t need a plug-in!). Name them ballbounce_ezgif.webp and ballbounce_ps.webp to distinguish them if needed.

AVIF

Creating with Ezgif

There are two ways to make an AVIF file with Ezgif: 

• Convert an existing GIF at GIF to AVIF 
• Create AVIF using frames at AVIF Maker

Again, we don’t recommend trying to convert transparency AVIF files by using transparency GIF files. Use PNG, WEBP, or AVIF files like our bouncing ball frames.

Creating with Photoshop

Photoshop will only work with AVIF by installing a plugin, and if you’re on a networked machine in the studio I teach you don’t have administrative rights to install it.

YOUR TURN: AVIF

Use the bouncing ball sample frames to create an AVIF in Ezgif. Name it ballbounce_ezgif.avif.

Animated SVG

To round out our knowledge of animated file types on the web, we conclude with a discussion of the animated SVG.

So, for now, if you haven’t yet learned how to work with HTML and CSS, creating an animated SVG goes beyond the scope of this wiki title. But fear not: we will cover the creation of animated SVGs in another project!