Image kernels, explained visually.

A small matrix is the engine behind sharpen, blur, emboss, and edge detection. It is also the first move inside every convolutional neural network. Here is how it works, one pixel at a time.

A pixel is just a number.

Below is a small grayscale picture of a face. Each square is one pixel, and each number is its brightness, somewhere between 0 for black and 255 for white. The grid on the right is the same data, drawn at its real size, so you can see what the numbers describe.

  • 028shadow
  • 150midtone
  • 225highlight
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
50
50
50
50
50
50
50
50
50
50
28
28
28
45
55
55
60
60
60
60
60
60
55
55
45
28
28
50
60
130
145
155
160
160
155
145
130
60
50
28
28
55
70
155
180
190
195
195
190
180
155
70
55
28
28
55
75
170
195
210
215
215
210
195
170
75
55
28
28
50
80
175
200
35
220
220
35
200
175
80
50
28
28
50
85
180
205
60
225
225
60
205
180
85
50
28
28
45
80
175
200
210
215
215
210
200
175
80
45
28
28
40
75
165
190
205
200
200
205
190
165
75
40
28
28
35
65
145
170
185
95
95
185
170
145
65
35
28
28
35
55
130
155
170
175
175
170
155
130
55
35
28
28
30
45
110
130
140
145
145
140
130
110
45
30
28
28
28
28
90
105
115
120
120
115
105
90
28
28
28
The image, as a grid of numbers
Same data, scaled up
Real size

One pixel at a time, multiplied and summed.

Slide the lens across the image. For every position, multiply each of the nine pixels under the lens by the matching weight in the kernel, then add the products. That single number is one pixel of the new image.

Input14 × 14
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
28
50
50
50
50
50
50
50
50
50
50
28
28
28
45
55
55
60
60
60
60
60
60
55
55
45
28
28
50
60
130
145
155
160
160
155
145
130
60
50
28
28
55
70
155
180
190
195
195
190
180
155
70
55
28
28
55
75
170
195
210
215
215
210
195
170
75
55
28
28
50
80
175
200
35
220
220
35
200
175
80
50
28
28
50
85
180
205
60
225
225
60
205
180
85
50
28
28
45
80
175
200
210
215
215
210
200
175
80
45
28
28
40
75
165
190
205
200
200
205
190
165
75
40
28
28
35
65
145
170
185
95
95
185
170
145
65
35
28
28
35
55
130
155
170
175
175
170
155
130
55
35
28
28
30
45
110
130
140
145
145
140
130
110
45
30
28
28
28
28
90
105
115
120
120
115
105
90
28
28
28
The math(7, 6)
215× 0=0
215×-1=-215
210× 0=0
220×-1=-220
220× 5=1100
35×-1=-35
225× 0=0
225×-1=-225
60× 0=0
sum405
new pixel255
Output

At the border, a choice.

The corner pixel only has three real neighbours, not eight. We have to invent the missing five somehow. Two common answers, shown to the right. The walkthrough above zeroes them out, which shows up as a black ring on the new image. Cleaner code, sharper border. The other option is to extend the existing edge outward, which keeps the picture intact at the cost of a little soft halo.

Zero outsideSetosa default
Extend the edgeSoft halo

Six kernels, one image.

Pick a kernel, then move across the source. The lens follows your cursor and the matching output pixel lights up on the right.

Source20 × 20 px
The math—
0
-1
0
-1
5
-1
0
-1
0
Sharpen

Hover the source.

ResultSharpen

Sharpen amplifies local contrast. The strong positive centre boosts the current pixel while the negative neighbours subtract anything that already looks similar, so edges read louder.

A field guide to six matrices.

0
0
0
0
1
0
0
0
0

Identity

The identity kernel leaves the image unchanged. Every output pixel is exactly the input pixel beneath the centre cell. A useful reference point.

0
-1
0
-1
5
-1
0
-1
0

Sharpen

Sharpen amplifies local contrast. The strong positive centre boosts the current pixel while the negative neighbours subtract anything that already looks similar, so edges read louder.

0.11
0.11
0.11
0.11
0.11
0.11
0.11
0.11
0.11

Box blur

A box blur averages each pixel with its eight neighbours. Differences shrink, transitions soften, fine grain disappears.

divide by 9

-2
-1
0
-1
1
1
0
1
2

Emboss

Emboss leans on a directional difference, top left versus bottom right, then adds a mid-grey bias so light comes from one corner. The image looks pressed into metal.

add 128

-1
0
1
-2
0
2
-1
0
1

Sobel X

Sobel kernels isolate change in one direction. This one responds to horizontal change, so vertical edges glow and flat regions fall to mid-grey.

add 128

-1
-1
-1
-1
8
-1
-1
-1
-1

Outline

Outline subtracts every neighbour from a pixel scaled up eight times. Where neighbours match, the result is zero, so flat regions go black and only sharp transitions survive.