{"course":{"slug":"image-editing","title":"Editing an Image","url":"https://addaly.com/learn/image-editing","level":"beginner","track":"create"},"lesson":{"slug":"when-the-image-has-to-move","title":"GIF is a 1987 format and you are probably still exporting one","url":"https://addaly.com/learn/image-editing/when-the-image-has-to-move","position":74,"of":78,"minutes":9,"answer":"GIF costs ten to twenty times what the same motion costs as video because it stores 256 dithered colours per frame with no motion compensation, so deliver MP4 or WebM with muted autoplay.","keyIdea":"GIF costs ten to twenty times what the same motion costs as video because it stores 256 dithered colours per frame with no motion compensation, so deliver MP4 or WebM with muted autoplay, or animated WebP where an image tag is required, and keep GIF only for platforms that accept nothing else."},"body":{"format":"markdown","text":"## Why the animated GIF is so large\n\nGIF was designed in 1987 for dial-up bulletin boards, and two of its design decisions are why a three-second clip becomes a four-megabyte file.\n\n**It has 256 colours per frame.** Every frame is an index into a small palette. A photograph has far more than 256 distinct colours, so the encoder must either post it to the nearest palette entry (producing visible banding) or **dither**, scattering pixels of two palette colours to fake a third. Dithering looks acceptable and it is catastrophic for file size, because it replaces smooth areas that would have compressed to nothing with high-frequency noise that compresses to almost nothing saved.\n\n**It has no motion compensation.** Modern video codecs describe a frame as *this block moved eleven pixels left*. GIF can skip unchanged regions between frames and that is all. Pan the camera and every pixel changes, so every frame is stored nearly in full.\n\nThe result, for a typical 3-second 800-pixel clip: GIF around 4 MB, the same clip as H.264 MP4 around 250 KB. Sixteen times the data for a worse picture.\n\n## The four things you can deliver instead\n\n- **MP4 / H.264 video.** Smallest by a wide margin, full colour, hardware-decoded so it costs almost no battery. Use it for anything longer than about a second or with real motion.\n- **WebM / VP9 or AV1.** Smaller again, supports real alpha transparency, which MP4 effectively does not. This is how a transparent animated logo gets onto a page.\n- **Animated WebP.** Full colour, alpha, and roughly 20 to 40 per cent the size of the equivalent GIF. Supported by current browsers. Convenient because it is still an image, so it drops into an `` tag with no player.\n- **APNG.** Full colour, proper alpha, lossless. Larger than animated WebP but the right answer for pixel-exact UI animation and small loops where lossy compression would show.\n\n## Making a video behave like a GIF\n\nThe reason people reach for GIF is that it plays by itself. A video can do the same:\n\n```html\n\n```\n\nAll four attributes are load-bearing. `muted` is required or mobile browsers refuse to autoplay at all. `playsinline` stops iOS taking it fullscreen. `loop` replaces the GIF's loop flag. `autoplay` without `muted` silently does nothing, which is the commonest reason a developer says the video does not work.\n\nConversion, free, one line:\n\n```bash\nffmpeg -i in.gif -movflags faststart -pix_fmt yuv420p \\\n -vf \"scale=trunc(iw/2)*2:trunc(ih/2)*2\" out.mp4\n```\n\nThe `scale` filter is there because H.264 requires even dimensions and a 801-pixel GIF will otherwise fail with an unhelpful error. `faststart` moves the index to the front of the file so playback can begin before the whole thing arrives.\n\n## When GIF is still the answer\n\nHonest cases remain, and they are all about where the file is going rather than what is in it.\n\nMessaging apps, older email clients, some chat platforms and a number of content management systems accept an image and will not accept a video. A GIF plays there; an MP4 becomes an attachment nobody opens. Platform behaviour, not technical merit, is the reason.\n\nIf you must ship one, cut the cost deliberately: reduce to 480 pixels wide, drop to 12 or 15 frames per second, keep it under two seconds, and use `gifsicle -O3 --lossy=80` or `gifski`, which builds a far better palette per frame than most exporters. A disciplined GIF is 600 KB rather than 4 MB.\n\n## Cinemagraphs, which are a raster editing job\n\nThe most useful moving image an image editor makes is the one where almost nothing moves: steam rising from a cup in an otherwise frozen photograph, a single flag moving, the rest still.\n\nThe construction is exactly the mask work from module three, applied to time. Take a locked-off clip on a tripod, pick one frame as the still base, put the video layer above it, and mask the video so only the region that should move is visible. Because the static 95 per cent of the frame is identical between frames, every codec compresses it to nearly nothing: a cinemagraph is often smaller than a still-plus-video would suggest, and far more striking than a full-motion loop.\n\nFree path: shoot on a phone on a tripod or propped against a book, then GIMP with GAP, Krita's animation workspace, or Blender's video sequencer, all of which will hold a masked layer over a clip. DaVinci Resolve's free edition does it comfortably.\n\n## The accessibility rule that is also a legal one in places\n\nAnything that flashes more than three times per second can trigger a seizure. This is not a style preference; it is in the Web Content Accessibility Guidelines and it is referenced by accessibility law in several countries.\n\nGive any autoplaying loop longer than about five seconds a way to stop it, and never build strobing or rapidly inverting animation. If a client asks for one, say why not.\n\nToday: take any GIF you have, run the ffmpeg command above, and compare the two file sizes. The ratio is usually between ten and twenty to one, and it is the clearest argument you will ever have with somebody who wants a GIF."},"check":{"question":"A team replaces a 4 MB product GIF with an MP4 in a video element carrying autoplay, loop and playsinline. On desktop it plays; on phones nothing happens at all. What is missing?","options":[{"text":"The faststart flag, without which a mobile browser waits for the entire file before it can begin decoding the first frame.","correct":false,"tempting":"Names a real encoding option that affects how soon playback starts, not whether autoplay is permitted."},{"text":"A WebM source, because mobile browsers will not autoplay H.264 without a royalty-free fallback available.","correct":false,"tempting":"Invents a codec licensing rule; H.264 is hardware-decoded on phones and plays fine when autoplay is allowed."},{"text":"The muted attribute, which mobile browsers require before they will autoplay anything.","correct":true},{"text":"Explicit width and height attributes, since a video with no reserved space is skipped during layout on small screens.","correct":false,"tempting":"Describes a layout-shift problem, which affects how the page settles rather than whether the video starts."}]},"prev":{"slug":"webp-avif-and-jpeg-xl","title":"The formats that replaced JPEG, and the one that might","url":"https://addaly.com/learn/image-editing/webp-avif-and-jpeg-xl"},"next":{"slug":"metadata-that-should-survive","title":"The fields that say who made it, and which platforms keep them","url":"https://addaly.com/learn/image-editing/metadata-that-should-survive"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'GIF is a 1987 format and you are probably still exporting one', in Editing an Image. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/image-editing/when-the-image-has-to-move (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"GIF is a 1987 format and you are probably still exporting one","courseTitle":"Editing an Image","module":{"index":8,"slug":"out-of-the-editor","title":"Out of the editor: size, sharpness and the delivered file"},"answer":null,"keyIdea":"GIF costs ten to twenty times what the same motion costs as video because it stores 256 dithered colours per frame with no motion compensation, so deliver MP4 or WebM with muted autoplay, or animated WebP where an image tag is required, and keep GIF only for platforms that accept nothing else.","hero":{"kind":"plate","image":null,"alt":null,"caption":null},"blocks":[{"t":"h2","id":"why-the-animated-gif-is-so-large","runs":[{"text":"Why the animated GIF is so large"}]},{"t":"p","runs":[{"text":"GIF was designed in 1987 for dial-up bulletin boards, and two of its design decisions are why a three-second clip becomes a four-megabyte file."}]},{"t":"p","runs":[{"text":"It has 256 colours per frame.","b":true},{"text":" Every frame is an index into a small palette. A photograph has far more than 256 distinct colours, so the encoder must either post it to the nearest palette entry (producing visible banding) or "},{"text":"dither","b":true},{"text":", scattering pixels of two palette colours to fake a third. Dithering looks acceptable and it is catastrophic for file size, because it replaces smooth areas that would have compressed to nothing with high-frequency noise that compresses to almost nothing saved."}]},{"t":"p","runs":[{"text":"It has no motion compensation.","b":true},{"text":" Modern video codecs describe a frame as "},{"text":"this block moved eleven pixels left","i":true},{"text":". GIF can skip unchanged regions between frames and that is all. Pan the camera and every pixel changes, so every frame is stored nearly in full."}]},{"t":"p","runs":[{"text":"The result, for a typical 3-second 800-pixel clip: GIF around 4 MB, the same clip as H.264 MP4 around 250 KB. Sixteen times the data for a worse picture."}]},{"t":"h2","id":"the-four-things-you-can-deliver-instead","runs":[{"text":"The four things you can deliver instead"}]},{"t":"ul","items":[[{"text":"MP4 / H.264 video.","b":true},{"text":" Smallest by a wide margin, full colour, hardware-decoded so it costs almost no battery. Use it for anything longer than about a second or with real motion."}],[{"text":"WebM / VP9 or AV1.","b":true},{"text":" Smaller again, supports real alpha transparency, which MP4 effectively does not. This is how a transparent animated logo gets onto a page."}],[{"text":"Animated WebP.","b":true},{"text":" Full colour, alpha, and roughly 20 to 40 per cent the size of the equivalent GIF. Supported by current browsers. Convenient because it is still an image, so it drops into an "},{"text":"","code":true},{"text":" tag with no player."}],[{"text":"APNG.","b":true},{"text":" Full colour, proper alpha, lossless. Larger than animated WebP but the right answer for pixel-exact UI animation and small loops where lossy compression would show."}]]},{"t":"h2","id":"making-a-video-behave-like-a-gif","runs":[{"text":"Making a video behave like a GIF"}]},{"t":"p","runs":[{"text":"The reason people reach for GIF is that it plays by itself. A video can do the same:"}]},{"t":"code","lang":"html","label":"HTML","text":""},{"t":"p","runs":[{"text":"All four attributes are load-bearing. "},{"text":"muted","code":true},{"text":" is required or mobile browsers refuse to autoplay at all. "},{"text":"playsinline","code":true},{"text":" stops iOS taking it fullscreen. "},{"text":"loop","code":true},{"text":" replaces the GIF’s loop flag. "},{"text":"autoplay","code":true},{"text":" without "},{"text":"muted","code":true},{"text":" silently does nothing, which is the commonest reason a developer says the video does not work."}]},{"t":"p","runs":[{"text":"Conversion, free, one line:"}]},{"t":"code","lang":"bash","label":"Bash","text":"ffmpeg -i in.gif -movflags faststart -pix_fmt yuv420p \\\n -vf \"scale=trunc(iw/2)*2:trunc(ih/2)*2\" out.mp4"},{"t":"p","runs":[{"text":"The "},{"text":"scale","code":true},{"text":" filter is there because H.264 requires even dimensions and a 801-pixel GIF will otherwise fail with an unhelpful error. "},{"text":"faststart","code":true},{"text":" moves the index to the front of the file so playback can begin before the whole thing arrives."}]},{"t":"h2","id":"when-gif-is-still-the-answer","runs":[{"text":"When GIF is still the answer"}]},{"t":"p","runs":[{"text":"Honest cases remain, and they are all about where the file is going rather than what is in it."}]},{"t":"p","runs":[{"text":"Messaging apps, older email clients, some chat platforms and a number of content management systems accept an image and will not accept a video. A GIF plays there; an MP4 becomes an attachment nobody opens. Platform behaviour, not technical merit, is the reason."}]},{"t":"p","runs":[{"text":"If you must ship one, cut the cost deliberately: reduce to 480 pixels wide, drop to 12 or 15 frames per second, keep it under two seconds, and use "},{"text":"gifsicle -O3 --lossy=80","code":true},{"text":" or "},{"text":"gifski","code":true},{"text":", which builds a far better palette per frame than most exporters. A disciplined GIF is 600 KB rather than 4 MB."}]},{"t":"h2","id":"cinemagraphs-which-are-a-raster-editing-job","runs":[{"text":"Cinemagraphs, which are a raster editing job"}]},{"t":"p","runs":[{"text":"The most useful moving image an image editor makes is the one where almost nothing moves: steam rising from a cup in an otherwise frozen photograph, a single flag moving, the rest still."}]},{"t":"p","runs":[{"text":"The construction is exactly the mask work from module three, applied to time. Take a locked-off clip on a tripod, pick one frame as the still base, put the video layer above it, and mask the video so only the region that should move is visible. Because the static 95 per cent of the frame is identical between frames, every codec compresses it to nearly nothing: a cinemagraph is often smaller than a still-plus-video would suggest, and far more striking than a full-motion loop."}]},{"t":"p","runs":[{"text":"Free path: shoot on a phone on a tripod or propped against a book, then GIMP with GAP, Krita’s animation workspace, or Blender’s video sequencer, all of which will hold a masked layer over a clip. DaVinci Resolve’s free edition does it comfortably."}]},{"t":"h2","id":"the-accessibility-rule-that-is-also-a-legal-one-in-places","runs":[{"text":"The accessibility rule that is also a legal one in places"}]},{"t":"p","runs":[{"text":"Anything that flashes more than three times per second can trigger a seizure. This is not a style preference; it is in the Web Content Accessibility Guidelines and it is referenced by accessibility law in several countries."}]},{"t":"p","runs":[{"text":"Give any autoplaying loop longer than about five seconds a way to stop it, and never build strobing or rapidly inverting animation. If a client asks for one, say why not."}]},{"t":"p","runs":[{"text":"Today: take any GIF you have, run the ffmpeg command above, and compare the two file sizes. The ratio is usually between ten and twenty to one, and it is the clearest argument you will ever have with somebody who wants a GIF."}]}],"check":{"question":[{"text":"A team replaces a 4 MB product GIF with an MP4 in a video element carrying autoplay, loop and playsinline. On desktop it plays; on phones nothing happens at all. What is missing?"}],"options":[{"text":[{"text":"The faststart flag, without which a mobile browser waits for the entire file before it can begin decoding the first frame."}],"correct":false,"tempting":[{"text":"Names a real encoding option that affects how soon playback starts, not whether autoplay is permitted."}]},{"text":[{"text":"A WebM source, because mobile browsers will not autoplay H.264 without a royalty-free fallback available."}],"correct":false,"tempting":[{"text":"Invents a codec licensing rule; H.264 is hardware-decoded on phones and plays fine when autoplay is allowed."}]},{"text":[{"text":"The muted attribute, which mobile browsers require before they will autoplay anything."}],"correct":true,"tempting":null},{"text":[{"text":"Explicit width and height attributes, since a video with no reserved space is skipped during layout on small screens."}],"correct":false,"tempting":[{"text":"Describes a layout-shift problem, which affects how the page settles rather than whether the video starts."}]}],"order":[0,3,2,1],"why":null},"prev":{"slug":"webp-avif-and-jpeg-xl","title":"The formats that replaced JPEG, and the one that might","minutes":10},"next":{"slug":"metadata-that-should-survive","title":"The fields that say who made it, and which platforms keep them","minutes":8}}}