On my website I’d like the collection gallery to be made out of gifs instead of imagery (ideally mp4, but think that’s perhaps even less likely). I’m not sure if that’s possible. Definitely not under 300kb. So I was wondering if there’s a way around it, to increase that image size restriction? My gallery only includes 3 case studies so I wouldn’t mind slowing down the website slightly. Is it something I can achieve perhaps tweaking that limit on custom code to 1.5MB?
1 Like
You’ve referenced quite a few different things in you message.
- GIFs store fine in assets, 4MB max per image
- MP4s are not supported in assets, you can host them elsewhere like Vidzflow or Bunnystream and reference them.
- Custom code is for storing code, not for storing media, so you’d use it to store e.g. a vdeo player embed which is small, It stores up to 50,000 characters of code
- None of the limits can be directly increased, if you had a use case for something larger the best approach is typically off-hosting it and referencing it from your Webflow site’s HTML.
1 Like
This is what I mean. All imagery from the collection seems to have a size limit so I can only add flat imagery to get a good resolution for that size. I wanted to have gifs (or mp4s) there instead.
What I meant by custom code is if theres a way I would overwrite that limitation.
1 Like
You haven’t shared your readonly project link, but most likely you have a 300kb limit set on this field. Check your field settings and remove that limit if you want- it’s normally 4MB.
That said, 300kb is plenty if you’re optimizing your images properly as WEBP or AVIF.
In an image field you can store GIF, PNG, JPEG, WEBP or AVIF. Or for vector images, SVG.
Webflow doesn’t store vdeo formats like MP4s in assets.
2 Likes
Found in the settings! thank you
2 Likes
Really nothing more I can add here.
Edit your collection, check the field settings for that field. Remove that limit if you want.
Do this if you’re still confused.
2 Likes
Webflow has a 4MB file size limit for GIFs and MP4s in collections. You can host larger files externally (like on Cloudinary) and embed them in your project using custom code. This lets you display larger media without hitting the file size limit. Gif file size too large?
1 Like
Hii,
I understand you want to use GIFs or MP4s in your collection gallery, but face limitations with file sizes and image restrictions. While it’s true that large files can slow down your website, there are a few things you can do to manage it effectively without compromising the performance too much.
Using GIFs or MP4s You can indeed use GIFs in your gallery, and it’s possible to use MP4 files too. MP4s are typically more compressed and could provide better quality while maintaining a smaller file size. However, for both formats, it’s essential to strike a balance between quality and file size to avoid performance issues.
Increasing the Image Size Limit To go beyond the 300kb limit, you can upload larger files, but there’s no direct way to tweak image size restriction for galleries. Instead, you could host the larger files externally in a CDN or hosting provider and then embed them into your project using custom code. This would allow you to bypass the file upload limit but still have control over your files’ storage and access.
Optimizing Files Tools like Image Optimizer Pro or TinyPNG can help reduce the file sizes of GIFs and MP4s without losing much quality. For videos, using MP4 over GIF can save a lot of space without compromising user experience.
Performance Considerations If you don’t mind slowing down the site a bit, hosting larger files is fine for small galleries like yours, but always keep an eye on how the load times affect the user experience. Since you have just three case studies, this shouldn’t impact things too much, but it’s good to regularly test your page’s speed.
If you need further support with optimizing or managing your media, You can also look into the Website Speedy App. It helps you optimize images, video files, and overall site performance, even with larger file sizes.