Exploring images in computers. Some images I've collected. Some animated GIFs I've collected.

Intro

Images or graphics are represented in computers as dots (pixels) of colors. Raster graphics deal with images using pixels; Vector graphics deal with images using math equations. Animation are still images over time. Computer modeling in 2D and 3D are essentially more complex vector images (EG: Blender and SketchUp).

Most operating systems come with a simple image viewer, EG: Windows Explorer can view images. Some image viewers also manage pictures with tagging and such, EG: Picasa. Some image viewers also view animated files (GIF89) or even videos, EG: IrfanView.

Most operating systems come with a simple image editor, EG: Windows comes with Paint. The most famous powerful raster graphic editors are Photoshop (not free) and GIMP (free). The most famous powerful vector graphic editor are Illustrator (not free) and Inkscape (free). Some graphic editors (like ACD Canvas) do both raster and vector.

Key Concepts

Some key concepts in images and image editing in computers.

Pixels. Aka px. A pixel refers to the smallest addressable element in an image, image output device (EG: Display), or image input device (EG: Camera or scanner). An image or display consists of a grid of pixels. EG: A 800 pixel wide by 600 pixel high image has an image resolution of 800x600.

Pixel Resolution. Pixel resolution refers to the pixel count of an image. Here are common representations of resolution:

Spatial Resolution. Aka optical resolution or visual resolution. This is a measure of the clarity or fuzziness of an image. EG: An image with high pixel resolution may have poor spatial resolution if the image is out of focus or appears pixelated/blocky because the viewer is too close. Other problems can arise when the viewer is too close (or the display is too large), including the following: The viewer has to turn their head too much, and the viewing surface goes too far from perpendicular to the viewer.

Pixel Density. Pixels per inch (ppi). An image of a specific pixel resolution will have a higher pixel density on a smaller display than a larger display. Assuming the image is in focus, the appropriate pixel density needed to have good spatial resolution will depend on the physical display size, the distance between the display and the viewer, and personal preference. EG: A 1080 workstation display viewed from an arms length should have be 72-96 ppi, i.e. say 18-26" diagonal, but a 1080 TV display viewed from 6' away should be say 50 ppi, i.e. roughly 36-46" diagonal. Note that some files (like GIF) are fixed at 72 ppi.

Print Quality. Dots per inch (dpi) or dots per cm (dpcm). Print quality is similar to pixel density, but frequently more than one dot of ink is required for each pixel in an image. EG: Dot matrix printers are 60-90 dpi, inkjets printers are 300-600 dpi, and laser printers are 600-1800 dpi. Typically a ppi of less than 100 should be reserved for large print that is always viewed from a greater distance. 200 ppi and above is usually good enough to avoid blockiness in most hand held printed material.

Points. A point is a unit of measurement common in printing and font sizes. 12 points = 1 pica. 72 points = 6 pica = 1 inch.

Color. In computers a color is mix of different amounts of three primary colors: red, green, and blue (RGB). Each primary color goes from no color (0) to full saturation (1, 255, xFF, or 100%). While computers use the RGB color model, print typically uses the CMYK color model, and there are other color models, EG: HSV, YUV, and YCbCr.

Foreground Color (aka FG). This is the color of the "pen", "brush", and outline of text.

Background Color (aka BG). This is the color of the "eraser" and shape fills.

Color Profile. A "color" on one device may differ on another device. Color profiles are created for specific devices (by make and model) so that they can sync with a device-independent color space defined by the International Color Consortium (ICC). If in doubt choose the sRGB color profile.

Compositing. Compositing are the various techniques of combining images. There are many older techinques, concepts, and words from painting, photography, and film that predate comptuers. EG: The painter's algorithm is to paint distant objects first.

Layers. Simple images have one layer. Composite images have multiple layers, each like a transparent sheet of paper. The order that the layers are stacked can be changed. A layer may be hidden or shown. Parts of a layer may have varying degrees of transparency via the alpha channel. New images usually start with one layer (the background layer) with no alpha channel. A layer type depends on its channels. The layer types include: RGB, RGBA, Gray, GrayA, Indexed, IndexedA.

Channels. A channel is a single component of a pixel. A channel typically has a value from none (0) to full (usually 8 bits, 255, xFF, 1, or 100%). A channel also refers to the grid of values for a channel of the image, EG: An 800x600 layer typically has 4 channels (RGBA), where each channel is 800x600 so that an RGBA tuple (R, G, B, A) can be assigned to each pixel. Here are the typical channels:

Bit Depth. Bit depth refers to the number of channels an image has. EG: An RGB image has 24 bit depth because its 3 channels each have 8 bits.

Modes. The mode of an image is related to its channels:

Masks. Masking is a compositing technique that selects parts of layers to be combined by covering or revealing the parts.

Metadata. Metadata is data about data. Image metadata includes things like caption, credits, creation date, and location. Some editors by default wipe out image data when saving. As of 2011, the most common image metadata formats include the following:

Crop. To crop an image or layer is to select the parts of an image to retain. Hard cropping discards data, while soft cropping hides the extra data.

Brush. A brush is a pixmap (image) or set of pixmaps used in painting. When a paint tool (EG: Pencil, paintbrush, eraser, airbrush) uses a brush, the pixmap is applied to the image.

Gradient. A gradient is a set of colors or opacities or both arranged in order. A gradient can be put in selections or used with a paint tool. Gradients are usually in linear order but may be conical, spiral, selection shaped, etc.

Pattern (aka texture). A pattern is a small image for filling regions by tiling. A pattern is tileable if the tiles are seamless. Patterns are typically used with tools like bucket, paint, or clone. Patterns may also be used when stroking paths.

Paths. In vector graphics paths (aka lines; curves) consist of one or more components, each of which may contain one or more segments. Components may be disconnected from each other. Segments are two connected end points (aka knots; anchors; outer control points) with no points in between. A segment is a Bézier curve. Bézier curves (aka splines; segments) are parametric curves. Each end point of a segment has a vector (aka handle; inner control point) with direction and magnitude describing the curve from the end point. If a segment is a straight line, the its handles have zero length. A component or path with all straight segments is polygonal. If a component connects is first and last points, then it is "closed", other wise it is an "open" component.

Stroke. Stroking a path applies styling to a path. EG: Thickness, cashes, and color.

Image File Formats

Here are some of the major image file formats. There are, of course, many other image file formats. For the Web, the rule of thumb is JPEG for photos and PNG for files with fewer colors.

GIF

Graphics Interchange Format (GIF).

JPEG

Joint Photographic Experts Group (JPEG).

PNG

Portable Network Graphics (PNG).

ORA

OpenRaster (ORA).

TIFF

Tagged Image File Format (TIFF).

SVG

Scalable Vector Graphics (SVG).

Other Image File Format

Bitmap (BMP). Aka Device Independent Bitmap (DIB). BMP is an older and now minor image file format common in Windows and OS/2, that tends to have large file sizes for a given pixel resolution.

PICT is an older and now minor image file format common in older Apple Macintosh computers.

Photoshop Document (PSD). Aka PhotoDeluxe (PDD). The native file format for the Photoshop app.

eXperimental Computing Facility (XCF). The native file format for the GIMP app. Save all the info (layers, transparence, etc. but not undo history). Edit in xcf as needed, then export to a format like JPEG, PNG, GIF, TIFF, etc.

RAW. An image file from a digital camera that has been minimally processed. RAW files tend to be very large. There are many filename extensions including: .3fr, .ari, arw, .srf, .sr2, .bay, .crw, .cr2, .cap, i.iiq, .eip, .dcs, .dcr, .drf, .k25, .kdc, .dng, .erf, .fff, .iiq, .mef, .mos, .mrw, .nef, .nrw, .orf, .pef, .ptx .pxn, .R3D, .raf, .raw, .rw2 .raw, .rwl, .dng .rwz, .srw, .x3f

Image Viewers and Organizers

All image organizers are also image viewers, but not all image viewers are image organizers. Most image viewers and organizers usually do at least minor raster image editing.

To look at images in a computer, people probably use an image viewer/organizer that comes with their computer, and then further organize/manage their image files with the file manager that comes with their operating system.

For example: As of 2013-01-20, I use the following:

As far as image organizers, here are some (roughly ordered by price):

See these related links at Wikipedia:

Image Editors

Image editors come in two major flavors:

The list above can be converted to a flat list of five kinds of image editors:

Editors that deal with sequential still images over time are not really image editors any more but editors for video and animation.

I have only used a few image editors, but I want to review some of the major ones to have perspective. I am ordering them roughlyl by price. My personal favorites as of 2013-01-20 are in bold.

See these related links at Wikipedia:

GIMP

GNU Image Manipulation Program (GIMP) is a free (gratis and libre) and cross-platform raster graphics editor.

Selections

To cut and move a selection: CTRL+ALT.

To copy and move a selection: SHIFT+ALT.

To add to a previous selection: Hold SHIFT while making a selection.

To subtract from a previous selection: Hold CTRL while making a selection.

To get the intersection of selections: Hold SHIFT+CTRL while making a selection.

In QuickMask, red indicates not selected. Degree of selection is done by painting from no selection (0, black) to full selecton (255, white). Selections can be saved to one or more selection channels. Selections can be copied and pasted.

When a selection is copied or cut, it is automatically made avialable as a brush.

GIMP Extensions

.xcf is a native GIMP file. Use it to save all the info (layers, transparence, etc. but not undo history). Edit in .xcf as needed, then export to a format like JPEG, PNG, GIF, TIFF, etc.

The extension of GIMP brushes include .gbr (regular and color/image brushes), .gih (image hose, i.e. animated), and .vbr (parametric brushes). Google "GIMP brushes".

.ggr is for GIMP gradients. Google "GIMP gradients" or "SVG gradients".

.pat is for GIMP patterns. GIMP can also use PNG, JPEG, BMP, or TIFF files as patterns.

Miscellany

GIMP can import SVG paths and open SVG files as GIMP images.

If your copy and paste creates a floating selection, i.e. a temporary layer, then it must be anchored to an existing layer or converted to a new layer.

GIMP can be scripted with Script-Fu (a dialect of Scheme/Lisp). Every statement is surrounded by parentheses. The function/method/operator is the first item in the parentheses, and any other items are parameters. Place your scripts in the scripts directory of gimp user install.

; comment
(+ 3 4 5) ; prefix notation
(let* ( (a 1) (b 2) ) (+ a b)) ; local variables
(let* ( (a 3) ) (set! a (+ a a))) ; change value
(define (myFun a b) (+ a b)) ; define functions
(myFun (myFun 3 4) 5) ; call functions
(let* (a '(1 2 3)) a) ; list
(let* (x '("foo" (1 2 3))) x) ; lists can contain lists
(cons 1 '(2 3)) ; concatenate
(let* ((a 1) (b 2)) (list a b 3 4)) ; define list
(car '(1 2 3)) ; returns 1
(cdr '(1 2 3)) ; returns (2 3)

Links that lead to off-site pages about GIMP.

Links

Links that lead to off-site pages about images.

Inkscape

Inkscape is a free (gratis and libre) and cross-platform vector graphics editor.

Wikipedia on Images

Miscellany

Page Modified: (Hand noted: 2013-01-12 05:29:32Z) (Auto noted: 2013-02-06 02:59:58Z)