What four numbers can do to a photograph: a field guide to Image Custom Matrix

If you have spent any time learning linear algebra, you remember the moment a 2×2 matrix stops being an abstract blob on the page and becomes something you can actually see. Multiplication by a 2×2 matrix is the simplest linear transformation in two dimensions, but most textbooks trap it behind equations. The Image Custom Matrix tool from Elysia Tools lets you type four numbers and watch them transform a real photograph into a stretched, sheared, mirrored, or rotated version of itself — without installing a library, writing code, or opening GIMP. That single capability is the whole point of this article: knowing which four values to type, what each one does, and when a transformation will distort the original enough to matter.

By the end, you will be able to predict what a 2×2 matrix does to a photograph, diagnose the four interesting families (scaling, shear, reflection, composite), and avoid the silent file-size trap that catches every beginner on their first try.

What the four entries of a 2×2 matrix actually do

The matrix M is written with four entries arranged like this:

| a  b |   | m00  m01 |
| c  d | = | m10  m11 |

When Sharp applies this matrix to every pixel (x, y) of your image, the output coordinates (x', y') follow a single, simple rule:

x' = m00  x + m01  y
y' = m10  x + m11  y

That is it. Each of the four entries is a coefficient on either the original x or y coordinate. m00 and m11 live on the diagonal — they control how the x and y axes are scaled and rotated. m01 and m10 are off-diagonal — they mix x and y, and that mixing is what produces a shear.

Because every entry is just a number between -10 and 10 (the practical range the tool accepts), each value behaves like a knob. The image you upload sees a 2×2 matrix of multipliers, and the resulting pixels tell you exactly which knob was turned.

The four transformation families in plain language

You can group almost any 2×2 matrix into one of four behaviors, and the tool itself classifies them in its output metadata:

– Identity: matrix [[1, 0], [0, 1]] — no change. The default. Useful as a baseline for comparison.

– Scaling: matrix [[2, 0], [0, 1]] stretches the image horizontally by a factor of 2; [[0.5, 0], [0, 1]] shrinks it to half size. Swap which diagonal entry has the value to scale vertically.

– Shearing: matrix [[1, 0.5], [0, 1]] tilts vertical lines to the right; [[1, 0], [0.5, 1]] tilts horizontal lines upward. The image stays the same size and area, but parallelograms replace rectangles.

– Rotation-like: matrix [[0, -1], [1, 0]] rotates the image 90 degrees counterclockwise. (Note: the tool’s affine transform is not a true rotation outside multiples of 90 degrees — for a clean 45-degree rotation you need a proper 2×3 affine or matrix3x3 transform.)

The tool’s source code explicitly classifies the matrix into one of these buckets and reports it in the response metadata. If you feed it [[2, 0], [0, 2]] you get the type scaling; feed it [[1, 0.5], [0.3, 1]] and it returns shear-combined because both off-diagonal entries are nonzero while the diagonal is still close to identity.

How the tool handles upload, format, and quality

The actual workflow inside the tool is straightforward — Sharp loads the source image from disk, calls .affine(customMatrix) with a bicubic interpolator and your background color, then re-encodes to whichever output format you pick.

A few options matter more than they look:

– Background color: transparent (default), a color name (white, black), or a hex string like #1a2740. The new pixels that appear when the matrix rotates the image off its original canvas have to come from somewhere, and Sharp fills them with whatever you put here. Pick before you scale negatively; otherwise the corners will be checkerboard transparent and look broken.

– Output format: original, jpeg, png, webp. PNG is the safe choice when the result has transparency or contains sharp diagonal edges — JPEG’s 4:2:0 chroma subsampling will smear the diagonals after a shear.

– Quality: 1 to 100, default 95. Higher quality means larger files. For JPEG/WebP outputs of a transformed photograph, anything above 90 is hard to tell apart visually; below 70 you start to see ringing on diagonal edges.

A 10 MB file size limit is enforced on the upload — compressed JPEGs at 8 megapixels comfortably stay under it, but uncompressed PNGs above 6000×4000 will fail.

When the matrix silently distorts area and edges

A 2×2 affine transform preserves parallel lines but can dramatically change area. The scaling matrix [[2, 0], [0, 1]] doubles the horizontal extent and quadruples the number of pixels covered; if your final canvas size stays the same, every horizontal feature appears half as tall relative to its width. The shear matrix leaves area unchanged, but it distorts the perception of rectangles: a 1920×1080 photograph sheared by m01=1.0 becomes a parallelogram 2400 pixels wide on one side.

A second subtle effect: bicubic interpolation smears diagonal edges when the transformation stretches them out. A photograph of a checkerboard processed with [[1.5, 0], [0, 1.5]] looks fine, but the same photograph processed with [[2, 0], [0, 1]] and then re-compressed at quality 70 will show JPEG ringing on every board edge. The fix is either to raise quality to 90+ or pick PNG output.

If the matrix entry produces a determinant (m00 m11 – m01 m10) of zero or negative, the image collapses onto a line or gets reflected (which is, strictly speaking, a 90-degree flip rather than a classical linear transform). For practical use, stay within -3 to 3 on every entry and the result will be obvious to interpret.

The four things to keep in your head while you experiment

1. The four entries mix the two axes. m00 and m11 scale; m01 and m10 shear. There is no entry that “rotates” — rotation emerges as a combination.

2. Diagonal dominance makes the matrix predictable. When both off-diagonals are zero, you have pure scaling and the result is unsurprising; when both are nonzero, the result is a shear-combined that can flip parallelograms into unexpected orientations.

3. The background color is part of the output. A matrix that rotates the image off its canvas fills the new space with whatever background you give it — pick transparent for overlays, white for document-style results, a brand color for marketing assets.

4. Sharp uses bicubic interpolation. The output is smooth but slightly soft on diagonal edges; if your final use is print or sharp social media, resample through Lanczos in a separate step.

Where Image Custom Matrix fits next to the rest of the Elysia Tools media family

The same site offers simpler one-click transforms — a color inversion tool, a sepia tone preset, and a luminance threshold for line drawings. Image Custom Matrix is the right choice when none of those presets do what you want and you are willing to think about the four matrix entries as inputs. For batch processing of dozens of files with the same transform, a small script using sharp().affine() is the right next step.

If your goal is teaching linear algebra — the matrix stays a matrix, but applying it to a real image makes it click — try uploading a photograph of a grid or a flat geometric shape, then run the identity matrix as a baseline before changing one entry at a time.

For a broader tour of how the same 2×2 idea generalizes to 3×3 perspective transforms, RGBA color-channel remapping, and convolution kernels, the Elysia Tools media hub collects the full set in one place.