Quit Wasting My Time: Optimizing PNGs and JPGs for the Web
By Ryan Parlee
Here’s a little secret you may not know about the photos used on the web: Almost every file (JPG or PNG) is packed full of additional data that has nothing to do with the actual image.
What kind of data is hiding in these files? GPS data about where the photo was taken, camera data about the make, model, and settings of the camera used, and program data about which programs were used to process and edit the image.
As you might guess, the more data like that this that’s stored inside an image file, the larger the file is — and the longer it takes to load in a user’s browser. All of this stuff may be useful to someone, but when it’s being stored in an image that’s used on a website, it just hinders performance.
Luckily, there are some tools available to us that let us remove extraneous file data and reduce the file size of our images. This means faster load times and better user experience.
The first tool we’ll look at using is TinyPNG. It’s probably the most simple solution. It’s a browser-based compression service (free to use) and allows up to 20 files to be uploaded at a time. This is a great solution if you have a lot of images — like slices from a designer — that need to uploaded to the web at one time. Just run them all through TinyPNG and then upload as normal — saving yourself a bunch of file size in the process. (As you can probably tell by the name, it only works with PNG files, so we’ll discuss other options for JPEGs later.)
Here’s an example:
This image — at least, to my eyes — looks almost identical in both its non-compressed and compressed forms. But, check out the file size. TinyPNG brought this 856.9KB image down to just 308.4KB. That’s a 64% reduction in file size. Nice.
There’s also a free tool for JPGs, although it’s not quite as nice for batch uploads. But, nonetheless JPG Optimise can help if you need a browser-based solution.
In this example, we squeezed about 14KB out of the original 94.5KB file — for a saving of about 15%. Not quite as nice, but still a decent trim.
As a professional studio in the business of creating and publishing web images, we use scripted programs to automate image compression. (Hold on tight, because some of these steps will get a bit technical.)
For Mac
- If you haven’t already, install MacPorts.
- Using Mac Ports, you can install one of these three tools:
For PC
- Install GnuWin32 (Tip: Use the auto installer to automatically download and install all of the GnuWin32 tools.)
Once installed on either system, you can run these tools from the command line (PC) or terminal window (Mac):
- # Remove just text data
pngcrush -rem iTXt -rem zTXt -rem tEXt -dir ../ *.png - # Remove both color correction and text data
pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem iTXt -rem zTXt -rem tEXt -dir ../ *.png
With everyone having high-speed connections in this day and age, it’s easy to think that these optimizations aren’t necessary. But, that’s just not the case. In the U.S., our connection speeds still lag behind many countries and page-load times are far from instantaneous. Even Google has said they will go so far as to penalize sites that take too long to load by knocking down their search ranking.
Plus, let’s face it: Our attention spans don’t last very long on the web. Every millisecond of faster load time means you’ll keep that many more people’s attention — something that’s hard to do in the era of Tweets and push notifications.
So, taking the time to optimize images — especially large photos, backgrounds, and other elements that can usually be heavily compressed — is definitely a worthwhile investment.
Top image by Flickr user Dalo_Pix2.
