Skip to main content

Creating GIFs for SolidPixels

Tetra's Image widget can display animated GIFs. The display is extremely small, so an animation designed for a phone or browser usually loses detail when reduced. Prepare the source for the display instead of relying on automatic conversion to fix it.

Design at 64×32 from the start​

SolidPixels displays are 64 pixels wide and 32 pixels high. Create every frame at exactly 64×32 whenever possible.

Tetra can resize a larger GIF through the Image widget's width and height properties, but downscaling removes detail and can blur carefully placed pixel art. If resizing is unavoidable, preview the result at its actual display size and use nearest-neighbor scaling in the source editor.

Keep the finished GIF at or below 128 KB​

Keep the finished GIF at 128 KB or less. Larger animations take longer to transfer and leave less room on the device. If an animation is still too large after reducing it to 64×32, optimize it intentionally instead of relying on automatic processing to remove frames.

To reduce an animation without making it muddy:

  • Remove frames that do not materially change the motion.
  • Reduce the number of colors before reducing spatial detail.
  • Crop unused transparent space.
  • Prefer flat colors and deliberate pixel art over gradients or video footage.
  • Remove metadata that is not needed for playback.

Check the final GIF size after optimization, not only the source project size.

Keep the loop around 15 seconds​

A GIF should finish on a frame that transitions cleanly back to its first frame. A visible jump becomes distracting when the animation repeats through an entire rotation slot.

Aim for a total duration of about 15 seconds. If the animation is shorter, repeat it cleanly so the loop does not pause or jump before the display moves to the next app.

Preserve readable timing​

Very short frame delays can produce a large output without creating useful motion on a 64×32 display. Start with fewer, intentional frames and adjust the delay until each important pose remains readable. Tetra preserves an animated GIF's frames, and the Image widget exposes the decoded frame delay through its read-only delay attribute.

Verify the converted output​

Render the complete Tetra app to WebP and inspect that result before publishing. Confirm that:

  • The output is 64×32.
  • The finished GIF remains at or below 128 KB.
  • Text and one-pixel details remain legible at actual size.
  • The last frame returns cleanly to the first.
  • The full animation is around 15 seconds or loops cleanly when shorter.

Was this helpful?