Making animated images smaller for the web
A designer sent me a 3MB gif to put on a website. 🤯
No way, I said. We have to do something about this. One image that big — even a side image — will make the site slow for everyone.
There is a simple way to fix it.
Last changed: 25. 2. 2026
If you do not want to read, I made a short video (under 4 minutes) showing every step.
How to make a moving image (gif) smaller
Step 1: Canva
- Make a new design in Canva with the right size (for example 300 x 200 pixels)
- Put your gif into the design, then make it the right size and direction
- Download it as a gif with a clear (see-through) background
- This step alone will make the file go from 3 MB down to about 1 MB
Step 2: Change gif to avif
- Go to https://ezgif.com/
- Put in your gif from Canva
- Click "Upload Files" and wait
- Select "Make avif"
- Download the new file
Important: The file will come with the ending .avifs — change it to .avif, or WordPress will not know what to do with it.
Step 3: Check that your server can work with avif
- In your WordPress admin, go to "Site Health" > "Info" > "Media handling"
- Check that ImageMagick shows support for the avif format
- If it does not, you will need to turn on ImageMagick support on your server. On low-cost shared hosting, you may need to write to the support team.
The result
- First gif: 3.6 MB
- After Canva: about 500 KB
- Final avif: only 200 KB
The moving picture is still there. The clear background is still there. The designer is happy. I am happy. And most of all — the people who visit the site are happy.
Note: why go through Canva? Other online tools for making images smaller will destroy the clear background. At least, I have not found one that does not.