Uploading Images – Pixels And File Sizes

window-at-forty-percent

What’s the difference between file size and pixel size or number?

Disclaimer

I hope I don’t mess this up and make the answer so complicated that it leaves you, the reader, even more in the dark than before you attempted to wade through this. That said, here goes:

When you take a photo with your camera, the pixel size will depend on the specification of the camera. So, for example, my Fuji camera has 16 megapixels and the dimensions of the photo are 4896 x 3264 pixels.

If you multiply those two numbers you will see it comes to about 16 million.

A Diversion

I have to make a small diversion here to explain what those 16 million pixels are.

Those pixels are captured by 16 million micro-lenses laid out in a grid. That’s 16 million tiny lenses stuck onto a piece of material not much bigger than a thumb nail – which is more or less what a camera sensor is.

OK, diversion over, and back to the question.

If I were to take that 4896 x 3264 pixels image to a camera shop and ask them to print it full size, they would print it at 300 dots per inch.

Each dot is a squirt of ink that the printer sprays onto the paper.

There’s a reason for it being that number of dots per inch.

The reason is that when viewed from a ‘normal viewing distance’, the image will look ‘continuous’ to the human eye.

At 300 dots to the inch, my photo will print at 4896/300 x 3264/300 inches. That’s about 16 inches by 11 inches.

And you can imagine the kind of viewing distance at which someone might look at a photo that is 16 inches by 11 inches.

Let’s say, though, that I knew that the viewers would be standing much further back. Then the printer could get away with printing at, say, 150 dots per inch.

Next time you are near a bus, take a look at the advertisement that’s plastered on the side of it.

When you are close up. you can see the individual dots. But from further away, your eye and brain sees one continuous image.

The bottom line is that the size of the image that is printed depends on the density of the dots that are squirted onto the paper. The more spaces between the dots, the bigger we can print the image.

The more space there is between the dots, the less ‘clean’ and dense the image will look when viewed close up.

Computer Screens Are Different

Computer screens are quite different. Each model has its own native resolution or pixel density.

72 dots per inch is usually taken as a good standard.

And here is the crucial difference. Unlike with printing onto paper, you can’t cram more pixels onto the screen. The screen manufacturer might be able to when they build the screen, but you can’t.

The screen is built to a specification and you can’t make the pixel density higher.

You can’t cram in extra pixels and make the image look denser.

That means any ‘extra’ pixels are wasted.

And each unneeded, extra pixel increases file size.

WordPress

The question about file size and pixel size was asked in the context of uploading images to a WordPress site.

And one of the things you will know if you have a WordPress site is that you can specify the dimensions at which you want images to show.

Let’s say the media settings in the Admin panel in a typical WordPress site specify a pixel size of 600 pixels wide.

Uploading a full-size image of 4896 x 3264 pixels would not produce a ‘better looking’ image on the page because the extra pixels would not show.

And there would be a detrimental effect on the speed at which the site can load the images. I discussed this in my last post.

Instead, what you want to do is to create a small version of the original file at around 600 pixels and 72 px per inch and upload that.

The Wonder Of JPEGs

Now we get to the other component of file size, which is the wonder of JPEGs.

The beauty and the point of JPEGs is that they can pack an image into a small file size.

They do this by recognising similar nearby colours and mapping them. Then they pack themselves up, including the intructions for how to unwrap the colours. When the JPEG is opened to display it on a screen, the formula unpacks itself and displays the image.

It’s amazing, isn’t it, to think of a JPEG packed away in a tiny file on the WordPress servers, waiting to be asked to unpack itself so that you can view it on the screen – and doing that time and time again, on demand.

Saving JPEGs

There are many different tools or applications for creating JPEGs.

The feature they generally share is that they allow you to save different quality JPEGs.

What that means is that the mapping instructions can work on an individual pixel level or on larger blocks of similar coloured pixels.

The finer that mapping, the bigger the file size. If you are going to get your photo printed on paper and the printer wants a JPEG, then you would give him/her a top-quality JPEG – one that you saved at 100%.

The file size would be big – but it doesn’t matter, and you want the best quality printed image possible.

The unconverted 4896 x 3264 pixels files from my Fuji are about 30 megabytes. If I make a full-size JPEG at highest quality from one of them, it will probably come in at around 10MB.

But on a computer, you can get away with a lower quality (smaller file size) and the viewer will not be able to see the difference on the screen.

Not All Images Are The Same

Think of a photo of a red beach ball: The JPEG application will find lots of similar neighbouring red pixels, so it will be able to make a very small file.

Now think of a complex nature scene: With the many complex hues of nature, the JPEG algorithm will have fewer neighbouring colours to work with, so the resulting file will be larger.

Here are a couple of examples of what I mean. The first photo is complex. In order to get it to look ‘clean’, I had to save it at 45% quality. At 600px wide, the file is 61KB.

I saved the second version of the photo at the lowest setting. It is still 25KB and you can see a lot of pixelation.

Saved at 40%
Saved at 40%
saved at one percent
saved at one percent

With this second image, it’s a different story. Saved at 45%, the file size is 25KB. I saved the second version at the lowest quality setting. It is 12KB – and even at this lowest setting the second version is not obviously worse than the higher-quality version.

saved at 45%
saved at 45%
saved at one percent
saved at one percent

And here is a kind of ‘in between’ image. It is complex, but a lot of the image is taken up with the solid colour background. Saved at 40%, the file size is just 20KB. With the second version – saved at minimum quality – the file size is 12KB and the flowers look pixelated.

Saved at 40%
Saved at 40%
Saved at one percent
Saved at one percent

In order to show you how badly pixelated the ‘one percent’ version is, here is a blow up of part of the image.

pixelated
pixelated

In other words, if you want a clean-looking image, then you have to take into account what kind of image it is. More complex images ‘demand’ that you save at greater quality, which means a greater file size.

But before you think about what quality of JPEG, make sure you save at the pixel dimensions that suit the purpose – and for the web that is usually not more that about 600px wide.

Of course, there may be times when you want your viewers to click the image to see a bigger version – and it that’s the case, then save at a bigger pixel size, like I have done in the following image, which is 115KB.

I took the photo in Edinburgh during the Fringe Festival this summer.

Can you see the ‘Yes’ sticker on the monument behind the violinist? That was a campaign sticker promoting independence for Scotland in the referendum held in September this year.

Click the image to see a larger version.

YES

What About Phones

Finally, when saving an image taken on your phone, you may or may not have an option to save at different qualities.

It was the desire to have control over the quality and size of JPEGs for the Web that drove me to find a good image re-sizer for my iPhone, which you can read about in my last post.

I Could Spit

Just watched a bit of Autumn Watch. Should be called Death Watch – heartbreaking report on the damage to wildlife from the chemicals in anti-depressants and other medicines that pass through us and into the filter beds at the local sewage treatment plant where the water is sprayed on the sludge and birds eat the invertebrates that feed on the microbial sludge.

They showed a study of starlings fed a dose of antidepressants. They are lethargic and eat less and are less sexually active and fertile.

Chris Packham suggested – shorter half-life for the stuff in the tablets. And treatment plants that take the chemicals out.

Sure, I can see that being a big priority.

I could spit.

Solved – Photo File Sizes And Mobile Apps

JenT asked me whether I was up for a photo challenge, and directed me to Photography 101 from WordPress. She said she was going to do the challenge and that she was going to post from her phone.

The challenge starts in about a week from now. Sign up in the link above to take part.

Because it is a daily challenge, it seemed a good idea to post from the WP app on my phone, except for one thing.

That one thing is the dreaded subject of image size.

I am not talking about pixel size, but about file size.

To give you some background, I have been blogging on this site for several years and when I look in the Admin panel I see I have uploaded 1,104 images. Yet I have only used 3% of the allocated space.

The reason for this is that I use Save For Web And Devices in Photoshop and resize the pixel dimensions to approx 600px wide.

When I do that, Photoshop reduces the file size to around 40KB.

The reason I reduce the file size is because I have got into the habit of doing it.

I have several self-hosted websites, and it is critical to upload small file sizes that can be delivered to the web browser quickly. Failure to do that will slow a site down.

And I carry that mindset over to this WP.com site.

The fact is that WordPress.com can deliver images to the web browser very fast indeed because it has very powerful servers. So file size is not as critical.

But as some people who are new to blogging and to WordPress.com find out, uploading full-size images starts filling up your allocated space very quickly.

[You might want to read JenT's article about what happens when you run out of space.]

So it is good practise to keep the file size – that is the KB size – down to no more than say, 40KB on average.

Which brings me back to posting from the iPhone…

Until today I had not found an image re-sizer that I liked or that did the job well.

But today after reading lots of comparisons today, I found a very good image re-sizer. It’s Reduce by Tobias Wiedermann. It’s iOS only and it available in the App Store for $1.99.

The original version of the image here as taken on my phone, is 2448 × 3264px and 1.4 MB. The ‘reduced’ image you can see here is 500 × 667px and 37 KB.

reduce-IMG_8320

As you can see, this file size is perfectly adequate for viewing on the web.

Otterly Delightful

otterly-delightful OK- that is the first time I have used a lousy pun in a title, and it will probably be a while before I try it again. Here’s a mockup of what it would look like as a greeting card – not sure what if any words would go with it – maybe something like ‘Have an otterly delightful birthday’. Any improvement on that would be most welcome – add it in the comments. flying-twigs-greeting-card-otterly-delightful