Hello there :)

Angela I'm Angela. I've been blogging on and off, but I've always been around. I like rambling about anything that strikes my fancy, be it personal endeavors, geeky pursuits, books I'm reading, writing attempts, occasional travel, and the games I play.

 

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.

  • Definitely true :) jhead is pretty cool for those who don’t have Photoshop or need a quick no-editing strip of metadata from images, but if images are already in Photoshop, Save for Web is definitely easier :)

  • Heh you’re welcome! Glad I could help – Save For Web really is faster for me than having to go into Terminal for that last step! :P

  • Oooh! Thanks, Sasha! I asked around in a couple of forums but no one seemed to know what to do, lol <_<

  • Aah – that sounds like a color space problem. Been there, done that LOL. Check out the below links, they should help you get rid of the washed-out problem, making Save For Web totally usable again:

    http://www.creativepro.com/article/tips-for-managing-web-color-in-photoshop
    http://tancredi.co.uk/2007/5/13/photoshop-cs3-and-save-for-web-issues
    http://www.hongkiat.com/blog/image-color-faded-when-save-for-web-adobe-photoshop-cs3/

    Hope that helps lol!

  • Hi Sasha! Yes, Save for Web does strip out metadata–but my problem was, for some reason, Save for Web made the images look washed out and pale. I compared the two outputs many times and with different images and the difference was quite apparent for me when we’re talking about rich, vibrant colors.

    This has never happened to me before, when I was using PS on a Windows machine. I’ve no idea why PS on my Mac is doing this–I’ve taken a look at my settings and I don’t really see where there might be settings for that.

  • Doesn’t Photoshop’s File > Save For Web strip everything out too? I thought it did – and generally 100x100s I save that way are definitely smaller than 100kb lol! Most are well under 20kb, even.

    I’ve just gotten into the habit of always using Save For Web if the image is going to be online only, like LJ icons or website graphics. :) For me, since I’m already in PS anyway, it’d be faster and easier than using Terminal.

    Just in case you didn’t realize Save For Web pretty much does this too!