The good news is that you do not have to do any particularly hairy transformations with your GIFs to get them to display - you don't have to make them into header files or anything. However, we do have to perform some steps to make them appear nicely on the TFT you're using
- Reduce size to no larger than 320 wide, 240 tall for PyPortal, and 160x128 for PyBadge or PyGamer (check your hardware to see the size you want to target)
- Remove transparent pixels (sometimes called de-optimization) because it slows down our decoding
- Reduce colors so we don't have to work as hard to decode
- Reduce frames if it makes sense to
This GIF viewer isn't good for detailed, high-frame-rate GIFs. Keep it simple and you'll be happy with the results!
Lets show an example GIF conversion so you can see how the process happens.
You can download it via this zip link:
We'll use ezgif.com for these steps, its free and we find it works really well!
Click on Resize
Upload the original GIF and click Upload!
Now its uploaded,
- Set the width and height to be 320 and 240 (you can also set just one, as long as the other is no-greater than the max size)
- Use ImageMagick + coalesce as the resize method. Don't use Gifsicle!
- For the aspect ratio, you can stretch, center or force-aspect.
If you're not sure which one you want, keep going to resize and look at the preview, if you don't like it, change and resize again!
Click resize to get your preview! Check the width is no more than 320, and the height is no more than 240 pixels
You can use the GIF as is, but we found that you can do some optimizations on it to make smaller and faster-running
The first and easiest is color reduction and dithering. The fewer colors we have, the less decompression we have to do. Especially with a cartoony GIF like this, we can set the colors to be 32 and its not terribly noticable
The new GIF has banded colors on the grass but overall is pretty similar!
Another very effective way to reduce the size and increase speed is to remove duplicate frames. Fewer frames means its easier to decode!
Try Remove duplicate frames and start with a Fuzz factor of around 25%, you can preview the GIF to see if you can fuzz higher (more savings but maybe it starts to look stuttery)
Whatever you do, don't add transparency because it will make the file smaller but the decoding bigger!
OK here's our new final GIF: