Uploading GIFs and Navigating Frames

Supported Files

The uploader accepts:

image/gif

GIF Ops is designed specifically for GIF files.

It does not currently implement an input workflow for MP4, WebM, APNG, or other video formats.

Upload Methods

File Picker

Select a GIF using the file input in the Project panel.

Drag and Drop

Drag a GIF from your device and drop it into the designated area.

The drop zone changes its appearance while a file is being dragged over it.

The implementation checks that dropped files have the MIME type image/gif.

GIF Decoding

The application uses the WebCodecs ImageDecoder API.

Internally, GIF Ops:

Reads the uploaded file into an ArrayBuffer.
Constructs an ImageDecoder with type: 'image/gif'.
Reads the available animation track.
Determines the frame count.
Decodes each frame.
Draws frames into individual canvases.
Records each frame's delay.

The original dimensions become the working canvas dimensions.

Browser Requirements

If ImageDecoder is not available, GIF Ops displays:

Your browser lacks WebCodecs ImageDecoder. Use a current Chromium/Edge.

Use a supported browser to access the frame editor.

Frame Metadata

After decoding, the Preview panel displays information such as:

36 frames · 640×360

This indicates:

total frame count
image width
image height

Frame Timeline

The timeline contains a thumbnail for each decoded frame.

Each thumbnail is numbered starting at 1.

For example:

1  2  3  4  5  6  7  8

Click a thumbnail to select the corresponding frame.

Selecting a Frame

When you select a frame, GIF Ops:

stops playback
changes the selected frame
loads that frame's text settings
updates the frame indicator
updates the main preview

The frame indicator uses a format similar to:

Frame 5 / 36

Per-Frame Settings

Every frame has an independent settings object.

That object contains:

text
font family
font size
text alignment
text color
text opacity
border style
border color
border opacity
text anchor coordinates
X and Y offsets

This allows captions to vary throughout the GIF.

Animation Timing

The decoder reads timing information for each frame.

When a decoded duration is missing or below 10 milliseconds, GIF Ops substitutes 100 milliseconds.

Consequently, unusual or extremely short original delays may be normalized during decoding.

Preview Dimensions

The editor uses the original GIF dimensions for its drawing canvas.

The canvas is visually scaled to fit the interface when necessary.

Dragging on the preview converts pointer coordinates back into the original canvas coordinate system.

Large GIFs

Large GIFs may require significant browser memory because GIF Ops decodes frames into individual canvases.

Memory usage depends on:

width
height
frame count
browser implementation
temporary rendering and encoding resources

For example, a decoded 800×600 RGBA frame requires approximately 1.92 MB of raw pixel storage before additional browser overhead.

A GIF containing hundreds of such frames may consume considerable memory.

Current Limitations

GIF Ops does not currently provide:

frame deletion
frame insertion
frame reordering
image cropping
animation resizing
frame-delay editing controls

The timeline is intended for frame selection and frame-specific text editing.

Tips

Start with a relatively small GIF for faster processing.
Use the timeline to inspect captions on individual frames.
Pause playback before making precise edits.
Export JSON settings before experimenting with major styling changes.

Note: The application decodes individual frames and re-encodes the final GIF. It does not directly edit the original GIF's compressed byte stream.