What Are Moving Pictures (Animated GIFs) and How Do You Use Them on a Web Page?
Moving pictures are images that change or play over time—most commonly animated GIFs, but also Flash movies and Java applets. They work well for small, purposeful effects like icons, reactions, or simple demonstrations, and poorly when a page is crowded with them: netanimations.net notes that too much movement can drive viewers away, and that many animations bog down page loading and consume bandwidth. Use them deliberately, keep file sizes small, and place them where motion adds meaning rather than noise.
The main types of "pictures that move"
| Format | What it is | Typical use | Watch out for |
|---|---|---|---|
| Animated GIF | A sequence of frames looped in one image file | Icons, reactions, small decorations, simple demos | Large frame counts and dimensions inflate file size |
| Flash movie | Interactive/animated content played by a plugin | Older interactive animations and games | Plugin support has largely disappeared from modern browsers |
| Java applet | Small program embedded in a page | Legacy interactive animations | Also largely obsolete and often blocked |
| Video (MP4/WebM) | Continuous footage or rendered animation | Longer or higher-quality motion | Heavier than a GIF, but often smaller for the same quality |
The phrase "pictures that move" usually means the first row—animated GIFs—because they behave like an image: they sit inline in text, loop automatically, and need no player controls.
Where moving images help, and where they hurt
Good fits:
- Icons and small indicators—a spinning house, a bouncing arrow, a blinking "new" tag.
- Reactions and humor—the kind of clip-art animation netanimations.net collects, meant to make a page "come alive."
- Simple demonstrations—showing a short sequence (a few frames) where a static image can't convey the change.
Poor fits:
- Long articles or dense reading pages—constant motion competes with the text.
- Pages with many animations at once—the source explicitly warns this slows loading and eats bandwidth.
- Anything where the motion is decorative only and repeats forever—viewers may leave "to rest their eyes."
A practical rule: one or two moving elements per screen, and only if removing them would lose information or intent.
How to add one to a page
- Get or make the file. You can download an existing animated GIF, or build one frame by frame. For browser-based frame-by-frame work, tools like FliiipBook let you draw frames and export a GIF without installing desktop software.
- Check the source and rights. Animations collected from forums, search results, and personal blogs may have unclear ownership. Prefer files you created, files with a clear license, or ones you have permission to use.
- Insert it like a normal image. In HTML, an animated GIF uses the same tag as a static image:
The browser plays the animation automatically; no extra script is needed.<img src="spinning-house.gif" alt="Spinning house icon" width="80" height="80"> - Set explicit width and height. This reserves space so the page doesn't jump while the GIF loads.
- Verify. Load the page and confirm: the animation loops as expected, it doesn't push other content around, and the page still feels fast.
Keeping motion from slowing the page
- Shrink dimensions and frame count. A 300×300 GIF with 60 frames is far heavier than an 80×80 GIF with 8 frames. Trim frames you don't need.
- Limit how many run at once. Each animation is a separate download and a separate thing the browser must keep rendering.
- Consider video for longer motion. For anything beyond a short loop, an MP4 or WebM is often smaller and smoother than an equivalent GIF.
- Test on a slow connection. If the page feels sluggish, the animations are probably the cause.
Common snags
- The GIF doesn't move. Some image editors re-save only the first frame. Re-export as an animated GIF and check the file in a browser.
- It plays but looks choppy. Too few frames or an uneven frame delay; add frames or adjust timing.
- The page jumps as it loads. You didn't set width and height on the image.
- It won't display at all. The file path is wrong, or the format isn't actually a GIF (a renamed file won't animate).
The core decision is simple: use moving pictures where a brief, looping motion communicates something a still image can't, keep them small and few, and confirm the source is one you're allowed to use.