open main page here

I'm on a couple of intenet forums about wood and questions and issues often come up about how to handle images / image files for posting to the sites. Thus this discussion ...

There are three related factors in images that are relevant to posting images on the internet:

(1) The compression factor (this and the image dimensions together determine file size)
(2) the dimensions (how big is the image in pixels)
(3) the file size (how big is the file in bytes)

Below is a discussion of these three items.

what it is and what it does

The compression factor is mostly of concern only because it directly impacts file size.

There are "lossless" and "lossy" image formats. "Loss" in this case refers to image quality, so lossless is very high quality but has the disadvantage of not being compressable (compression can be good for a couple of reasons). Lossless formats are most useful for hard-copy photographic prints but are NOT the best choice for display on a computer screen. "Lossy" formats allow the image to be "compressed", which doesn't mean "shrunk in size" in the NORMAL sense of "made to look smaller" but rather shrunk in a way that decreases quality of the image and the size of the file required to contain it but which does NOT, if done properly, decrease the quality of an image on a computer screen.

Some people have the totally mistaken imression very little compression (and thus big file size) is better. If you want to make hard-copy prints of an image on photographic paper, then this is true, as will be explained below, but for display on computer screen, it is emphatically NOT true.

I am frequently sent images with file sizes up in the megabytes and when I decompress them properly, they show up on the computer screen with EXACTLY the same resolution but the file size is less than one TENTH of what I was sent. There is an example of that kind of thing in the discussion on compression below.

On the other hand, small file size does NOT automatically translate to small image size, and it is possible to post a small-file-size image on a web page and have it be so big that you have to scroll left-to-right to see it all.

For making hard-copy prints of images, you want either lossless or a very low-loss compression factor [in some tools this means a high number and in some tools it means a low number] but for computer screen display, a good compression factor is about 30/100 [or 70/100 if you are using a tool that has "high number means low compression"]

To demonstrate this graphically, I show below a set of the same image with different compression factors. The number system is 1 = very high quality, very low compression and 100 = very high compression, very low quality.

The three versions have the following characteristics [NOTE: these statistics were take BEFORE I applied the text to the images, so the actual file sizes are now larger, but only because of the added text)

compression = 1
picture quality
= the best
file size
= 398KB
compression = 30
picture quality
= excellent
file size
= 33KB
compression = 60
picture quality
= poor
file size
= 14KB

The significant factor to observe here is that reducing the file size by a factor of TEN by using image compression results in absolutely NO loss of image quality for display on a computer screen. If hardcopy prints were made from the files that produced the following two images, and then those prints were examined under a magnifying glass, you would likely see some differences, but even very close inspection will show only insignificant differences between them on your computer screen. The middle image uses the same compression factor that I use on all of my web sites.

The final image is just to show what compression does graphically, by taking it to such an extreme that it is clearly visible on the computer screen.

how big is your image going to be on the screen
NOTE: screen size discussions regarding images are always in pixels, so
all size references here are to pixels

Image dimensions are important because really large images require left-right scrolling and most people find that obnoxious. Up-down scrolling should be avoided if possible, but is much less of an issue than left-right scrolling.

There are two concerns here. First, what IS a good size, and second, how to you GET that size?

As to what is a good size, let's consider PC screens. Early in the history of PCs, a common screen size was 640 x 480. This was later replaced by 800 x 600 and then 1024 x 768. In recent times it has become more common to see 1280 x 768 and even 1600 x 900. It think that today (2011/2012) it's resonable to use 1024 x 768 as the base for image postings since smaller resolutions are very unlikely.

SO ... I generally keep my images to no more than 900x600 so they'll fit into a large window that takes up most of the screen but not all of it.

This does not mean you HAVE to use anything that big ... depends on what you're showing. I think most pics will be totally comprehensible in their level of detail at 600x400, but there could be reasons for going bigger.

The aspect ratios of course will vary depending on what you're showing. A log laying on the ground might make sense at 900 x 100 whereas a tall tree would use 100 x 600. The point is to keep the largest height no more than 600 and the longest length no more than 900. That way, your pic will not require any scrolling to view on the computer screen.

OK, so 900x600 or smaller is a good size, but what if the camera produces (as most do these days) something like 3000x2000 or even bigger? How do you change the dimensions? That question is beyond the scope of this discussion other than to say that there are many dozens (probably hundreds) of image manipulation tools available and they all have image reduction as one of their primative features, so learn how to use one of them. DO be aware, however, that "image reduction" can mean compression (as discussed above) but that's NOT what I'm talking about here, I'm talking about reducing the dimensions.

What I CAN do, to help you out, is show you how to see WHAT the dimensions are. I do this only for Windows PC, not LINUX or Apple.

There are a couple of ways to show image dimensions and here I present a technique for showing the dimensions of a single image and one for showing the dimensions of all of the images in a folder.

To quickly see the dimensions of an image, just use windows explorer to show the folder in which the images resides, and then right click on the image. I don't show a screen shot of what happens then, because my screen-capture program can't grab pop-ups, but what you get is a dropdown window and the very bottom selection in that window is "properties". Click on "properties" and you get this window:

Click on the "details" tab, and you'll get this:

And there you have the dimensions

To show the dimensions of all of the image files in a folder, first use windows explorer to open that folder, and then right click in the upper area of the file display section:

This will open a drop-down window that will showed a list of the things that are displayed with check marks next to them and at the bottom will have an option "more". Click on "more" and scroll down to, and click on, "dimension", like this:

Then click "OK" and your file display will now include the dimensions, like this:

how much disk space and transmission bandwidth is your file going to take

Disk space and transmission bandwidth are nowhere near as important as they used to be, but they are still worth considering. Fortunately, if you manipulate your images as discussed above in terms of compression and pixel size, the file size will come out to be quite reasonable and will not be an issue.

You should not try to set the file size per se, but rather set the other two factors and let the file size fall out as it will. If for some reason, the file is bigger than you want (some internet forums for example restrict image file size to around 100KB), then change one of the other factors and the file size will change accordingly.