Difference between revisions of "Guidelines"
(→Antialias) |
|||
| Line 36: | Line 36: | ||
(This concerns bitmap graphics only.) | (This concerns bitmap graphics only.) | ||
| − | Even if you plan to include to produce a small image or include it in a web browser, thus need only low [[resolution]], I recommend to produce a higher resolution picture first, and then [[downscale]] it. This is the principle of [http://en.wikipedia.org/wiki/Antialias antialias]. A double resolution 2W×2H -> W×H already gives a very good improvement. I recommend using integer multiples 2W, 3W, etc... Note that for images with uniform color areas, the downscaled PNG will have a size comparable to the original, possibly bigger. | + | Even if you plan to include to produce a small image or include it in a web browser, thus need only low [[resolution]], I recommend to produce a higher resolution picture first, and then [[downscale]] it. This is the principle of [http://en.wikipedia.org/wiki/Antialias antialias]. A double resolution 2W×2H -> W×H already gives a very good improvement. I recommend using integer multiples 2W, 3W, etc... Higher multiples can be useful to fight against [[moire|moirés]]. Note that for images with uniform color areas, the downscaled PNG will have a size comparable to the original, possibly bigger. |
Caution: in some image manipulation programs, you need to convert paletted images to true color before downscaling, or the program may, instead of averaging the color, use the nearest matching color in the palette, resulting in the absence of antialias. | Caution: in some image manipulation programs, you need to convert paletted images to true color before downscaling, or the program may, instead of averaging the color, use the nearest matching color in the palette, resulting in the absence of antialias. | ||
| Line 53: | Line 53: | ||
There has been some screens with very high spatial resolution around for some time (the Apple company calls them Retina screens), I do not how these images render on them. | There has been some screens with very high spatial resolution around for some time (the Apple company calls them Retina screens), I do not how these images render on them. | ||
| − | + | There is a specific phenomenon, [[moire|moiré]] that we will illustrate on particular examples that the author of the pages you are reading actually encountered while producing mathematical illustrations. | |
Revision as of 16:42, 10 December 2014
Contents
File format
I am not going to explain in length the difference between bitmaps and vector graphics. In short, the first is a rectangular array of pixels, the second is a description of shapes by linear or simple curved pieces, and of areas bounded by these type of curves.
A bitmap graphic
A vector graphic
For simple objects, a vector graphics will take much less memory and will look perfect at any scale, while a bitmap's resolution (number of pixels) needs to be adapted to the situation. A bitmap is more adapted to complex images, like fractals or to elaborated coloring schemes.
Bitmaps
As of 2014, I strongly recommend PNG for bitmapped images. It is a lossless compressed format. Pictures with large areas of uniform color compress particularly well. It has been my favorite for nearly 20 years. Back then, to include them in a TeX/LaTeX article there was a tedious conversion to be made from PNG to EPS but now it is recognized by default by pdfLaTeX. Of course I do not know what will be the situation in 20 years (anyway, will this wiki still exist?)
Pros for PNG:
- lossless
- free and open
- widely supported by nearly all programs and OS
- uniform areas compress well
- can include metadata
- pdfLaTeX takes it!
Vector
My favorite tool for creating/editing by hand vector images is Inkscape. Use SVG for saving loading editing and inclusion in webpages. Use PDF for exporting towards pdfLaTeX.
Concerning the method for producing computer generated vector images of mathematical curves or sufaces, I do not have a firm preference. Some free and some commercial mathematical programs can output vector images. I was used to a complicated workflow: write a c/c++ program that outputs a postscript file, (sometimes directly write in postscript), then convert postscript to pdf with any tool for inclusion in pdfLaTeX.
Antialias
(This concerns bitmap graphics only.)
Even if you plan to include to produce a small image or include it in a web browser, thus need only low resolution, I recommend to produce a higher resolution picture first, and then downscale it. This is the principle of antialias. A double resolution 2W×2H -> W×H already gives a very good improvement. I recommend using integer multiples 2W, 3W, etc... Higher multiples can be useful to fight against moirés. Note that for images with uniform color areas, the downscaled PNG will have a size comparable to the original, possibly bigger.
Caution: in some image manipulation programs, you need to convert paletted images to true color before downscaling, or the program may, instead of averaging the color, use the nearest matching color in the palette, resulting in the absence of antialias.
For instance, the following image (left) shows a thick line. All pixels are black or white. It has been downscaled by a factor of two in two ways: by color of nearest pixel (middle image), by averaging grayscale value on 4 pixels (right).
In [Gimp] and in many other programs, the scaling method by averaging is called "Linear" (2014).
Below, the same three images, shown at normal scale:
On a typical screen in 2014 the image on the right looks smoother that the other two images. There has been some screens with very high spatial resolution around for some time (the Apple company calls them Retina screens), I do not how these images render on them.
There is a specific phenomenon, moiré that we will illustrate on particular examples that the author of the pages you are reading actually encountered while producing mathematical illustrations.
