FF: Hidden data in Jpegs

We all know about EXIF data in photos we take with our digital cameras, which is one type of metadata that can be present in images. This metadata provides additional information about the picture, and for photos taken with digital cameras it can include the make of the camera, shutter speed, aperture, and various other information. There are other formats like IPTC and XMP.

This metadata provides good information, but how important is that information when porting images on the web? Metadata is information enclosed in the file, hence any metadata adds to the file’s total size. This is good, except when we’re talking about, say, a preview/thumbnail metadata of a thumbnail image for your photo gallery. Redundant much?

I actually have been hit by this quirk–I kept wondering why my newly installed Photoshop kept giving me 100×100 jpegs that were 100kb in size! (Yes, I was making Livejournal icons.) I found out (after a week or so of confusion whenever I’d try) that I was including previews in my saved files because of a default setting. I got my 100×100 jpegs down to 39kb, from 100kb+. That potentially saves me ~61kbs of bandwidth per image fetch!

Stripping this metadata can be done via several methods. One is via the use of IrfanView, which I’ve heard around, but as it’s Windows-only I haven’t tried it out. I also found jhead, which is a free, open source program that runs on multiple platforms. It’s all command-line though, so if you like GUI, you might better stick with the former.

I did try out jhead, and I’m quite satisfied. It’s a quick, no-nonsense program which has a lot of capabilities, but it also does the job I want quickly: remove all metadata.

To use jhead, you should download an appropriate release from the website, save it somewhere, then open up Terminal (or the Command Prompt) and change the directory to where you downloaded jhead. If you’re using Linux/Unix/OSX, remember to set the executable bit if you downloaded the pre-built executable files by typing chmod +x jhead at the prompt.

For my case, I did a test with a background pattern I’m using at Seasonal Plume:

 $ ./jhead -purejpg stripped.jpg
Modified: stripped.jpg

And that resulted in an image that was 8kbs smaller.

This is a quick, painless way to help you save on bandwidth costs and have your websites load faster. I’ve recently gone through a Site Integrity Seminar at work and this is one of the things that I came away with that’s easily done to speed website performance. Given the fact that I did encounter this problem not too long ago, I hope this week’s Frontend Friday was helpful ;) and that you can use it for your own websites.