Morphology & connected components, interactive demo

Sets and structuring elements

A binary image is a set $A$ : the positions of its foreground pixels. The structuring element (SE) $B$ is a small binary matrix, i.e. a set of offsets around an origin, for example a $3 \times 3$ square, a cross or a disk. $B_z$ denotes $B$ moved to position $z$ , and $\hat B$ its reflection through the origin (for the symmetric shapes here, $\hat B = B$ ).

Dilation and erosion

A \oplus B = \{\, z \mid (\hat B)_z \cap A \neq \emptyset \,\}, \qquad A \ominus B = \{\, z \mid B_z \subseteq A \,\}

Dilation keeps every position where $B$ touches the object: objects grow by the shape of $B$ , small holes and gaps close, and nearby objects merge. Erosion keeps only the positions where $B$ fits completely inside: objects shrink, and specks and thin lines disappear. The two are dual: eroding the foreground is the same as dilating the background, $(A \ominus B)^c = A^c \oplus \hat B$ .

Both are max and min filters: dilation takes the maximum of the image under $B$ , erosion the minimum. Like the median, they are non-linear. Here pixels outside the image count as background for dilation and do not constrain erosion.

Opening and closing

A \circ B = (A \ominus B) \oplus B, \qquad A \bullet B = (A \oplus B) \ominus B

Opening erodes and then dilates. Everything that survives the erosion grows back, so large objects keep their shape, but whatever $B$ cannot fit into (specks, thin lines, narrow bridges) is gone. The opening is the union of all copies of $B$ that fit inside $A$ . Closing does the opposite: it fills holes, gaps and bays that are smaller than $B$ without growing the objects. Applying either one a second time changes nothing.

The boundary $A - (A \ominus B)$ keeps the pixels removed by erosion: an outline as thick as the radius of $B$ .

Connected components

Two foreground pixels belong to the same component if a path of neighboring foreground pixels connects them. With 4-connectivity, neighbors share an edge; with 8-connectivity, diagonal neighbors count too. A diagonal line is one object with 8-connectivity but falls apart into single pixels with 4-connectivity.

The classic two-pass algorithm scans the image row by row. Each foreground pixel gets the smallest label of its already visited neighbors (left and above), or a new label if there is none. When different labels meet, as at the bottom of a U, they are recorded as equivalent in a union-find structure. A second pass replaces every label by the representative of its set. The labels then give each object's area, bounding box or centroid.

Try this

Apply an opening with the 3 × 3 square: the two disks joined by a bridge become two components, and the specks, the diagonal line and the spike disappear.
Apply a closing: the small holes in the rectangle, the gap in the ring and the notch in the disk are filled. The 5 × 5 hole is only filled from radius 3 on, when $B$ no longer fits into it.
Dilate with radius 3 and compare the shapes of $B$ : the square keeps the corners of the rectangle, the disk rounds them, and the cross leaves them notched.
Choose the boundary operation and increase the radius: the outlines get thicker.
Set the radius to 0, so that every operation leaves $A$ unchanged, and switch between 4- and 8-connectivity: the diagonal line is one component or 17.
Paint a diagonal line of your own and switch the connectivity again.
Paint two shapes that almost touch and dilate them: they merge into one component, and the count in the values panel drops.