Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
hi everyone, just wanted to ask a question and im really hoping someone knows the answer,
I usually use animated gifs in my product descriptions and image with text bars, however ive noticed they do have dramatic impact on site speed. And when i looked on a competitors site i saw their gifs, which were longer and higher quality than mine, are SMALLER in file size! (they were around/less than 1MB) and did not effect site speed! Im still making my store but i'm really hoping someone knows how to reduce file size, as i have reduced FPS, resolution, compression, ive tried everything that i know!
Thanks alot!
Hello @Chapee452,
I am Gina from flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot.
Reducing the file size of your animated GIFs can be challenging, but there are a few things you can try to help reduce their size and improve your site speed.
Here are some suggestions.
1. Reduce the size of the image
The larger the image size, the larger the file size will be. Try to reduce the image size to the smallest possible dimensions that will still look good on your site.
2. Optimize the color palette
Reducing the number of colors in your GIF can also help reduce its size. You can try using a tool like EZGIF to optimize your color palette and reduce the file size.
3. Reduce the number of frames
Reducing the number of frames in your GIF can also help reduce its size. You can try reducing the FPS (frames per second) or removing unnecessary frames from your animation.
4. Use compression
Compression can also help reduce the file size of your GIFs. There are several online tools like compressor.io that can help you compress your GIFs without losing too much quality.
5. Use a different file format
If reducing the file size of your GIF is still proving difficult, consider using a different file format like PNG or JPEG. While these formats may not be able to provide animation, they can offer high-quality images with smaller file sizes.
6. Trim the animation
Sometimes the start and end frames of an animation can be unnecessary and add to the file size. You can use a GIF editor like GIMP or Photoshop to trim the animation to remove these unnecessary frames.
7. Use a lower quality setting
If reducing the resolution or FPS is not enough to reduce the file size, you can try lowering the quality setting of your GIF. However, keep in mind that this may also reduce the overall visual quality of your animation.
8. Host your GIFs on a third-party platform
If you're still having trouble reducing the file size of your GIFs, you can try hosting them on a third-party platform like Imgur. These platforms specialize in hosting and optimizing GIFs for faster loading times.
9. Consider using video instead
If your GIFs are particularly large, you might want to consider using a video format instead. Videos can offer higher quality with smaller file sizes than GIFs. You can upload your videos to a platform like YouTube or Vimeo and embed them on your website.
Hopefully, these suggestions will help you reduce the file size of your animated GIFs and improve your site speed.
Gina
Please share the store link.
thank you so much for sharing
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025