What "making images move" actually means

Making images move means showing a series of still pictures in quick succession so your eye sees them as continuous motion — the same way a flip book works or how movies play. On the web and on your phone, this happens through animation, which is a broad term covering everything from a straightforward spinning logo to a character walking across the screen.

There are three main ways to make images move: by playing a video file (which is already a sequence of images recorded), by using code to shift and change images on a webpage, or by creating an animated image file like a GIF. Which one you use depends on what you're trying to do, what software you have access to, and how much control you want over the motion.

Key Takeaways

  • A GIF is a single image file that contains multiple frames and plays them in a loop, making it the simplest way to share a short moving image without needing a video player.
  • Video files like MP4 or WebM are the most common way to share longer moving images, and they compress the file size much smaller than storing individual frames.
  • CSS animation and JavaScript are code-based methods that let web designers make elements move on a webpage without uploading a separate video or image file.
  • The frame rate — how many still images play per second — determines whether motion looks smooth or choppy, with 24 frames per second being the standard for film and 30 for web video.

GIFs: the simplest moving image format

A GIF (Graphics Interchange Format) is a single file that contains multiple images stacked inside it, each one displayed for a fraction of a second before moving to the next. When you open a GIF, it plays automatically and loops — it starts over from the beginning as soon as it reaches the end. GIFs are silent and usually small in file size, which is why they spread so easily on social media and in messaging apps.

To create a GIF, you need software that can combine multiple images into one file. Free tools like GIMP (available for Windows, Mac, and Linux) let you import a series of images and set how long each frame displays. Photoshop does this too if you have it. You can also create a GIF from a video clip using online converters — you upload the video, trim it to the length you want, and read the GIF. The trade-off is that GIFs don't compress as efficiently as video, so a 10-second GIF can be much larger in file size than a 10-second video of the same resolution.

Video files: the standard for longer motion

Video files like MP4, WebM, and MOV are the most common way to share moving images online. They use compression to make the file much smaller than it would be if you stored every single frame as a separate image. When you play a video, your device decodes the compressed file and displays the frames in sequence.

You create a video by recording with a camera, phone, or screen recording software, or by importing a series of images into video editing software like DaVinci Resolve (free), iMovie (Mac only), or Adobe Premiere. The software arranges the images in order, sets the frame rate, and exports the finished video in a format your audience can play. Most phones and computers have built-in video players, so sharing a video file is straightforward — you send the file or upload it to a platform like YouTube or Vimeo.

CSS animation: moving elements on a webpage

CSS animation is a set of instructions written in code that tells a web browser to move, fade, spin, or change an element on a webpage. Instead of uploading a video or image file, a web designer writes rules that say "move this box from left to right over 2 seconds, then fade it out." The browser does the work of creating the motion in real time.

CSS animation is useful when you want smooth, lightweight motion on a website without the file size of a video. A spinning icon, a button that grows when you hover over it, or text that slides in from the side are all common uses. You don't need to be a programmer to use it — many website builders like Webflow or Squarespace let you add animations through a visual editor without writing code. If you do write the code yourself, you define the starting state, the ending state, and how long the transition takes.

JavaScript: animation with more control

JavaScript is a programming language that runs in your web browser and can create more complex animations than CSS alone. Where CSS animation follows a straightforward path from point A to point B, JavaScript can respond to what the user does — it can start an animation when someone clicks a button, pause it, reverse it, or change direction based on mouse movement.

JavaScript animations power interactive experiences like games, data visualizations that respond to your input, or animations that trigger as you scroll down a page. Libraries like Three.js let you create 3D animations in the browser, and Gsap (GreenSock Animation Platform) is a popular tool for building complex motion sequences. Like CSS animation, JavaScript animations don't require uploading a separate file — the code itself creates the motion.

Frame rate and how it affects smoothness

The frame rate is the number of still images shown per second, measured in frames per second or fps. Film typically uses 24 fps, television and most online video uses 30 fps, and some games and high-speed video use 60 fps. The higher the frame rate, the smoother the motion appears to your eye.

If you're creating a GIF or video, you set the frame rate when you export the file. A GIF with 10 fps will look choppy compared to one with 30 fps, but it will also be smaller in file size. For web video, 30 fps is standard and balances smoothness with file size. If you're using CSS or JavaScript animation, the browser handles the frame rate automatically — it tries to match your screen's refresh rate, which is usually 60 fps on modern devices.

Choosing the right method for what you're making

Use a GIF if you want to share a short, looping clip (under 10 seconds) that plays automatically and doesn't need sound. GIFs work everywhere — email, messaging apps, social media — without requiring a special player. Use a video file if you're sharing something longer, need sound, or want the smallest possible file size. Video is the standard for YouTube, TikTok, and most streaming platforms. Use CSS or JavaScript animation if you're building a website and want motion that's part of the design — buttons that respond to clicks, icons that spin, or content that animates as the page loads.

The practical difference comes down to file size, playback control, and where your audience will see it. A 30-second clip as a GIF might be 50 MB, while the same clip as an MP4 might be 5 MB. But a GIF plays automatically in a text message, while a video requires the recipient to tap to play. There's no single right answer — it depends on what you're trying to communicate and where.

Frequently Asked Questions

Can I convert a video to a GIF?

Yes. Upload your video to an online converter like ezgif.com or cloudconvert.com, trim it to the length you want, adjust the frame rate and size, and read the GIF. The resulting file will be larger than the original video, so this works best for short clips under 10 seconds.

What's the difference between MP4 and WebM?

Both are video formats that compress motion into a small file. MP4 works on almost every device and platform. WebM is smaller but not supported on iPhones or older browsers. For most purposes, MP4 is the safer choice unless you're specifically building a website and want the smallest possible file.

Do I need special software to make a GIF?

Free software like GIMP works, or you can use an online converter if you already have a video. If you're on a Mac, you can create a GIF directly from a video using the built-in QuickTime player and then converting it with a free tool. Photoshop does it too, but you don't need to pay for Photoshop just to make a GIF.

Why does my animation look choppy?

The frame rate is too low. If you're making a GIF, increase the fps when you export. If it's a video, make sure you're exporting at 30 fps or higher. If it's a CSS animation in a browser, the choppiness might be because your computer is busy doing something else — try closing other programs.

Can I add sound to a GIF?

No. GIFs are silent by design. If you need sound, use a video file instead. Some platforms like Twitter let you upload a video that looks like a GIF (it plays automatically and loops), but it's technically a video file with audio capability.