Warning
This article was written about seven years ago, and lots of techo things have improved considerably since then. But the basic facts haven’t changed, so this article is still quite useful for beginners. Please just bear in mind that any numbers are probably misleading in today’s world.
What is a digital picture?
It’s an illusion, made up from lots of little dots, called pixels, which stands for ‘picture elements’. Because they’re very small, our eyes are fooled into seeing a continuous image, which looks ‘real’. Each pixel has a colour and a brightness, and in order to store enough information about the colour and the brightness, each pixel requires a minimum of 24 ‘bits’ of computer storage – in some case more than that. In the old days it was 8 bits, but that’s long gone.
Digital cameras are always labelled with the number of pixels they can resolve a scene into. “Twelve mega-pixels” is a good standard in 2011, though some of you will have “15 mega-pixel” beauties. By comparison, my mobile resolves at 3 mega-pixels (or 3 Mpx, for short). But I can post pictures on the Chariot which look every bit as good as you rich guys with the 15 Mpx jobbies, and under some conditions mine will even look better than yours! Now, why is that?
Well, it all comes down to file formats, compression algorithms and monitor resolution. Don’t panic, I’ll take you slowly through all of these, and I’ll throw in printers and ‘dpi’ as well. You’ll get there!
File formats and compression algorithms
Let’s start with our newest Charioteer, Kate. G’day Kate! Nice camera you have there, with its 4,288 x 2,848 resolution – ie. 12.2 Mpx. (It may be better than that, but that’s the setting you used when you took those piccies.) Each of your photos produces 4,288 x 2,848 x 24 bits of information. If your camera wasn’t clever, it would need to store all of those 293 million bits of information. A byte is 8 bits, so the absolute minimum file size would be (293/8) 37 MB – file sizes are usually quoted in MB (mega-bytes) or kB (kilo-bytes).
But your picture files are not that big. The one I downloaded was ‘only’ 3.2 MB.
This is because your camera applies ‘jpeg compression’ to squeeze the information into a smaller space – roughly 10 times smaller in this case.
A compression algorithm is a very clever bit of mathematics which analyses the information, finds patterns in it, and encodes the patterns in shorthand. The compressed information can recreate the original picture, but something is lost; some detail will be discarded, but it will be detail which the eye (usually) won’t notice. These mathematicians are real whizzes, so jpeg allows a user to choose how much detail is lost, by specifying the degree of compression. Select a high degree of compression and you’ll get a small file with quite a lot of quality being lost; select a low degree of compression and the quality will be higher, but the file size will be bigger. Your camera (and image processing software on your computer) may allow you to choose the ‘jpeg compression ratio’, or it may not.
You can tell it’s a jpeg file because its name ends with .jpeg or .jpg.
There are many different file formats – .gif, .png, .tiff … lots of them. Some use compression, some don’t. These are all raster formats, but there are also vector formats, which aren’t generally used for pictures. Browsers like IE, Firefox, Opera and Chrome usually use .jpeg, .gif and .png for pictures, and servers like WordPress expect to handle those. Browsers use rendering engines to produce the pages that you see on your display.
Monitor resolution and displayed picture size
The best monitors (or HDTVs) these days have a screen with a resolution of 1,920 x 1,080 pixels in a 16:9 aspect ratio (roughly). Your (older) monitor may have a lower resolution, but it’s unlikely that it will be better. Before I retired we were using displays for Air Traffic Control that had 3,000 x 3,000 resolution, and things have probably progressed from there, but the prices would scare the pants off you. It doesn’t matter how physically large your screen is, it won’t have any more pixels – they’ll just be further apart. Many of you have your screen resolutions set to 1,280 (in the x-direction), some of you even stick with 1,024. It’s not doing your eyes any good, and the LCD electronics will be sighing, but you don’t understand how to set character size … that’s another subject.
You might reflect at this point that any picture that has a resolution which is better than that of the monitor it’s being shown on, is wasting its time. 4,288 into 1,920 doesn’t go!
Now, web pages are generally created so that their content can be seen by everyone, even those using older equipment, so the maximum width of the information on the page is usually 1,024 px. The Chariot is slightly wider, by design and intent, but will fit on to a 1,280 wide screen with ease. Those with modern displays are not using the full 1,920 their equipment allows; they are only using the 1,024 (or 1,280) that the page permits.
But we don’t even have the full page for our photos – we couldn’t have a sidebar or margins if we did. The Chariot displays pictures up to 700px wide in posts, and 600px in comments. A landscape picture with a width of 700px will have a height of about 450px, or about 400 for 600 wide. Hence the number of pixels being used for a full width picture in a comment is (approximately) 600 x 400 = 240,000 or let’s say 0.25 Mpx. A quarter of a mega-pixel.
How do Browers and Servers deal with pictures?
When, in a post or a comment, you set the width of a picture to 700 px, say, what you’re doing is setting up HTML instructions which tell the browser the size that you want the picture displayed at. When you view a page, the browser send off to the server asking for instructions, and for any files that are needed within those instructions. It goes something like this –
“Ah,” says the browser. “Kate wants to put a picture there, and it must take up a space that is 600 by 400 pixels. Let’s ask the server to send the picture file.”
The server does what it is told, and downloads a 3.2 MB file, taking, say, 10 seconds to do so over a medium speed link.
“Blimey,” says the browser, analysing the file, “that’s a picture that occupies 4,000 x 3,000 pixels. My rendering engine must shrink it down to 600 x 400, so I’d better call the mathematicians in.” In they come and throw away ((4,000 x 3,000) – (600 x 400)) pixels. Then the browser the renders the picture on the screen.
98% of what has taken 10 seconds to download has been thrown away. Do the maths yourself.
Think about it. The file could have come down in 0.2 seconds (200 milliSeconds, a blink of an eye) if the stored picture had had the correct dimensions, the browser could have rendered it quicker, and the displayed appearance and quality would have been exactly the same.
The file is roughly 50 times bigger than it need be.
Extra section for bright students
WordPress is clever. Its servers have a way of saving download time. If you ask them nicely by using a ‘GET’ command, they will reduce the size of the picture before they send it down to the browser. To do this you append the following code to the file name “?w=600“. Not all servers will recognise this, but WordPress will, cutting the download time to what it should be. But, of course, there is still a small overhead while it processes the file, every time it’s asked for it (unless it caches it). But remember, if the file is the right size in the first place, no processing is necessary.
Why didn’t you teach us this trick?
For three reasons –
- You’ve had a hard enough time, some of you, learning how to insert an IMG tag with a url and a width attribute; this would have made it even harder.
- There is no reason for the stored file to be too large in the first place. Nobody benefits. Too much of the WordPress allowance of 2Gigs would be used, your upload time is extended, and the extra detail can’t be used.
- It might lead you into bad habits, because many servers can’t understand the ‘GET’ post-pend.
How about printing photos?
Quite different. Modern printers (and scanners) can cope with thousands of ‘dots per inch’ (dpi), producing excellent high quality reproductions which are better than old-fashioned silver halide prints by miles. Printers beat monitors by a factor of many!
If you want a friend to be able to print your photos, don’t use WordPress blogs as a vehicle. Use Picassa or the like, or e-mail the files directly.
How do I reduce the resolution of my pictures?
Use an image processing package; Ferret has already mentioned two good free ones that you can download. I use a many-years-old copy of Paint Shop Pro version 5 – it really isn’t rocket science.
Open your full resolution picture and don’t immediately reduce its resolution. Crop it, bugger around with the brightness, contrast and luminance first, while it’s still at high res. When you’re happy with the result, then reduce the resolution – you’ll probably be offered several different algorithms to chose from. Read your program’s HELP screens, try out the different methods and see which one is appropriate for your picture. The program will keep the aspect ratio correct automatically, so long as you only specify one dimension, usually the width. Cut this down to 700 px. You will gain nothing (on WordPress or the Chariot) by making it bigger. When you save it, don’t increase the .jpeg compression if your program offers you the choice.
A bit more about compression
Your camera may output directly in jpeg, with a built in, unchangeable compression factor, or it may allow you to choose. The lower the compression, the better the quality and the larger the file.
Alternatively, your camera may output in a raw, non-compressed format (I’m guessing here). If it does, do your processing in that format and then, when you finally save in .jpeg, choose a very low compression. This will keep the quality high and with a size of 700 px wide the file size won’t be too big.
File size, and why it matters
Quite apart from the download time, which has already been addressed, large files use up storage. Kate’s picture, which is about 3 MB at the moment, comes down to roughly 150 KB when the resolution is reduced. That means that we can store 3,000,000 / 150,000 = 20 times as many pictures, without losing display quality.
Boadicea's Chariot 