Product page hover gifs and how to optimize them?

Technical Q&A
,
1

I have read about gifs being almost impossible to optimize, but I am wondering with videos if I can replicate the same effect my product page currently has. My biggest issue right now is that the gifs are taking too long to load on a first time visit, and I am seeing what other options I have to increase the optimization.

Thanks!!

The website is: openproject.store

2

Videos can replace GIFs. They might provide better performance. Here are some options:

  • MP4/WebM video with autoplay
  • For best performance:
    • Convert GIF to WebM and MP4 formats
    • Lazy load videos
    • Consider preloading critical videos:

Video files are typically 5-10x smaller than equivalent GIFs.