Image workflows, step by step

28 jobs · 94 of the 165 tools · no signup, nothing uploads

Nobody wakes up wanting to crop something. They want a profile picture, and cropping is step two of four. Each job below is written as the order the steps actually go in, with a line on why that order — because most image mistakes are ordering mistakes: compressing before resizing, trimming before keying out the background, cropping a scan before straightening it.

Put a photo on a web page

Resize first. Compressing before you scale down spends quality on pixels you are about to throw away.

1 Resize Scale to the width the layout actually renders at
2 Compress Pick the quality, watching the size delta
3 PNG to WebP The format that carries alpha and still halves the bytes
4 Remove metadata Strip the camera and location data before it ships
5 File size Confirm what you are about to upload weighs

Ship a favicon and app icons

One square master, then every size a browser, a Mac and a phone each insist on separately.

1 Square Pad the master to a true square first
2 Favicon kit Every PNG size plus the .ico and the web manifest
3 PNG to ICO Just the multi-resolution Windows .ico
4 PNG to ICNS The macOS .icns bundle
5 Transparency checker Check the corners are actually transparent

Turn a logo into a clean transparent PNG

Key the background out, then trim — trimming first leaves the halo you were trying to remove.

1 Background Key out the white, or swap it for transparency
2 Auto-trim Crop the now-empty border away
3 Feather edges Soften a hard-keyed edge so it composites cleanly
4 Add outline Add a contrasting outline if it will sit on photos
5 Transparency checker Confirm no near-white pixels survived

Prepare a screenshot for documentation

Redact before you crop only if the crop might not remove it. Otherwise crop first — fewer pixels, fewer mistakes.

1 Crop Cut it down to the part you are talking about
2 Pixelate Black out keys, names and account numbers
3 Add padding Breathing room so it does not touch the text
4 Drop shadow Lift it off the page background
5 Remove metadata Screenshots carry the machine name on some systems

Make a profile picture

Square the crop before you round it — a circle mask on a 4:3 image cuts off the chin.

1 Crop to ratio Square it, keeping the face centred
2 Circle crop Round it off with real transparent corners
3 Resize Down to the size the site stores (often 400px)
4 Compress Under whatever the upload limit is

Build an Open Graph preview card

1200×630, and JPG rather than PNG — a few scrapers still refuse PNG for og:image.

1 OG image The 1200×630 card, title and all
2 Text to PNG Set a headline as its own image if you need more control
3 PNG to JPG The format every scraper accepts
4 File size Keep it under 300 KB or previews time out

Get an image ready for print

Resolution is pixels; DPI is only a number in the header. Upscale first, then set the DPI to match the physical size.

1 Upscale Add the pixels the print size needs
2 Change DPI Write the 300 DPI the printer asks for
3 PNG to CMYK See how the colours will shift on press
4 PNG to TIFF The format print shops actually want

Deal with photos off an iPhone

HEIC first: almost nothing downstream opens it, and every later step needs real pixels.

1 HEIC to PNG Open the format only Apple ships
2 Auto levels Fix the flat exposure phones bake in
3 Resize Down from 4032px to something sendable
4 Remove metadata Phone photos carry GPS coordinates
5 PNG to JPG The format the other end expects

Build sprites for a game

Quantise before you pack. Quantising a packed sheet gives every sprite the same compromised palette.

1 To 8-bit indexed Cut to an indexed palette, per sprite
2 Pixel-art upscale Scale by whole numbers with no blurring
3 Sprite sheet Pack the frames into one sheet with CSS
4 Split tiles Or cut an existing sheet back into frames

Pull a colour palette out of an image

Dominant colours give you the brand; the harmony tools give you the rest of the set.

1 Dominant colors The colours actually in the image, by area
2 Average color The single colour it reads as from far away
3 Color shades Tints and shades of one of them
4 Complementary What to pair it with
5 WCAG contrast Whether text on it passes WCAG

Get under an upload size limit

Try the exact-target tool first: it searches the quality for you instead of you guessing and re-exporting.

1 Target file size Name the KB figure and let it find the quality
2 Compress Or drive the quality by hand and watch the delta
3 Reduce colors For flat art, fewer colours beats lower quality
4 File size Check the result before you upload it

Redact an image before sharing it

Pixelating a face is reversible in principle; a solid block is not. For anything that matters, use the block.

1 Pixelate Pixelate, blur or drop a solid block over a region
2 Remove metadata Strip GPS, camera serial and editing history
3 Chunk viewer See every chunk still in the file, byte by byte
4 Inspector Confirm the metadata has really gone

Make an animation out of stills

APNG keeps the alpha channel and 24-bit colour; GIF is 256 colours but opens everywhere.

1 PNG to APNG Full colour and real transparency
2 PNG to animated GIF The version that works in email and old chat clients
3 APNG to frames Take one back apart into frames
4 GIF to PNG Pull the frames out of a GIF

Colour-grade a batch consistently

Grade one frame by hand, export the LUT, then apply that one LUT to the rest. Identical treatment, no drift.

1 Auto levels Fix the black and white points first
2 Tone curves Shape the tone by hand
3 Colour temperature Warm or cool the whole thing
4 Extract a LUT Capture the grade as a .cube file
5 Apply a .cube LUT Apply it to every other frame

Ship loading and placeholder art

A BlurHash is ~30 characters of text, so it ships in the HTML and shows before any image request starts.

1 PNG to BlurHash The 30-character blur that loads with the page
2 Placeholder A labelled grey box at any size
3 Solid color One flat colour, exact hex
4 Gradient A gradient background at any size

Work out what is wrong with a PNG

Start with the validator. It tells you whether the file is broken or merely unexpected, which are different problems.

1 PNG validator Signature, chunk order and CRCs, checked
2 Chunk viewer Every chunk in the file and what it holds
3 Inspector Dimensions, bit depth, colour type, metadata
4 Color count Whether it is really as complex as it looks
5 Dimensions What the pixels actually measure

Clean up a folder of near-identical images

Perceptual hashing catches resaves and resizes that a byte comparison calls unique.

1 Find duplicates Group the folder by visual similarity
2 Perceptual hash The perceptual hash of one file, to compare by hand
3 Image diff Exactly which pixels differ between two
4 Contact sheet One sheet of everything, to eyeball it

Check an image works for everyone

Roughly one man in twelve has some red-green colour deficiency. If the image carries meaning in colour alone, it is lost on them.

1 WCAG contrast WCAG AA and AAA ratios for text over the image
2 Colour blindness The same image through eight kinds of colour vision
3 Grayscale If it fails in grey, colour is doing the work alone
4 Image diff Compare the simulated versions side by side

Tidy up a scan or a photographed document

Deskew before cropping, or the crop keeps the tilt and cuts a corner off.

1 Rotate by angle Straighten it by a fraction of a degree
2 Perspective Pull a photographed page back to rectangular
3 Auto levels Make the paper white and the ink black
4 Auto-trim Cut the desk out of the edges
5 PNG to PDF Bundle the pages into one document

Rescue a badly lit photo

In this order: exposure, then colour cast, then local contrast. Sharpening first amplifies the noise you are about to have to remove.

1 Auto levels Pull the black and white points back to the ends
2 Brightness Lift or drop the whole thing if it is still off
3 Contrast Put the punch back after the stretch
4 Denoise Clean up the grain a dark exposure brings with it
5 Sharpen Last, and gently — it exaggerates whatever is left

Turn a photo into poster art

Flatten the tone before you colour it. Posterising after a duotone gives you banded duotone, which is rarely what anyone wants.

1 Posterize Cut the tonal range to a handful of steps
2 Duotone Map the result onto two colours
3 Gradient map Or onto a whole gradient, for more than two
4 Halftone Add the print-dot texture
5 Add outline Outline it if it will sit on a coloured ground

Build a CRT / VHS look

Aberration before scanlines. The scanline grid should sit on top of the artefacts, the way a real screen does — it is the display, not the signal.

1 Chromatic aberration Split the channels the way cheap optics do
2 Glitch Slide rows sideways for the datamosh break-up
3 CRT scanlines Lay the CRT line grid over the top
4 Add noise Analogue grain
5 Vignette Darken the corners like a curved tube

Prepare a texture for 3D or a game engine

Make it tile first. Deriving a normal map from a texture with a visible seam bakes the seam into the lighting as well.

1 Seamless pattern Make the edges wrap without a visible join
2 Normal map Derive the normal map from the height information
3 To 8-bit indexed Cut the palette if the engine wants indexed data
4 PNG to TGA The format a lot of engines still import best

Work on one colour channel at a time

Split, look, then decide. Half of "the red is blown out" turns out to be the green channel once you actually see them separately.

1 Split RGB Three greyscale images, one per channel
2 Histogram Where each channel actually sits
3 Channel mixer Rebuild one channel out of the others
4 Extract alpha Pull the transparency out as its own image
5 Apply alpha mask Push a channel back in as transparency

Get pixel values out in another colour space

Pick by what the receiving code expects: HSL to reason about hue, LAB for perceptual distance, YCbCr for video, CMYK for print.

1 PNG to HSL Hue, saturation, lightness — the one for CSS
2 PNG to LAB Perceptually uniform, for measuring colour difference
3 PNG to YCbCr Luma and two chroma planes, as video codecs see it
4 PNG to CMYK The four ink plates a press will actually lay down

Build a starter brand kit from one logo

Everything downstream wants a different shape of the same mark. Make the square master once and derive the rest from it.

1 Initials avatar A fallback mark if there is no logo yet
2 Solid color Flat brand-colour plates at any size
3 OG image The 1200×630 social card
4 Watermark The mark, applied over photography
5 Favicon kit Every icon size a browser and an OS ask for

Cut stickers and emoji out of artwork

Trim before you outline. An outline drawn around the canvas edge instead of the artwork is the single most common way this goes wrong.

1 Background Key the flat background out to transparency
2 Auto-trim Crop to the artwork itself
3 Add outline The white sticker border
4 Drop shadow Lift it off whatever it lands on
5 Square Pad to the square most sticker packs require
6 Resize Down to the pack size (512px for most)

Four orderings worth memorising

Resize, then compress. Compressing first spends quality on pixels you are about to throw away, and the second encode compounds the artefacts of the first.
Key the background out, then trim. Auto-trim crops to the non-transparent bounding box, so running it before Background finds nothing to crop.
Straighten, then crop. A crop applied to a tilted scan keeps the tilt and loses a corner when you straighten it afterwards.
Upscale, then set the DPI. DPI is a number in the file header; it adds no detail. The pixels have to exist first.

Missing a job?

These are hand-written, not generated, which is why there are twenty of them and not two hundred. If you run a sequence often enough that you have memorised it, send it over — [email protected] — and it will go on this page with the reasoning intact. Everything else is in the catalogue of 165 tools, or one keystroke away: press / anywhere on the site.