Here’s an easy way to remove the background of an image if the background is a solid color.
Let’s face it. The biggest loads and cause for slow performance of most websites comes from images. While there are many projects that offer automated ways to optimize and process CSS like Sass and Less, these optimizations result in a much smaller performance gain compared to what you get from optimized images. The problem with optimizing images is finding a balance between optimization and maintainability. You want to use sprites to minimize the number of requests but you want to reuse images in multiple pages to simplify maintenance (not have multiple copies of the same image). Assuming that most people view 2 or 3 pages per website during any visit, following is a proposal for an image optimization algorithm. This algorithm would generate two types of image sprites as follows:
If a web page is at the URL www.somedomain.com/products/computers/index.html, then the sprite for that page would have the file name products-computers.png and/or products-computers.jpg (slashes are converted into dashes). [..]
Images in websites help break up long, boring passages of text and make websites look nice. But, they’re also the heaviest resources you can include in your site. Let’s take the home page of techcrunch.com as an example. With the Google Chrome inspector open to the Network tab and the Images label selected, we load the page and scroll all the way to the bottom (because images are load dynamically as they appear in the viewport). The result in 6.5 MB out of a total of 7.3 MB of data to load the home page came from images alone. That’s a whopping 89% of the page load. Because the images are loaded dynamically as needed, techcrunch.com doesn’t load too slowly. However, there are still many websites that are image heavy and don’t do a good job at optimization or caching at all.