CMS-oriented GIF: align editor preview, public template, and media derivatives
`cms-jpg-gif` exists because many editorial stacks still whitelist GIF while rejecting short videos, stripping WebP, or re-encoding uploads through an optimizer that only keeps the first frame. The failure mode is three-way drift: the WYSIWYG iframe width differs from the public template, `object-fit` crops captions, and the media library thumbnail pipeline turns animations into blurry stills. Lock long-edge, frame delay, loop policy, and KB caps per channel, then compare draft preview, list excerpt, and article body on mobile. If the CMS auto-builds responsive derivatives, confirm GIFs are not silently flattened.
JPG to GIF for CMS: read upload rules first, then diff draft vs anonymous article views
- Read the media library limits and whether assets pass through an image CDN; upload JPGs only after naming includes channel plus date to avoid accidental overwrites of evergreen files.
- Validate anonymously and as an editor: ensure lazy-load wrappers do not blur animated pixels forever, and that `img` tags—not CSS backgrounds—carry the GIF when motion is required.
- Store the attachment ID and hash on the release ticket, purge caches, and train authors not to hand-edit widths that trigger non-integer scaling blur.
JPG to GIF (CMS) FAQ
Upload succeeds in the CMS but the live article shows a static image—where do GIF animations usually die?
Inspect the final URL and response headers: many “performance” layers transcode GIF to JPEG previews. Themes that rely on `background-image` or picture elements without GIF sources can also drop motion. Whitelist GIF on the optimizer or bypass it for animated assets, and verify NETSCAPE extension blocks survive the round trip.
Rich text saves fine but animation disappears—sanitizer or image CDN?
Diff the saved HTML, final URL, and `Content-Type`; many optimizers flatten GIF to a JPEG preview. Whitelist animated GIF on the resizing tier or bypass the transformer. Also confirm the theme uses `<img>` rather than CSS backgrounds that cannot animate.
Editors keep overwriting `cover.gif` and breaking old campaigns—what naming discipline fixes it?
Use fingerprinted filenames or monotonic media IDs in the CMS; bind articles to IDs, not friendly paths. Rollbacks should point to prior object versions instead of hoping browser caches cooperate.
List thumbnails look awful because the CMS derivative pipeline grabs frame zero mid-blur—what now?
Upload a dedicated still poster for list contexts or teach the derivative job to sample a later frame. Document that list tiles are not full-fidelity review surfaces so authors stop rejecting assets based only on the grid.
We need skeleton placeholders but worry about CLS when lazy-loading GIFs—any pattern?
Hard-code width/height attributes or aspect-ratio boxes before swapping in the animated source; use a neutral still as the lazy placeholder. Track CLS in RUM and downgrade animated tiles if vitals regress.