At this moment, we are aware of the benefits of using media formats such as WebP and WebM. But when you start implementing them, it can be quite a headache to maintain multiple copies of the same file, in different formats.
For example, if you upload a PNG or JPG, and you want to use WebP on supported browsers, you will have to store a copy of the same file on your server. This can be a burden as it takes an extra step to convert the file on upload, and take up storage space as you are saving duplicate files.
You can solve this problem by utilizing the power of SaaS applications such as Cloudinary and Gumlet. These services provide you with the ability to convert files dynamically, on the fly. All you have to do is upload the image/video in its original format, and when you request the image/video, add a property to the file URL to receive the optimized version on the fly. Furthermore, these services automatically cache these files, which means that once accessed from a region, if anyone else wants to access the same file on the same format, the file from cache will be delivered. This makes things even faster.
This is mainly possible thanks to the inbuilt CDNs to make sure your content is delivered as quickly as possible, across multiple regions.
If you do not want to spend a few bucks on these services, you can make your own version of this application with the help of Firebase. Although it would not be totally free, for a smaller website, you can utilize the free quota. Here is a great article by Denis regarding this.