It took me a while to notice that GIFs uploaded here weren't working, mainly because legacy content from the old WordPress days seemed to be fine. Well, during the whole content migration/reshuffle I've been doing I realised that those old GIFs were working because they were using external hosting, which I'd prefer to move away from to prevent resource rot. However, when I reuploaded them to Craft... I ended up with static images. Woops!
The tricky part was working out exactly where in the upload chain the problem was occurring. I had assumed it was during upload, but figured one way to test that would be to download an already uploaded file and run it locally, so that's what I did. Weirdly, the file animated fine. Okay, so it wasn't during upload then, but possibly during build? Except CMS-hosted files are ignored by Gatsby and Netlify, being served at runtime just like any other hosted image. Maybe it was my implementation on the frontend? Is there some weird browser behaviour when you're using <figure> or <picture> instead of <img> maybe? The short answer is nope, they all work the same.
That sent me back to the initial theory and some further testing showed that the conversion was happening on upload, just somehow non-destructively so you can retrieve the animation by saving elsewhere. I still don't really understand that part but it was a massive red herring 😅 Now at least I knew where to look, which allowed me to find a few useful questions on Stack Overflow and GitHub. The answer? ImageMagick. Basically, Craft piggybacks on either GD or ImageMagick for reading/writing image files and it'll pick the best one for you based on your server config. The issue is that GD can't cope with GIFs, effectively flattening them down to static files, so if you want to be able to upload animated images you need to force Craft to use ImageMagick instead.
I use Krystal (formerly Smart Hosting) for my CMS hosting and they have ImageMagick preinstalled on all plans, so Craft should have been using it correctly. But when I actually took a look at my php.ini file I found imagick, the PHP ImageMagick helper library, was disabled 🤦♂️ Having enabled imagick[1], the final step was to force Craft to override its previous behaviour, which you do (as with most things in Craft) in the general.php config file. All you have to add is the following line to your main profile[2]:
'imageDriver' => 'imagick',
That will force Craft to prioritise ImageMagick over GD for uploads moving forward. A few quick image replacements later at GIFs are now working perfectly:
