What is pixel sorting?

A glitch art technique where pixels within each row or column are re-arranged by some property (here, brightness) instead of staying in their original position, creating streaky, melted-looking bands.

Does sorting change the image's colors?

No, every original pixel's exact RGBA value is preserved; only its position within its row or column changes.

What's the difference between horizontal and vertical direction?

Horizontal sorts pixels within each row (left to right); vertical sorts pixels within each column (top to bottom), producing very different-looking streak orientations.

What does ascending vs descending order change?

Ascending arranges pixels from darkest to brightest along the sort direction; descending reverses that, from brightest to darkest.

PNG Pixels Sorter - Pixel Sorting Glitch Art Effect

Overview

Introduction

This tool applies the classic "pixel sorting" glitch art effect to a PNG, computed entirely client-side.

It re-arranges pixels within each row or column by brightness, producing the streaky, melted look associated with databending art.

What Is PNG Pixels Sorter?

A pixel-sorting effect generator that computes each pixel's perceptual luminance and re-orders every row (or column) of pixels by that value, ascending or descending.

Each pixel's full RGBA value travels together as a unit during sorting, so no color information is lost or altered.

How PNG Pixels Sorter Works

For horizontal sorting, every row's pixels are extracted, sorted by luminance (0.299r + 0.587g + 0.114b), and written back in their new order; vertical sorting does the same per column instead.

Because the same set of pixels ends up in every row/column, just rearranged, the output is always the same size and contains the same multiset of colors as the input.

When To Use PNG Pixels Sorter

Use it to create glitch art, databending-style visuals, or abstract streaky patterns from a source photo.

It's also a fun way to generate unique textures or backgrounds from ordinary images.

Often used alongside PNG Pixels Randomizer and PNG Revealer.

Features

Advantages

Runs entirely client-side; your image never leaves the browser.
Preserves every pixel's exact color, just in a new order — nothing is invented or discarded.
Both sort direction and order are configurable for very different visual results.

Limitations

This is a full-row/column sort rather than a threshold-based partial sort, so the effect is always applied across the entire row or column at once rather than selective streaks.
The effect can be visually intense on high-contrast source images; a smoother source image produces a subtler result.

Examples

Horizontal ascending sort on a photo

Input

A 400x300 PNG landscape photo, horizontal, ascending

Output

A 400x300 PNG where each row's pixels are rearranged from darkest to brightest left to right

The sky and shadows in each row shift toward one side, producing horizontal streaking bands.

Vertical descending sort on a portrait

Input

A 200x200 PNG portrait, vertical, descending

Output

A 200x200 PNG where each column's pixels are rearranged from brightest to darkest top to bottom

Vertical sorting produces a very different, column-streaked look compared to horizontal.

Best Practices & Notes

Best Practices

Try both horizontal and vertical direction on the same image, since they produce very different visual results.
High-contrast source images (strong light/dark areas) tend to produce more dramatic, visible streaking.

Developer Notes

The pure sort math lives in a lib function operating on a plain Uint8ClampedArray pixel buffer with no DOM dependency, extracting each row/column into an array, sorting it with a luminance-based comparator, and writing the result back; no mutation happens on the original buffer.

PNG Pixels Sorter Use Cases

Creating glitch art or databending-style visuals from a photo
Generating unique abstract textures for design projects
Producing eye-catching social media graphics

Common Mistakes

Expecting a subtle effect on a high-contrast image — pixel sorting tends to produce dramatic results the more contrast the source has.
Confusing this with a random shuffle — sorting is fully deterministic given the same direction and order settings.

Tips

Combine with the pixel randomizer tool for a two-stage glitch effect: sort first, then apply a light randomization pass.
Crop to just a portion of an image first if you want the sorting streaks confined to a smaller region.

PNG Pixels Sorter