Saturday 30 April 2016

A bit about image formats

This may be the most boring blog post you ever read, but I think some people might find it useful. Also, given the title of my blog, it's about time I did something on image formats. Let's imagine you are making some images (maps, maybe, but it could be any kind of graphic) and you come to the end of the project and want to export the final images for use elsewhere for sharing and so on. Do you default to JPEG? Hopefully not. Do you use BMP? I really hope not. Do you default to PNG? (I do most of the time), or are you required to use EPS or TIF? These choices matter and that's what this is about. Take a look at the JPEG image below - click to enlarge it and you'll see that around the edge of the lettering it looks slighly fuzzy or shadowy. That's because the image has been compressed but also because during the compression some of the original image quality has been lost (that's why they say a JPEG is 'lossy').

The jpg format is not very good with big areas of the same colour

Now compare the following maps, all in JPEG format, which I've exported at 75dpi, 150dpi, 300dpi and 600 dpi. To see these and the other images below in their native form, take a look in the Google Drive folder I put them in. 

This is 0.145MB 
This is 0.423MB (2.92 times bigger than the one before)

This is 1.166MB (2.76 times bigger)

This is 3.003MB (2.58 times bigger)

If there were no compression, each doubling in dpi would lead to a file size four times bigger. As you can see, the rate of increase in file size actually declines with each doubling of dpi. But you shouldn't use JPEG for maps like this anyway. So let's look at PNG instead. PNG is also a compressed file format but unlike JPEG it is lossless. It's kind of a non-proprietary version of the GIF file format (which is patented). There are lots of good things about it, including the fact that you can have a transparent background. Here is the PNG equivalent of the above set, with file sizes shown again - as you'll see the file size is bigger than JPEG (without being massive) but if you look at them in their native resolution in the Google Drive folder you'll see that there is no image quality loss around the edge of block colour shapes, particularly the writing in the top left.

This is 0.463MB

This is 1.025MB (2.21 times bigger than the one before)

This is 2.238MB (2.18 times bigger than the one before)

This is 5.353MB (2.39 times bigger than the one before)

So, with PNG you get a bigger file size but the quality is better because it's lossless - and that's why it's normally the most appropriate format for images of this kind on the web. If you need higher quality - for publishing for example - then EPS is often required. Sometimes, it's TIF. TIF is, like JPEG and PNG, a raster graphic format and when you export from QGIS as I have done here there is no compression (that's another story). This means that doubling the dpi leads to a quadrupling in file size - you can see this in the Google Drive where I've taken the image above and exported it again but in TIF formats. 

Uncompressed 75dpi TIF - 2.122MB

150dpi this time - 8.492MB (4 times bigger)

I haven't uploaded the other two TIFs here as they get pretty big quite quickly. The 600dpi file is nearly 136MB. But that's where TIF compression can come in handy. The two images below are 300dpi and 600dpi TIFs, but I've saved them using LZW compression (one of the options in IrfanView - my free tool of choice but there are other ways, like GIMP) and they are much smaller. You can see the full versions of these in the Google Drive folder.

This is only 3.908MB (the original was 33.975MB)

This is only 10.314MB - 13x smaller than the uncompressed TIF

Okay, so where were we? Oh yes, don't make a lovely map and then ruin it by exporting to BMP. Also, don't make loads of maps for a book or other project without thinking about the image format the end user will need. I keep making this mistake, somehow! I haven't even mentioned Abraham Lempel, Jacob Ziv and Terry Welch, but I think I ran out of goodwill quite some time ago so I'll just end by saying that their LZW algorithm is what makes the last two images much smaller than they were originally.

With this post I've reached a new low. I promise something more exciting next time. But if this saves just one person from having to re-produce a map because they got the image format right first time then it's been worth it. Last of all, here is one more extract from a 600dpi JPEG where you can really see the fuzzy effect you get.

The fuzzy effect is more noticeable in blocks of red colour



Other stuff JPG or JPEG? TIF or TIFF? It doesn't matter. If you manually change the .jpg file extension to .jpeg you'll see that it still opens and looks the same. Also with .tif vs .tiff. JPEGs are good for where the colour values change a lot in a short space - like in photographs of people or places. Following tweets from Rob Pattay, I thought I'd add here that you can also reduce PNG size with a bit more post-export compression. I used IrfanView to reduce the 600dpi PNG from 5.23MB to 4.85MB (about 12% less). Also, you might notice that when you click on the TIF images here in blogger they end up displaying as JPEGs.