When that happens, I will update this article with newer tricks as I learn them. As time goes, we will surely find out more ways to shave off those extra kilobytes without compromising the quality. Image compression and performance optimization is ongoing thing. If you want to check out my project in action and how the images perform, visit /facebook Final Thoughts Now you must be looking at the picture above and thinking, why the weppy images look pixelated? I don’t know why it is displaying like this on my computer, but when I open both icons side by side, I can say they look fine,īy the way, all these icons you see are part of my Linkedin and Facebook reaction poll generator. After resizing all the icons into 250×250 png images, the total file size for the seven icons was 155 kB.Īfter compressing the PNGs with TinyPNG service, I ended up with 50 kB file size for all of them.įinally, when I converted them to webp file format, I ended up with 35 kB file size, that leaves 5 kB per image icon. I started with original reaction icons that I downloaded from the internet. Use webp/avif images for faster loading but also have a fallback to png/jpeg files using a tag.Īfter adding the WEBPs, I can say my images are loading much quicker than PNGs. This component will take the webp image as the src and the png as the fallback image. The browser will pick the image that it supports. Using the tag we can add both webp and png files. Use Webp and PNG together with Fallbacks It’s a good idea to serve webp but also fall back to the jpg/pngs. You should keep in mind that, weppy and avif are newer file formats and not available in older browsers. The weppy versions helped cut down around 20% more file sizes from my already compressed PNG files. So I used an online converter to convert my existing PNG files to webp. There is a weppy converter tool called cwebp that I downloaded and installed into my computer, but I was too lazy to compress them in CLI. What I did was to replace all images with their webp counterparts. In my ReactionPoll tool, I used weppy images to further compress my images. Webp (weppy) is a new fast image format developed by Google. Use Webp/Avif Images for Even Better Compression If you want to really up your compression game, you need to find an even better image format: webp and avif. I saw a 68% savings when compressing my reaction icon pngs using TinyPNG.Ĭompressed JPG and PNGs can only take you so far. Usually optimized PNG and JPGs have a small file size already, but when I run these images against this free tool, I get surprised that it squeezes up even more. TinyPNG is an online tool I use to compress images. To further compress these source images, we have to optimize them ourselves, Compress Your Source Images Using TinyPNG If your image is under 10 kB, Create React App will turn them into base64 data strings, making them load instantly! I Never Thought I Would Become A Programmer One Dayīest Practices on How to Compress Images For Reactjs.What Steve Jobs’ First iPhone Taught Me About Product Development.Things I Learned While Building a Personal Project.Deleting an Item From MongoDB Mongoose By User Permission.Thoughts After Building a Twitter Clone in Node.js.Node.js is like My Wife and I am Getting Bored with Her :(.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |