Was going through the site, and found this post started in the drafts folder. While the article was published quite a few months ago, it’s still as valid today.
This is totally right up my alley. We spend so much time optimizing and minimizing JavaScript and CSS (to a lesser extent). Images have been so overlooked. We really need a better compressed, cross-browser format.
Forget JavaScript, It’s Time for Browsers to Speed Up Images
I think I’ve probably posted this before here on Keefr.com, or at least made reference to this. This is a wonderful article for spelling out all the different and most effective ways to speed up your web site:
I’m feeling a bit old, as I started in an era of web design and development where dial-up was the norm, and even high speed Internet was still just starting to take off. We optimized images and code to the fullest. It seems like an art that’s lost on a lot of these whipper snappers!
Just because connections are getting faster, doesn’t mean you should abandon optimization. If anything, the growth of the smartphone has brought some of the optimization techniques back to the forefront for people who otherwise wouldn’t have even considered it.
PNGs have a growing purpose in web site design and development. It used to be that PNGs and their advantageous full alpha channel were poorly supported (or not supported at all) by peoples’ web browsers of choice. Luckily, that’s all but a painful memory these days.
Besides having a full alpha transparency, meaning various levels of opacity are possible, PNGs also have lossless compression like GIFs.
I still opt for JPGs whenever there’s no need for transparency.
But when transparency or the utmost quality is needed, PNGs are the obvious choice. Problem though is they still tend to be big files, especially when compared to a similar JPG file. For me, there are two ways to optimize and minimize file size.
The first is utilizing Photoshop’s “Save for Web” command, exporting all PNGs initially like this.
Prior to a site going live, I also like to utilize PNGCrusher, a tiny little OS X app my friend/co-worker Bret Kruse introduced to me. Even images that have already been optimized via Photoshop tend to see at least a 4% reduction in file size. That doesn’t sound like much, but consider the number of PNGs on a typical modern web site. A minimum of 4% reduced file size means a bit faster loading web site for your audience, but also can be a big savings in bandwidth/hosting costs for high traffic sites.
PNGCrusher is based on OptiPNG, an advanced PNG optimizer. I didn’t realize until reading the page, it can also help optimize BMP, GIF, PNM and TIFF files to optimized PNGs. I may have to add that to my workflow, though it’d really only be GIFs that ever get utilized.
Interested in reading even more on the PNG file format, compression, and everything surrounding the file format? Check out the page below. Interesting reading. I really found the PNG delta filters section interesting.
Props to my friend Bret for sending this one over. PNGs are great for transparency — but have a downside in the form of large file sizes. The link below is a simple way to reduce the file size, which still maintaining quality as far as I’ve seen so far.
