Gif file size reducer8/15/2023 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. You can also use this tool to resize animated WebP, APNG, FLIF, and MNG files without losing animation, and any other common image type.At Marmelab, we are convinced that we can use digital innovation to make the world a better place. You can select the action to perform if the aspect ratio of the source image and your chosen size does not match - center and crop the image, stretch the image to fit, or force the original aspect ratio. Gifsicle is usually the fastest tool and produces smaller files, but is designed for speed, not quality. Try different resize methods if you are not satisfied with the result. Some gifs may need the "coalesce" option (which removes all optimizations from frames) if other methods fail and the output image is flickering or has strange artifacts, but it may significantly increase file size and is very slow. GIF animation resizing is sometimes tricky, and you will probably have to choose between a smaller file size or image quality. Useful when you need to reduce GIF size or fit the image in specific dimensions. Ezgif's online image resizer will resize, crop, or flip animated gifs and other images, with the same quality and speed as professional software, without the need to buy and install anything.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |