A campaign figure on your homepage reads "Until September 30." The deadline was extended by one month, so you only want to replace the date. When the team member opens the image, the extension is .gif, and the text has already been converted into artwork. You write an email to the agency, wait for a quote, spend two business days, and two numbers change.
If this happens four times a year, the annual expenses and waiting time become impossible to ignore. Furthermore, this is not a case of unfair billing by the agency. Because it was delivered in an uneditable format, remaking it is the only way to fix it—it is as simple as that.
The dividing line is not how motion is crafted, but the format of the deliverables.
"Animated images" flatten motion entirely into a picture
GIFs and MP4s bake the final appearance frame by frame. Text, lines, and colors are all converted into arrays of pixels. The original text no longer exists inside the file.
Replacing a date therefore becomes a full reproduction rather than an image edit. For an agency possessing the source files, it is a matter of minutes, but reaching those few minutes requires back-and-forth communication for requests, reviews, and billing. In addition, this format brings operational side effects:
- Heavy. Even for identical illustration content, it is common for a GIF to be dozens of times the file size of an SVG. This directly harms homepage load speeds.
- Blurry text. On high-resolution displays, text in raster images shows blurred contours. This stands out most on text intended to be read, such as logos and pricing tables.
- Inaccessible to search engines and screen readers. Text within the figure is treated as non-existent unless transcribed into alt text.
Each format dictates what can be edited in-house
In practice, there are four choices for deliverable formats of animated figures. Whichever you choose determines what your internal team can touch later.
| Format | Can text be edited later? | Animates when embedded with <img>? | Requirements for execution |
|---|---|---|---|
| GIF / MP4 | Not possible (reproduction required) | Animates | None |
| Lottie（JSON） | Partially possible, but requires dedicated tools | Does not animate | JavaScript library |
| SVG + CSS animation | Possible (retained as text) | Animates | None |
| SVG + SMIL | Possible | Animates | None |
For clients ordering assets, the premier choice is SVG. Because text remains actual text in an SVG, replacing a date or company name requires nothing more than opening it in a text editor and rewriting it. If CSS animations are written inside the SVG file, it animates even when embedded as <img src="figure.svg">. Since there is no need to load JavaScript, it will not break even when inserted directly into CMS body fields.
There is also the longstanding SMIL specification, which is similarly self-contained within SVG and shares the advantage of animating within <img>. However, SMIL went through an extended period of uncertain future support, so choosing CSS animation is the safer path when building anew. There is no need to rush into replacing existing site SVGs that run on SMIL.
While Lottie is compelling for intricate illustration animations, it requires dedicated authoring tools and runtime libraries. It is poorly suited for the requirement of "making light edits in-house," so evaluate first whether that level of expression is genuinely necessary. For motion linked to scrolling, the scope of what can be implemented without JavaScript using CSS scroll-driven animations is also expanding.
A single line to add to purchase orders
While this looks like a technical issue, ordering clients only need to master a single line:
Figures containing motion shall be delivered in a format where text remains editable as text (SVG), accompanied by editable source files.
Having this single line alone prevents the majority of "cannot edit later" scenarios. In addition, defining the following two points will reduce future rework:
- What scope is intended for in-house editing? Will it be text only, or will colors and layouts also be modified? Direct editing of SVG suffices for text alone, but touching layouts requires deciding the sharing scope for original design files (such as Figma).
- Storage location of original source files. If nobody knows where the deliverable package is stored, edits are impossible regardless of format. Assembling delivery documentation is covered in Four Types of Documents to Receive upon Delivery.
For production agencies, this instruction is not an unusual request. Figures and icons are predominantly created as vector assets to begin with, meaning generating a GIF is actually a conversion performed in the final stage. Without explicit instructions, they simply export in the most convenient format; there is no malicious intent.
Two things to verify on the day of delivery
Whether a delivered SVG is genuinely "editable" can be verified on the very day it arrives.
First: Drag and open the SVG file in a browser, and try selecting the text inside the figure with your mouse. If selectable, it is embedded as text. If not, it has been converted to paths (= flattened into artwork), requiring graphic design tools to edit. Converting to paths can sometimes be an intentional choice for font-embedding reasons, so in that case, confirm "why it was converted to paths" and "the procedure for updating text."
Second: Embed it on an actual page, enable your OS's "Reduce Motion" setting, and check the display. If the motion stops or at least becomes subdued, consideration for prefers-reduced-motion has been implemented. Neglecting this leaves pages unreadable for users prone to motion sickness. Adding accessibility requirements after delivery is expensive, making acceptance testing your final opportunity to verify.
What to do next
First, compile an inventory of animated images used across your site. Assets with extensions like .gif and .mp4 represent locations that will require individual orders in the future. In most cases, only a few of those actually require text changes, so there is no need to rebuild everything.
Next, insert the aforementioned line into your next estimate request for production or site revisions. Because this specification does not incur additional fees, it can be applied starting with your next build.
GleamHub assists with website redesigns, planning deliverables that incorporate animated figures, and organizing maintainable delivery formats through our website production and redesign consultations. Because the approach varies based on website scale and maintenance workflows, please reach out for personalized guidance. Get started via Contact Us.
