Joseph K. Myers
Friday, March 14, 2003
10-19-03. The image should be less than 10 KB, preferably less than 5. (Less than 1 KB is not really any improvement, because of the latency in a connection and request.) Probably 100 pixels in the long dimension is good, or about 100x100 = 10,000 total pixels of space.
Remember that a lot of flexibility is good. I don't recommend hard-sizing thumbnails, because having an exact integer ratio (like 1/8 size) will produce a scaled picture that looks a lot better. A lot of cameras will produce the same size of digital pictures, so the thumbnails will look the same anyway, but it is still OK to have thumbnails of different size.
Yes, and always optimize the image. It takes time only once, and afterwards it is quicker downloading, and quicker decoding.
75% quality is OK.
6,072 bytes, 144x217.
10-19-03. Put the picture online at about half the real original size. Aim for about 800 pixels in the long dimension, or about 800x800 = 640,000 pixels total. Of course, you can be really loose, and the pictures are big enough to look at individually, so don't stress about providing identical fitting images, especially because you don't want to mess them up with poor scaling quality.
Also, having the picture at a real nice 90% or so level of quality will really help. It is OK to have this good, large copy of the picture be 100 KB, or more. I know I surely appreciate it.
63,363 bytes, 558x738.
3-15-03.
This example is a large vector image, rasterized and compressed with lossy JPEG. (Lossy is a compression scheme which loses information, but normally, in the case of photographs, this information is unneeded; this picture is an extreme example, to show the exaggerated effect.)
The original was obtained as a sample SVG file in the Batik toolkit, in the Apache XML project.
10-28-03.
These four same pictures (used from the Fall 2003 MyersDaily, of Miranda, my cousin, at the mall) are saved optimized with four quality levels: 25, 50, 75, 90, respectively.
I really don't want you to think about compromising between quality you really need, if you need it. That is why I jump all the way to quality=90 in the pictures, even though there are a number of levels between. 80, or 85, is too large for small on the web generally, and does not comfortably provide quality detail.
Simply, it is hard to get by with one level, even though it would be convenient. 75 is seeable and showable, and you should really go to 90 for the main view pictures that people can keep.
Yes, there are purposes for 25% quality images, and some artistic usefulness.
Look at the cup or the mouth to see the difference.