About 2-3 times every year, I have one of those “Duh! Why didn’t I think of that before?” moments. This week, my “Duh!” moment was in realizing that for a great-many .png images, removing the white background in them and replacing it with transparency would more than likely result in less pixel information needing to be stored for each image. And less pixel information needed to be stored would more than likely result in smaller overall file size.

I decided to put that theory to the test tonight. I picked three images from the mapformation.com website at-random that included a lot of white in them. The mapformation site uses a white background in its page template, so storing white background information in each of the .png files themselves would be unnecessary.

To perform this experiment, I used a combination of Adobe Fireworks and PNGSlim. In Fireworks, I used the Magic Wand Tool to remove a majority of the white from the image (all the background color). I then made the matte for the image transparent as well. When you save that .png out of Fireworks with alpha transparency, you’ll probably fall out of your chair, as the file size will INCREASE by roughly 15-30 times its original size. However, have no fear! Subsequently running the much larger .png out of Fireworks through PNGSlim will bring that file back down to a manageable size.

Unoptimized 750×97 pixel .png header graphic – 4,555 bytes

Optimized 750×97 pixel .png header graphic – 4,303 bytes

Unoptimized 201×155 pixel .png logo – 12,744 bytes

Optimized 201×155 pixel .png logo – 11,959 bytes

Unoptimized 251×37 pixel .png logo – 1,162 bytes

Optimized 251×37 pixel .png logo – 1,071 bytes

18.0 KB of imagery was reduced to 16.9 KB in cumulative size, an improvement of 6.2 percent. Not bad at all, considering those images had already been turned into “flying tin cans” at an earlier date by Yours Truly.

Replacing an unnecessary background with transparency is probably something many of you reading this have already been doing for years! However, in case you’re like me, I thought I’d share my “Duh!” moment and potentially save you a little time. Enjoy!

Tools/Techniques | No Comments »

Parlez-vous français?

I personally don’t speak French well at all (other than knowing that when I get into trouble, I need to spend some quality time on the Google Translate web site). However, a recent comment on one of my blog postings lead me to find out about a French-language web page on the CSS-IG.net web site that makes me want to take a class or two.

That page described a PNGSlim-like command-line .png optimization tool called ScriptPNG. According to that page (and Google Translate):

“The ScriptPNG allows conversion of BMP, GIF, TGA, PCX, TIF, TIFF, PNM, PBM, PGM to PNG one or several images in one cycle, and optimizing PNG images. To do this, move your images in the folder scriptpng, Execute the ScriptPNG, and choose the value:

3 Change in Paletted PNG (PNG-8, web): PNG conversion Paletted strength up to 256 colors in the image from the original image. Can obtain significant gains weight, but may cause visual degradation. The image is then optimized with option 2 automatically.”

Option 2 seems to be the most desirable (most powerful, without the risk of visual degradation), so I grabbed 20 .png images from the “root” images directory on our mapformation.com web site to see what ScriptPNG might do. The need to have to copy files into the ScriptPNG root directory to optimize them was a bit of a hassle. However, that negative was quickly off-set by the speed in which ScriptPNG operates. I estimate that it took less than half the time to process those 20 .png images compared to PNGSlim, and the resulting output was nearly the same.

16 of those 20 images were within 0.5% of the optimized size of the PNGSlim output. Two of the 20 images were about 2-3% larger than the optimized size of my PNGSlim files, while the remaining two files were less than 1% smaller than the previous “smallest size” I had been able to achieve using the PNGSlim too.

It’s too early for me know what all of this means as of yet! However, the performance of ScriptPNG was strong and fast enough that I wanted to make sure and share a bit of information to encourage others out there to give it a try as well! Looks very promising…and if they can get those optimized results on-par with (or superior to) PNGSlim, we might just have a new favorite tool to play with when it comes to .png optimization!

Tools/Techniques | No Comments »

In case a few of you who are regular visitors to this blog were wondering about the “radio silence” from Yours Truly during the past week, I’ve got four little characters for you: H1N1. Yep, I got to join the world-wide epidemic and enjoy a little flu.

I hadn’t felt good since the end of September, but my symptoms finally progressed to the point of a chronic fever of 99.5 F to 100.5 F, chills, a sore throat, sinus congestion, etc. I think the night I went down to microwave myself some popcorn, only to have to try three times to punch in the right time on the microwave because my hand and fingers were shaking so badly, was the night I thought: “Okay, this might actually be serious.” I also had a really unusual experience of feeling like I had some electric charges running through my body when I would sneeze. Wha-CHOO! …and then it would feel as though my entire body from my neck to the bottom of my rib cage was having a current of electricity passing through it. A very strange sensation…but I’m FINALLY starting to feel like I’m on the mend.

During the peak of the H1N1 pleasantness for me, I visited the Center for Disease Control and Prevention’s web portal for the topic…and, in my delirium, thought I’d better look at a few of the image from an image optimization perspective. The results of that bit of experimentation can be viewed below: Read the rest of this entry »

Optimization Examples | No Comments »

How does that old saying go? The best compliment or flattery often comes in the form of imitation?

I had an interesting experience tonight. I approved a comment on this blog from a certain email address that eventually took me to a web site called Greenficiency. Sounds fantastic, as they are on that same soap box and preaching the same message that I have been attempting to preach these past several years.

Only one problem: in perusing that web site’s content, I noticed that they literally ARE preaching the same message as I have on our main GraphicsOptimization.com web site! The EXACT same message, in many instances. Sentences/Paragraphs of word-for-word write-ups that I spent hours/days trying to research and write, not to mention other striking similarities in information and content.

I guess I was surprised that someone would be bold enough to lift that much content off another person’s site with open disregard for US Copyright Law. That said, it doesn’t bother me TOO much…although it did irk me a bit to lift a lot of my content and then make sure to set price points just below the ones I have used in the “let us do it for you” section of my site.

That does lead me to want to crawl up on my soap box again though to mention two quick things:

1. The more I’ve gotten into image optimization, the more I’ve come to the mindset of needing to give it away (educate and broadcast) versus trying to monetize the service. That is one main section of content from our GraphicsOptimization site that is strangely missing from the Greenficiency site. The (main) part which we inform people how to do electronic image optimization themselves. The part which will have 100-times the positive impact on effecting change as keeping secrets and then charging people for that expertise might. Which leads me to my second point:

2. Ownership of the expertise. When I present workshops at conferences or guest lecture at a handful of educational institutions, I try and be very transparent in letting people know that I am not “the” image optimization expert. Rather, I am just a person who has made it a mission to create a clearinghouse and blog for everything I know about what the actual experts are doing out there. Andrew Dent…Conrad Chu…Stoyan Stefanov…Ken Silverman…and many others are the true experts in this field! Where the hard, dirty work is being done in the trenches squeezing every last bit or byte out of every electronic image format out there. I am just a “preacher” or apostle who is out there spreading the good news about their efforts…sharing what I know with as many people who will listen.

Since most of those experts freely share much of their expertise, ideas and feedback with us, I feel a strong sense of obligation to “pay it forward” and share my own expertise, ideas and feedback with others who request it. I do charge for performing optimization services on other people’s behalf from time to time…as my time IS money, and if they don’t want to learn how to do it themselves but still want/need it done, I do need to put food on the table for my family of four! However, image optimization services isn’t really a commercially sustainable business model IMHO…as the only way to make a decent living at it would be to take the tools and information others have freely shared with us, turn around and keep them secret. That just doesn’t feel right to me.

This isn’t a knock at Greenficiency! Heck, the more people out there spreading the image optimization message, the better! All the best to them in their efforts going forward. I just want people to do this for the right reasons. If Andrew Dent gives us PNGSlim for free, then we (the collective “we”) turn around and charge others thousands of dollars to access PNGSlimmed files when they might have been just as happy and empowered to optimize those files themselves, pretty soon, if Andrew is smart (and I know he is VERY smart), he’ll start thinking/saying “why am I giving this tool away and letting others make a lot of money while all I have is a couple thank yous and handshakes for my effort?” And then the wonderful “open source” style community we have really pushing new boundaries and reaching new “converts” out there will become tainted and/or will lose its responsiveness and core mission/values in pursuit of financial reward.

Sorry for the LONG posting tonight! Just wanted to say a few things that were on my mind.

News/Announcements | 2 Comments »

In response to Conrad Chu’s comment from my previous blog posting (thanks for taking the time to comment, Conrad), I thought I would share a specific example of .png optimization related to punypng and PNGSlim. Conrad had asked me to share a concrete example to illustrate my “In my experimentation with the two tools, punypng has consistently only taken about half of the excess file size out of the typical .png image as PNGSlim has” comment from yesterday’s post…so since he was so gracious in commenting on my post, I wanted to quickly provide such an example.

For this experiment, I used the W3C.org validation service to check the status of my mapping firm’s home page at mapformation.com. We passed (whew), albeit with three warnings. W3C subsequently provided links to two .png files that I could post on that home page if I chose to: Read the rest of this entry »

Optimization Examples, Tools/Techniques | 2 Comments »

It’s been about four months since I last posted in this blog about the great, free, web-based optimization tool called punypng. Consequently, I thought I would play around with the tool a bit more tonight to see what might have changed in recent months.

Related to .png optimization, I still have struggled to achieve comparable results to PNGSlim. In my experimentation with the two tools, punypng has consistently only taken about half of the excess file size out of the typical .png image as PNGSlim has. Consequently, I have not used punypng much with .png file optimization.

That said, I have begun to do a great deal more experimentation with punypng related to .jpg output, with very good results! As a recent example, I took all of the .jpg image tiles generated by a tool called Zoomify in the display of a 3D perspective vector-style campus map that our firm had produced for Auraria Higher Education Center in Colorado (USA) during the Summer of 2007.

70 total tiles, which Zoomify saved at 882 KB, were able to be reduced to 803 KB in cumulative size, an improvement of nine percent. Well worth the effort…especially if you are someone who makes HEAVY utilization of the Zoomify tool (as our firm does).

Keep up the great work, Conrad, Kevan, Abe and Matt! I can’t wait to see what’s next related to the punypng tool.

Optimization Examples, Tools/Techniques | 1 Comment »

Hey everyone! Just wanted to post a quick “public service announcement” that Stoyan Stefanov’s smush.it tool now comes as an automated Wordpress plug-in! Smush.it offers the following resources:

* stripping meta data from JPEG images
* optimizing JPEG compression
* converting certain GIF files to indexed PNGs
* stripping the unnecessary colors from indexed images

Basically, smush.it will run in the background on your Wordpress site, automatically reducing the size of your imagery on your behalf. The only sad, selfish thing is that I cannot use it on this particular blog…as the before-and-after optimization examples I try to illustrate would be impacted by all of the “before” images being adjusted. However, if you operate a Wordpress blog, definitely give that plug-in a look!

Tools/Techniques | No Comments »

I came across another fantastic article the other day by Carlos Bueno on the Yahoo! Developer Network Blog entitled “An Engineer’s Guide to Bandwidth.” Two things in particular that I really enjoyed about this article:

1. Distinguishing between bandwidth and packets. From the bandipedia.com web site:

“A packet consists of a certain number of bytes. A typical packet contains perhaps 1,000 or 1,500 bytes. Each packet carries the information that will help it get to its destination (i.e. from the sender’s IP address to the intended receiver’s IP address). The packets carry the data via the TCP/IP|Transmission Control Protocol/Internet Protocol (TCP/IP).

Trailer- The trailer, sometimes called the footer, typically contains a couple of bits that tell the receiving device that it has reached the end of the packet.”

One of the things I always try and pay attention to when I am optimizing imagery is how many bytes I can reduce out of an image’s size in multiples of 1,460 (the example size used in Carlos’ article). If I can reduce a 13,220 byte image to 10,220 bytes, that is only 3,000 bytes! However, that is THREE packets potentially not needing to be sent.

Right about now, a few reading this are saying “wait a minute! 1460 x 3 = 4,380 bytes. How can only 3,000 bytes equal three packets saved?” That’s the fun part. If you have an image that is 1,461 bytes, and can reduce that image’s size by even one byte, that could theoretically save one whole packet from being sent! That’s because whether one byte or 1,460 bytes are needing to be sent, a full packet is necessary, depending upon Path MTU (Maximum Transmission Unit). From the NetHeaven.com web site: “The full path from one computer to another may travel across many links with different MTUs. The smallest MTU for all the links in a path is the path MTU.”

Makes me even more excited even if I am only pulling out 10-20 bytes from an image’s size…as that 10-20 bytes might be the difference in one unnecessary packet transmission being sent.

2. Packet Latency and Packet Loss. From the article: “Packet Latency is the time it takes a packet to wind through the wires and hops between points A and B. It is roughly a function of the physical distance (at 2/3 of the speed of light) plus the time the packet spends queued up inside various network devices along the way.” Packet loss is basically the failure of a packet to deliver to its end destination, for any variety of potential reasons.

Stating the obvious here, but fewer packets to send through what former Alaska Senator Ted Stevens dubbed as a “Series of Tubes“ (or Jon Stewart’s version of Stevens making that comment…a LOT more entertaining), the fewer the chances of any packets getting lost in transit or delayed in their delivery.

Great job, Carlos! Thanks for the insight.

Tools/Techniques | No Comments »

Back in February 2008, I shared a posting about one of my favorite disc golf sites out there, discgolfersR.us. A year and a half later, we’re still talking about the issue of image optimization a bit on that site, as can be seen at: http://discgolfer.ning.com/forum/topics/members-using-front-page-for

I’m just happy we’re talking about it…as if even 1-2 more people read some of those discussions and then begin to take much greater care when posting imagery to that site (and others), the Internet will be just a bit better place to be! While talking about image optimization issues on the site again though, I thought I would look at a few more images on the site to see what might be able to be done. Read the rest of this entry »

Optimization Examples | No Comments »

I came across a couple optimization tools I was unfamiliar with tonight, so I thought I would share a quick posting to see if anyone out there knows anything about either tool:

JPEG & PNG Stripper (Win95 to Win7) – (from their web site) A tool for stripping/cleaning/removing unnecessary metadata (junk) from JPG/JPEG/JFIF & PNG files. The image quality IS NOT AFFECTED. Includes command line support. Just specify a folder or file on the commandline (wildcards allowed).

PNGpong (Mac) – (from their web site) PNG is a wonderful file format that suffers from an unfortunate gamma problem (http://hsivonen.iki.fi/png-gamma/ ). PNGpong alleviates this issue by stripping the color “correction” information out of the file using pngcrush. PNGpong then attempts to further compress the PNG file by running it through optipng (I say “attempts” because some PNG’s may already be as compressed as possible).

Keep fighting the good fight!

Tools/Techniques | No Comments »