Working with Images

About Image Size

Does size really matter? Look at these 3 pictures.

Small Browser Window

Notice the picture of the building; it's a bit big for this space. Part of the picture is cut off, and if it were any larger, the text would be squeezed into a single column of words, and many of them could end up being covered over.

640x480 browser; 15" screen
Building picture: 320x240 pixels

Average-sized Browser Window

This one has a nice balance between the picture of the building and the center text.

This is the most common size browser, often found on 17" monitor screen, or on larger monitors where people are not using the full screen for their browsers.

800x600 browser: 17" screen
Building picture: same size

Larger Browser Window

On this one, the center text is spread out, leaving lots of unused space on the page, but it's readable.

Someone working with a large monitor screen, 19"-21" or larger, would be tempted to make the building picture bigger. But imagine how a larger picture would look on one of the other two browser sizes shown above. You'd have to scroll back and forth as well as up and down!

1024x768 browser; large screen
Building picture: same size

This is one of the reasons why we suggest that pictures on your pages be about 300 pixels wide.

Okay, what's a pixel?

A pixel is a dot.

Dot size: The size of the dot depends on your screen resolution. If you have a 17" monitor and run it at 800x600 resolution, then a row of 800 of the dots would go all the way across the screen.

If you reset the monitor to 640x480, then it would take only 640 dots to go all the way across the screen: the dots would be further apart (lower resolution).

Monitor size: If you have a small 15" monitor, it is easiest to read your pages if you set the resolution to 640x480 pixels. If you set it higher, you'd have a lot of dots crowding into a small space - all of the images and text on your screen would be tiny.

At 17", the usual setting is 800x600 pixels.

By the time you've got a 19" or 21" monitor or bigger, you've started setting the resolution even higher, to 1280X1024 pixels or more.

Browser size: Not everyone runs their web browsers so that it fills the entire screen. The most usual setting these days is 800x600 pixels, even for people who have larger monitor screens.

Can't I just use inches to measure my pictures instead of pixels?

The short answer is yes.

If you feel comfortable that you know how big to make your pictures, you can certainly use inches to measure them.

However, in PhotoPaint, the inch measurement is for
how big the picture will print,
not how big it will look on the screen.

For example, the picture below was created 4 inches wide at 72 dpi (dots per inch).

This picture is 288 pixels wide.
(4 inches wide at 72 dpi or lpi)

The following picture is also 4 inches wide, but at 100 lpi (lines per inch, which is essentially the same measure as dpi, dots per inch). Notice how much bigger it is.

This picture is 400 pixels wide. (4 inches wide at 100 dpi or lpi)

This is the reason web developers usually refer to the size of images in pixels. 100 pixels is 100 pixels on the screen, no matter what the print resolution is. However, if you prefer to work in inches, your pictures will come out fine. You just need to be aware that your results will depend on the dots per inch (dpi) or lines per inch (lpi) at which you are working.

In other words, if we suggest that you make your pictures no larger than 4 inches, we would have to specify 4 inches at 72dpi. If we suggest 300 pixels, and you set it at 300 pixels, you can use whatever print resolution the image already has, and it will still turn out 300 pixels on the screen.