Is there a relationship between image dimensions and file size?

Question

I'm creating a HTML5 upload plugin (I'll link to it when it is completed) that reads an image from the file system, and then displays the image onto a canvas. I then read the canvas data and send it up to a server for processing.

Displaying the image on a canvas smaller than the original image dimension shrinks the file size down. What I noticed was that for a canvas of dimension 1024 x 768, the file size was the same for an input file of 5MB and an input file of 100+MB (around 1.1MB), which leads me to the question I ask today!

Answer 1

In uncompressed form, yes - in compressed form no, not necessarily.

In compressed form content is the dominating factor as well as type of compression. The more high-frequency signal the image has (noise, details) the harder the image is to compress, so two images of the same dimension can be compressed to two different sized depending on the content.

One small image with high frequencies can become larger than a large dimension image with low frequency (blurred, noise-free etc.).

If you get an image with large size after compression you can use low-pass filtering on it (ie. here: blur it a bit).

Answer 2

The image dimension is directly proportional to the image size. If you are processing the image before sending it to the server and resizing it then your no doubts your image size is going to be affected.

Answer 3

I found that images are resized in all kind of actions, e.g. by opening a jpg file and writing it back again, by using your PC's encoder which may give a different result than the original encoder did. I am still looking for a way to prevent that! So it seems logical that using a canvas and reading the image from there also changes the file size. I assume these links may help you further:

HTML5 canvas: image resizing

Html5 Canvas resize

Dick