What Are Moving Animations (Animated GIFs) and How Do You Use Them on a Web Page?
Moving animations are images or small programs that change over time on a page: the most common kind is the animated GIF, a single image file that stores several frames and plays them in a loop. You use one on a web page by pointing an <img> tag at the GIF file, and you use it well by keeping the file small and the number of moving elements low — too much motion slows loading, eats bandwidth, and can drive visitors away rather than entertain them.
The three things people mean by "animations that move"
The phrase covers several different technologies, and they behave differently on a page:
| Type | What it is | How it runs | Main trade-off |
|---|---|---|---|
| Animated GIF | One image file containing multiple frames | Plays automatically in the browser, loops by default | Simple to embed, but file size grows fast with frames and dimensions |
| Moving clip art | Small decorative animated images (houses, icons, characters) usually distributed as GIFs | Same as GIF | Convenient for page icons, but easy to overuse |
| Flash movies / Java applets | Interactive animations, movies, and games | Require a plugin or runtime rather than plain HTML | More capability, more compatibility and loading problems |
netanimations.net describes its collection as "moving web clip art and animated gifs" plus "Flash Movies and Java Applets," and notes that these "wake up stagnant web pages and boring sites." The distinction matters because only the first two are drop-in images; the third kind depends on software your visitor may not have.
How to put an animated GIF on a page
- Get the file. Download the GIF to your own hosting, or reference a URL you are allowed to hotlink. netanimations.net gathers images "from various forum, search and web page sources," so treat it as a discovery index rather than a guaranteed license — check the origin before publishing.
- Insert it with an image tag. The browser plays the animation with no extra code:
<img src="images/bouncing-house.gif" alt="Bouncing house icon" width="120" height="120"> - Set width and height. Declaring the dimensions lets the page lay out before the GIF finishes downloading, which reduces visible jumping.
- Write real alt text. If the animation is decorative, an empty
alt=""is appropriate; if it carries meaning, describe it. - Verify. Load the page on a slow connection or with throttling enabled and watch when the animation appears. If it arrives late, the file is too large.
Expected result: the image loops on its own, with no JavaScript and no plugin.
If you embed a frame or third-party player
netanimations.net itself warns: "Your browser does not support inline frames or is currently configured not to display inline frames." That is the built-in failure mode of <iframe> embedding — some visitors, and some security configurations, simply will not see the content. Prefer a direct image file when the animation is a GIF.
The cost of too much motion
The same source is unusually candid about the downside, and it is worth taking literally:
- Loading and bandwidth. "Lots of animations bog down page loading and consume lots of bandwidth." Every frame in every GIF is downloaded, whether or not the visitor watches it.
- Attention. "Too much activity and movement on a page may deter viewers sending them away to rest their eyes from the motion of the moving images."
A practical rule: one or two moving elements per screen, and only where the motion communicates something — a status indicator, a "new" marker, a playful header. A page of spinning, bouncing icons reads as noise.
Adding sound or music
netanimations.net pairs animations with MP3s and songs, and its own markup shows the compatibility trap: "Your browser does not support the audio element." Audio that autoplays is also widely blocked or muted by default, and unexpected sound is a common reason visitors close a tab. If sound matters, make it opt-in with a visible control rather than starting it automatically.
Choosing a source for free moving images
When you pull animations from public web collections:
- Prefer files you can download and host yourself, so the animation does not break when the source page changes.
- Trace the image back to its origin where possible; "found on the internet" is not a license.
- Check the file size before committing — a decorative GIF should usually be well under a few hundred kilobytes.
- Keep a small local library of the animations you actually use instead of linking out to many sources.
Quick decision guide
- Decorative icon or small loop → animated GIF in an
<img>tag, sized and compressed. - Interactive animation, movie, or game → expect plugin or runtime dependencies and test across browsers before relying on it.
- Animation with music → provide a play control; never assume autoplay works.
- Many animations on one page → cut them down. The entertainment value rarely outweighs the loading cost and the distraction.