![]() ![]() (2012)īut going down to a lossy quality of 80, you can see the differences between PNG and WEBP. It’s worth noting that when it went from the original PNG to WEBP with lossy compression at a quality of 100, there was little to no quality lost in visual fidelity (yet there remained a file size savings). This illustrates the broader trend I saw across many app icons: anything skeuomorphic in nature or containing a lot of visual texture lost detail. While its size changed drastically, it wasn’t without a noticeable loss in visual fidelity. ![]() However, the older skeuomorphic icon was different. Here’s how the 1Password icons changed in file size: (2020) The more recent flat icons compress really well under the WEBP lossy compression, losing hardly any noticeable visual fidelity while shrinking drastically in size. Here’s a sample of what I found in terms of file size: IconġPassword has a number of icon variations through the years, following the general aesthetic trend in iOS, from skeuomorphic to flat in appearance. But when you start to get into icons with lots of visual detail and texture, WEBP struggles to maintain fidelity to the source PNG artwork. I found that, for “flat” icons, WEBP trumps PNG easily. How do WEBP images differ from PNG images in terms of visual fidelity and detail when similar compression is used? However, file size isn’t the only important consideration. However, once I turned on lossy compression, the file sizes started to drop drastically. I found it interesting that going from lossless PNG files optimized with imageoptim to lossless WEBP files optimized with imagemin resulted in an increase of overall file size. These were the resulting folder sizes of those 260 images: I then ran them through the imagemin tool three different times, each with a different setting, from lossless compression to lossy compressions at a quality of 100 and 80. Today they are optimized using imageoptim at a lossless compression. In terms of resolution, these are the largest PNGs used on my sites. I took 260 sample PNG images at their largest size of 1024×1024 pixels. Will I be switching to WEBP for my icon gallery sites? I don’t have a definitive answer yet.It’s pretty damn good though, especially with images composed of modern “flat” aesthetics-solid or gradient fill colors, silhouette shapes, etc. Like most technology, WEBP is not a cure all.I found it intriguing to see lossless WEBP images come in at a collectively larger file size than lossless PNGs (which I use today)!.Tldr I picked a random sample of sixty iOS icons and converted them to WEBP to see where the biggest changes (both visually but also in file size) would show up between PNG and WEBP formats. Given the above, I devised a few ways to test whether WEBP would be sufficient to my needs. That is why I serve lossless PNGs today.īut maybe WEBP could meet the same standard of quality I have from today’s PNGs and still save me some bytes? That’s my hope. People come to these sites to admire the design of the icons and it would be difficult to admire and appreciate the quality of something that’s been altered and degraded from its original form. So I’ve been thinking: if I could cut image sizes, say, in half, that would cut my bandwidth usage in half! However, given that the primary focus of these sites is the icons themselves, I need to continue providing high quality icons. The past few months, according to Netlify, I’ve been burning through 150GB or more of traffic per month for these sites-the majority of that being serving images. It does a pretty damn good job of doing lossless minification for the original icon designs. Today I’m serving PNGs which I optimize via the ImageOptim API. Make sure you have both guard and guard-shell in your Gemfile and set up a watcher in your Guardfile for new or edited images: # GemfileĪn interesting side effect to note is that guard will catch the file change when ImageOptim is done compressing and re-open it in ImageOptim and continue this loop untill there’s nothing else ImageOptim can compress out of the image.Now that WEBP is supported across popular modern browsers-looking at you Safari for being late to the party-I’ve been considering serving images in WEBP format across my icon gallery sites. I like to pair the guard-shell gem with ImageOptim to help me keep my project’s image assets compressed and ready for production. With over 150 plugins now available, there’s surely some way that you can use it to optimize your workflow. For the uninitiated, ImageOptim is a great Mac app that uses several well-known image optimization tools to compress images and help keep file sizes down and Guard is “a command line tool to easily handle events on file system modifications.” If you’ve never tried Guard, I’d encourage you to take some time and check it out. ![]()
0 Comments
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |