Family Tables Gallery II

This is a 48 pixel image displayed at normal size or "natural" size. No size has been set for the image.

This is the same image, same number of pixels, displayed at twice normal size. The pixels are starting to show.

This is the same image, same number of pixels, displayed at four times normal size. The pixels really show!

This is the same image, same number of pixels, displayed at eight times normal size. Wow, see the pixels! If you don't believe that this is the same image, just right click (Mac cmd+click) any image above and choose "view image" to see it in its "natural" size. Do you see? The number of pixels remained the same but the size of each pixel grew to eight times the size they were in the first image.

We have seen here that the size of the display does not chage the pixel count. If you let a web page display an image in it "natural" size, it seems to look good. If you display it bigger than natural size, it looks bad. So what is "natural" size?

Here is where a bit of engineering knowledge helps. A computer monitor screen displays pixels. When we buy a computer monitor, we look at screen size. LCD monitors (flat screens) have a "native" or "natural" screen size. That is expressed in over all size. Many will say 1024 by 768. That means that it can display 1024 pixels across and 768 pixels down. Big deal. What I want to know is how to display my 4 by 6 picture on a web page so it looks like 4 by 6 on my screen.

Here's the trick. Get out a ruler and measure how wide is your screen. For example, if it is a monitor that is rated at 1024 by 768 pixels and it measures 12 inches across then 1024 pixels fit into 12 inches. Divide 1024 by 12 and you get how many pixels in one inch or in this case a little over 85 pixels to the inch.

Now let's try a little experiment. I scaned a ruler at 150 pixels to the inch. If I display it at natural size it will not be the same size on the screen as it is in reality. Why? Because the screen is made to show only 85 pixels to the inch. The image is 875 pixels by 144. Here it is without any size specified, that is in its natural size, they way we show pictures in the albums.

Six inch ruler

On the example screen above this six inch ruler image measures over 10 inches!

Now let's size it. If I want to image to be six inches wide, that will be 85 times 6 or 510 pixels. On the example screen it does measure six inches. What does it measure on your screen?

Six inch ruler

Now, how does this affect my picture? For images displayed in your web browser, which is how we all see the Family Tables Gallery, it will always display in the image's natural size. If that natural size is bigger than the pixel count of your screen, you will get scroll bars on the sides and bottom of the browser window. Wouldn't it be nice if everyone had a monitor with the same resolution? It does not happen. Monitors will vary from a low of 85 pixels to the inch to a high of 106 pixels to the inch. If you measured the smaller image above and got six inches, then your screen is about 85 pixels to the inch. If you measured the image above and got a smaller number then your monitor is running a higher resolution like 96 or greater. It puts more pixels into one inch.

The Family Tables Gallery software takes care of some resizing for you but it cannot resize a huge image down to a good looking screen image. That is why you may need to do some resizing before you upload your picture to the website. The file size of the ruler image is only 16.2 KB. Very tiny for an image that takes up ten inches of screen! The Family Tables album sofware resizes images to 590 pixels on the longest side. Many digital cameras have a resolution of "3.1 mega-pixels." That is over 19 thouands times larger than the ruler image! Did you notice the sizes of the starter images on the previous page? Their file sizes are very small.

Now for the kicker: Photo editing software only does one thing: changes pixel colors. That's it, that's all. Most programs get real fancy about it but that is all they do. Now you can work with any photo editing package.