When it comes to .jpg optimization, the general advice out there is pretty consistent:

- size your images to the dimensions they are being displayed (using image editors, NOT your web development tools).
- use grayscale or black and white imagery over color if you can…as fewer colors will result in smaller overall file sizes.
- apply 10-20+ percent compression to any imagery being saved for on-screen display.

When sites out there are telling you to use compression, they are telling you to use a UNIVERSAL rate of compression…the same rate of compression being consistently applied over an entire image. Most image editors will only allow you to apply universal compression settings when optimizing imagery! This becomes a problem in many instances, as the higher the rate of compression you apply to an image, the worse it will ultimately look…especially after multiple edits and saves. It also is highly inefficient, as different regions of each image can use different amounts of compression to achieve the combination of best image appearance and smallest overall file size.

My preferred solution is to use a heavy-dose of custom zonal compression and a minimal amount of universal compression. This technique will often produce similar to smaller image file sizes, with one important distinction: preserving the ability to edit said images at some point in the future without experiencing a significant amount of quality loss. Read the rest of this entry »

Optimization Examples, Tools/Techniques | No Comments »

One of the individuals who really got me thinking and started down my path of image optimization was Jakob Nielsen and his useit.com web site. Jakob was really one of the early “evangelists” of paying a great deal of attention to speed and performance when it came to web design…and there are literally tens (hundreds?) of thousands of web developers out there who owe many of their fine techniques to his many books and articles on the subject.

I came across one of Jakob’s articles tonight from 1996, entitled Marginalia of Web Design. In it, he mentioned the idea of “relevance enhanced image reduction.” Basically, he is referring to cropping and proportional scaling of images before they are posted to the web…making sure that the images are as small in both file size and dimensions as is actually necessary.

As an example of what Jakob is talking about, I have selected one of the sample images which came with my new Windows Vista operating system on my HP HDX laptop:

I shrunk the image from 1024×768 pixels to 400×300, just to save on a little bandwidth! The first thing we’ll want to do with that image is decide if any cropping can be used to eliminate unnecessary visual information from the file (saving both display and file size). Let’s say that my main interest is showing the dock, water and clouds. I decide that not as much of the sky is REALLY needed in order to convey the look and information I am going for. I subsequently can crop off a bit of the top and left-hand edges of the images:

The major elements of the image are EXACTLY the same size! However, the dimensions of the overall image have been reduced to 376×257 pixels, with a reduction in file size from 54.6 KB to 48.0 KB, an improvement of 12 percent.

Now let’s say that we also decide that the image doesn’t need to be quite as large as 376 pixels wide…and that we can reduce it down to 300 pixels wide without losing anything related to the image’s quality and overall message:

That new 300 pixel wide image is now 33.5 KB in size, an additional 30 percent reduction in file size and a 39 percent improvement from where we started. Great…we’re done, right?! Wrong. ONE more step:

A bit more custom zonal compression work to that photo using xat.com’s Image Optimizer can further reduce that image’s size down to 25.6 KB, an additional 24 percent reduction in file size.

Most of what I focus on in this blog and within our main GraphicsOptimization web site focuses on optimizing existing imagery as-is…not altering an image in any way (cropping, scaling, etc.) other than reducing its file size to the smallest possible levels. Articles such as Jakob’s though are an excellent illustration of how one should REALLY think about what an image is doing on a web page and if any portion of that image can be removed without harming the look or message you are trying to convey.

Tools/Techniques | No Comments »

The world as we know it likely changed just a tiny bit today. Google, one of the largest companies in the world, released its own web browser called Google Chrome. Google Chrome is essentially Google’s “operating system” on the web, and is intended to be a light-weight tool that is designed in such a way as to rarely (if ever) crash, due to its multiprocess architecture. I have downloaded the application and played around with it a bit, mainly to see what all of the buzz is about and to see how the web sites I have created look and function in that new browser. However, I cannot yet use the browser in my day-to-day activities for two important reasons:

1. The lack of plug-ins and add-ons. Mozilla Firefox is THE browser to use in the marketplace, in my opinion, because of Add-Ons such as AdBlock Plus, Remove It Permanently and Web Developer Toolbar. Those are tools that I have essentially come to reply upon in my daily activities…and using ANY browser without that type of additional functionality would be a huge step backwards for me.

2. Fear over Google obtaining and monitoring even more potential information about me, my browsing habits and other potentially sensitive information. I realize that I have to give up a bit of rights when agreeing to use their applications free of charge. However, I guess I am not yet ready to turn over more information about my browsing habits and the sites I like to visit. For instance, do people REALLY need to know that I spent a full hour tonight searching the Internet trying to locate electronics recycling operations in Southwestern Minnesota? Read the rest of this entry »

Optimization Examples | No Comments »

Aaron Hilton at CellMap recently sent me a link to an outstanding lightweight javascript comments service that is almost too easy and simple to believe at first-glance. Provided on the JS-Kit web site, it requires all of two lines of code in order to function on anyone’s web site:

<**div class="js-kit-comments" permalink=""><**/div>
<**script src="http://js-kit.com/comments.js"><**/script>

** - without the “**” references, of course. I just wanted to display the code, instead of have the code actually running in this post.

Being positive it couldn’t be that simple to use, I decided to embed that comment service on one of the more-heavily trafficked web pages on our mapformation web site as a test: the Downtown Minneapolis Skyway System map, which we developed as a quick, free design for people to use to their heart’s content. Sure enough, about three minutes of effort, and that web page now has a cool little comments function for people to leave ideas and suggestions related to that presentation. Outstanding!

While visiting that particular JS-Kit web page, I thought I might return the favor and see what I might be able to do related to optimization and a few of the images found on that page. The results of that bit of optimization work can be seen below: Read the rest of this entry »

Optimization Examples | No Comments »

For the second time in as many years today, my oldest daughter Libby (not quite six years old) and I made the two-hour trek from Springfield to Shakopee, Minnesota to visit one of the Upper Midwest’s best (and only) amusement parks: Valleyfair. My wife Becky accompanied us this year…along with my sister and two nieces. As was expected, a good time was once-again had by all! Read the rest of this entry »

Optimization Examples | No Comments »

Derek’s been drinking too much Diet Dr. Pepper again…as he really meant to type “RGBA color” instead of “BGRA color,” right?! Wrong. Well, RIGHT about me drinking too much Diet Dr. Pepper, but WRONG about the typo.

For the Apple iPhone, Apple decided to implement a non-standard PNG format that includes a CgBL chunk ahead of the IHDR chunk (which is always supposed to come first within .png image files). Apple ALSO subsequently flips the blue and red pixels in its color scheme (BGRA color for 32-bit imagery with alpha transparency)…which can create some REALLY unpleasant results for individuals trying to use those .png images within other applications outside of the iPhone!

I came across a site today called ModMyiFone which has a great little tutorial for converting .png imagery for the iPhone into a format suitable for other applications. To quote the iPhone PNG Images page from their web site:

To convert an iPhone PNG to a standard PNG:

1. Remove the ‘CgBl’ chunk.
2. Decompress the data using zlib with the windowSize set to a negative number.
3. Swap the red pixel with the blue pixel in the data.
4. Recompress the data using zlib using the default headers and CRC.
5. Replace the image data chunk with the new compressed data in the PNG, and create a new checksum. Read the rest of this entry »

Tools/Techniques | 1 Comment »

Okay folks, get comfortable and prepare to be presented with far more technical information than you probably care to know! When it comes to the Portable Network Graphics (PNG) file format, all of the bits and bytes are organized into the following chunks of data: Read the rest of this entry »

Tools/Techniques | No Comments »

I was in my office working last Friday evening around midnight, when all of the sudden my phone rang. Late night phone calls are NEVER good…and on the other end of the phone was my mom…who had an overly-friendly brown bat zooming around her living room. My mom recently moved into our small town to be closer to our two daughters…so I walked over to her house in the middle of the night and promptly helped with a little “eviction.”

Unfortunately, I am becoming a bit of an expert at removing bats from residential buildings…as I have had to “evict” approximately ten bats out of our own home during the past five years. They seem to love our first floor and basement (thank goodness they’ve avoided our second floor, where all the bedrooms are), but I’ve been slowly having to give all those freeloaders the boot…as well as tighten-up all of the holes and cracks I can find in order to encourage them to find another home. I’m not surprised at all that bats took up residence in our house, as it had sat vacant for approximately eight months before we purchased and moved into the home…and was in DIRE need of repairs. Still, that doesn’t make my wife feel much better whenever one comes out to make an appearance…so I do my best to tell them to hit the road.

My wife (and now mom) will ask me “what can we do to get rid of them?,” so tonight I decided to do a little research on the Minnesota Department of Natural Resources web site. The DNR site actually had some great information on the brown bat species, but not much advice for removing them. Oh well…my quest for information on having a bat-free home continues…

While I was on that site though, I thought I might as well look at a few images to see what could be done from the standpoint of optimization. The results of that bit of effort can be viewed below: Read the rest of this entry »

Optimization Examples | No Comments »

I didn’t want to write another posting about fantasy football so soon after posting a message on MyFantasyLeague.com several days ago. However, I received the following message from one of my league-mates tonight…and I couldn’t resist the opportunity:

“Draft last night- chaos. Trying to get onto the site tonight to declare keepers- impossible. We might want to set up a chat room alongside the live draft room if/when it crashes during the PSFFL draft.”

Such is life as a fantasy football player this time of year…when you have subscription and hosting services crashing left and right, after they failed to anticipate or accommodate for the volume of site traffic and bandwidth that they would be needing.

The league being referred to in this particular instance is hosted at Fanball.com. Fanball is a great service! However, they have been plagued with unnecessary and AVOIDABLE server crashes for portions of the past several years. Every Sunday afternoon, around 2-4pm Central Time, I assume that their servers will be unavailable when many of their customers are trying to access their league information and check on their scores.

I had contacted Fanball staff 2-3 years ago…showing them how a bit of image optimization work would go a LONG way towards reducing server load and crashes, but to no avail. Some examples of what can be done with the imagery on their site/service is as follows: Read the rest of this entry »

Optimization Examples | No Comments »

I was doing some research tonight on Fresnel lenses for a pet science and eco-friendly idea I’ve been thinking about for the past few years, when I came across an interesting web site called Green Power Science. According to their web site: “Green Power Science is dedicated to the backyard scientist. Our belief is that some of the smartest people in the world discover the best things through trial and error IN THEIR OWN BACKYARDS OR GARAGES. We welcome all levels of creativity and hope you find the answers you are looking for.” Outstanding! If they ever do achieve their desire to have a show on the Discovery Network, I would be one of their loyal viewers…as I am a bit of a tinkerer and a fan/admirer of numerous smaller scientific experiments.

While I was in their site, I thought I might as well look at a few of the images found on their home page. Without further ado: Read the rest of this entry »

Optimization Examples | No Comments »