With some trial and error, we eventually came down to the following options: The second challenge was to find the best set of options to use with FFmpeg. We managed to work around this issue by using another lib, js-ffmpeg, which is clearly not as user-friendly as fluent-ffmpeg, but at least worked in our case. However, we quickly ran into a bug, making it impossible to convert multiple GIF files in a batch. We initially planned to use the fluent-ffmpeg lib, which provides a nice API to call FFmpeg from Node.js, and seemed to be the most popular lib for this purpose. The first challenge was to find the best way to call FFmpeg from Node.js. And, as always with powerful tools, it is not the easiest to use. To do so, we decided to use FFmpeg, a very powerful tool to manipulate videos. Next, we had to convert the GIF files to WebM files. Import Converting GIF To WebM Using FFmpeg Otherwise, the concurrent accesses to the Markdown files would lead to file corruption.įor the tag, we decided to use a template like the one below, which would be used to replace the GIF file inclusion: The difficulty here was to set up the lib to deal with multiple pattern replacement in a single pass, and to avoid returning promises for each file to execute in parallel. We then used a regular expression (yeah, I know! □) to find the GIF files' inclusions. To solve these challenges, we used the replace-in-files lib (which internally uses glob, another great tool!) to quickly replace patterns inside multiple files. Replace the GIF files inclusions with an HTML tag, with the WebM file as source.Find the GIF files inclusions in the Markdown files.Find all the Markdown files in the documentation.Scripting Markdown UpdatesĪt this point, we decided to build a CLI tool to automate the process. Hence, the first challenge was to find a way to automate this process. With 233 Markdown files at the time of writing, this would be a very tedious task to do it manually. However, provided that we manage to convert the videos to WebM, we would still need to update the documentation to use the new videos. by converting them to WebM files, would be a simple way to reduce its carbon footprint. That's why we figured that reducing the size of the video assets of the react-admin documentation, e.g. Experiments with GreenFrame taught us that carbon emissions of websites are correlated with their web performance. However, it is far from being the most efficient format in terms of size.Ī common web performance optimization practice is to replace animated GIFs with video for faster page loads. These videos use the GIF format, as it allows easy embedding and has no video compression artifacts. The documentation includes 87 screencasts at the time of writing. Most visitors come for React Admin documentation, with more than 15k monthly views for the Tutorial page alone. With more than 300k views and almost 50k visitors in the last 30 days, the React Admin website receives a lot of traffic. Reducing Carbon Footprint By Using A Better Video Format We will also explain how we built a CLI tool to make the process easier. In this article, we will explain how we reduced the size of the video assets of the React Admin documentation by 62%! By providing open-source tools like GreenFrame, we want to help developers reduce the carbon footprint of their websites.įollowing this pledge, we also want to reduce the carbon footprint of our own websites. At Marmelab, we are convinced that we can use digital innovation to make the world a better place.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |