While developing the latest version of our website, a common theme that we always kept aware of was “Performance”. Performance boils down to many factors from the number of assets, the size of those assets and asset compression where possible to name a few. This compression can even be in your code itself by minifying your source files. Another performance enhancement can be done by optimizing your images for web when saving from an application such as Photoshop.
To date, I’ve always picked and chosen my file formats I save out wisely. Many times I found myself with a design I was happy with and assets I had grown attached to, only to have my jaw drop when I would save them out as .png files from Photoshop and see the expected file size.
Coming to grips, I couldn’t have my cake and eat it too so to speak which was pretty discouraging. Could I not have dynamic, large, alpha channel based .png files that didn’t blow my “performance quota”? I needed to ensure the site ran quickly and also looked good in Google’s eyes for a light loading site. Was this too much to ask? Turns out, it wasn’t!
After one simple google, I can across this amazing gem: http://tinypng.org/
Still a bit doubtful I took it for a test run. It claimed to compress my .png’s in a lossy manner which to my knowledge, wasn’t possible on a .png file format. Boy was I wrong.
Take this image we used on one of our slides on our homepage for instance.
Original File Size saved as a .png with transparency from Photoshop: 280kb
Now look at the same image after running it through Tiny PNG’s service.
File Size saved as a .png with transparency from Tiny PNG: 87kb!!!
Our site had many of these larger, complex .png images which we always feared would be a heavy burden to carry and chalked it up to form out weighing function. Turns out we could have our cake and eat it too! We have definitely bookmarked this gem for our future work flow and you should too!
