Tackling Animated GIFs

What are GIFs?

If you have spent any time on the internet, chances are you’ve seen a GIF.

GIFs (pronounced “Jifs” or “G-ifs”) are generally what people call short and soundless animated images. The word is actually an acronym for the file format used to preserve these moving pictures. The letters stand for Graphic Interchange Format, which is the most widely used method to store short animated clips.

Pros and Cons of GIFs

PRO: GIFs have been around since the 90s, which means that by now, they should be supported by almost all browsers.

CON: But with the emergence of mobile devices, re-formatting GIFs onto smaller screens have become an issue (this wasn’t something GIF-makers gave much thought back in the 90s).

PRO: Because of their resolution’s bitmap structure (rectangular grid of pixels), they’re an “efficient” way to short-clip a movie file. GIFs will play even if flash isn’t installed.

CON: GIFs have no audio and are lower in resolution with a limited colour palette of 256 colours.

PRO: GIFs use lossless compression, which means no detail is lost in the process of re-sizing the file.

CON: However, this comes with a scalability limit; GIFs can’t be shrunken as small as JPEGs can.

Tools for making animated GIFs

Image manipulation programs or apps like Photoshop or GIMP: You can build animations from scratch by basically stacking multiple still images in consecutive order. You can also just import a .mov file on to Photoshop, crop and make any other edits and then export it as a .GIF file.

“Cheating” options like Vine, Cinemagram, GifBoom: These mobile apps let you record and construct short movie clips quickly and easily. Because these short vids are generated on mobile devices, they’re pretty much guaranteed to play properly on mobile devices. These types of clips are usually MP4 files, but you can import them onto Photoshop and convert to .GIF files if necessary.

GIFs don’t always work. Why?

File size limit: Some websites might restrict large image files, so be sure to check regulations of the platform. For example, Tumblr will not display images larger than 10MB.

Resizing gone wrong: Some platforms auto-resize the dimensions of images for better visual presentation; animation can be removed in the process of doing so. GIFs that are smaller than their framing templates are not usually enlarged, but GIFs that are larger than their templates’ dimensions are often shrunken automatically to fit and look better on the web page. The process of downsizing larger GIFs could complicate the files’ properties, resulting in them not display properly.

Browser settings: Check to see your browser is set to display GIFs properly. Some browsers like Mozilla Firefox will not play animated GIFs properly if you do not check off certain settings like “Load images automatically.”

Server issues: It could be that your web hosting is slow.

Specific problems with mobile display

Larger file sizes might be to blame for GIFs not playing on mobile, especially on underpowered devices. Since animated GIFs are basically a stack of individual stills, file sizes can multiply quickly.

Safest bet when it comes to GIF-ing

Keep it (the resolution) on the low For optimal results on both desktop and mobile, avoid creating large GIF files. For Rock Content, GIFs should be smaller in width (in pixels) than the width of your live event.

Shaving off file size: GIFs can consist of partial moving components and the rest still. For example, you can opt to make a background that stays still by making it one full frame. You can then layer smaller frames on top of the background for animation. This will shave off a lot of the file size, but requires a bit more work.

Resizing your GIF properly: While there are advanced GIF-reconstructors like Ezgif.com, keep in mind other old-school ones could remove animation in the process. Even if the resizer shrinks properties of the GIF, it might require you to manually recompose the file into an animated GIF again. Also keep in that mind you may want to revise the appearance of the GIF itself to look best at its smaller size.

Troubleshooting

If your image is the right size, but still not playing properly, try uploading the original GIF file onto an image hosting site (like ThingLink, Photobucket) and grab its iframe code to embed onto your event.

Alternative animations

• MNG and JNG (animated PNG files and JPEG files), but these aren’t as widely supported because they were created about a decade later than GIFs.
• MP4 files like Vine clips.

Sources

GIF file format summary

Ivan Expert: Five types of digital image files

Nieman Lab: Zeega wants to remake the GIF for mobile

Ivan Lajara: How to make GIFs (Google Doc)

A few GIFs from Tumblr