Free grid overlay on image
Grid overlay on an image, flattened into the file
Drop a picture, set the columns and rows or a pitch in pixels, and download a PNG with the grid drawn into it — 1 to 12 px lines in any color at any opacity, an optional heavier rule every few cells, and labels either in a margin or inside the cells. The file comes back at the dimensions it went in at, and the panel names the exact pixel width of every column before you download rather than after. It is free, nothing asks you to sign in, and the PNG is ready the moment the preview is.
- 100% free
- No signup
- Up to 3,000 px
- Any line color
- Cell boxes as CSV
Press Ctrl+V anywhere on the page to drop in a screenshot straight off the clipboard — no need to click the field first.
Columns and rows are set separately, so a 4 by 3 grid on a square picture is yours to ask for.
2 to 120 vertical strips.
Measured in the pixels of the file you get back, not in the pixels of this preview.
A hue nothing in the picture contains beats black or white on a photograph — magenta survives skin, sky and asphalt alike.
Drawn at twice the width above, counted from the top-left corner.
Letters down the side make a cell name unambiguous out loud: B4 can only be one square, where 2,4 has to be said in an agreed order.
A margin grows the file on the top and left edges; labels inside the cells leave the output exactly the size of the input.
How to put a numbered grid on a picture and keep the file
Reading the cell table before you download is what saves the re-export.
Say how the frame is divided
Two ways in, and they answer different questions. Divisions gives you a column count and a row count set independently, which is what you want when the grid has to mean something — four across for a set of quadrants, or whatever your class agreed on. Pixels a cell gives you a pitch instead, and the tool fits that pitch to a whole number of divisions rather than leaving a narrow strip at the right-hand edge, then tells you the pitch it actually used. One button sets the row count that makes the cells square for the picture in front of you.
Pick a line the picture does not already contain
Width runs 1 to 12 px and is measured in the pixels of the file you get back, not in the pixels of the preview, so a 2 px line stays 2 px whatever zoom you were looking at. Color and opacity matter more than width on a photograph: black disappears into shadow, white disappears into sky, and a saturated magenta or lime survives both because almost nothing photographic is that saturated. Drop the opacity to 60 or 70 percent when the grid is a guide rather than a measurement, and leave it at 100 when somebody is going to work from the lines.
Check the cell table, then download
Above the download the panel lists what the file will contain: the pixel width of every column, the pixel height of every row, the total ink as a percentage of the frame, and the exact output dimensions including any label margin. Read the first two lines. A frame that does not divide evenly produces cells one pixel apart in size, and if you are about to slice the picture up on those boundaries that one pixel is the difference between tiles that join and tiles that do not. The CSV beside the PNG carries every cell rectangle as left, top, width and height.
Technical specifications
| Divisions | 2 to 120 columns and 2 to 120 rows, set independently, or a pitch of 8 to 512 px which is fitted to a whole number of divisions on each axis. A button sets the row count that squares the cells for the current picture |
|---|---|
| Output dimensions | The same as the input, up to 3,000 px on the long edge; larger files are scaled to that before any line is drawn, and both figures are shown. Labels placed in a margin add 20 to 64 px on the top and left, scaled to 2% of the long edge |
| Line | 1 to 12 px wide in output pixels, any color, 10% to 100% opacity. An optional heavier rule every 2, 4, 5 or 10 cells, drawn at twice the width and counted from the top-left corner |
| Where lines land | On whole pixels, each boundary rounded from its exact position rather than stepped from a rounded pitch, so neighboring cells differ by at most one pixel and the last one never absorbs the remainder |
| Refused combinations | Any grid whose smallest cell is under four line widths — the panel names the cell size, the line width and the percentage of the frame the lines would cover, and offers the thinnest line that clears it |
| Labels | Off, numbers on both edges, or numbers across with letters down. Either in a white margin outside the picture or inside each cell over it; inside is dropped automatically below a 26 px cell, with a note saying why |
| What arrives in your downloads | A PNG with the grid flattened into the pixels, and the cell rectangles as CSV — column, row, left, top, width, height — which tile the frame exactly with no overlap |
| Where the picture is opened | In this tab, by the browser's own image decoder. The download is generated from the same canvas the preview was scaled from, so the file cannot differ from what you approved |
Frequently asked questions
Will the PNG be the same size as the file I dropped in?
Yes, unless your picture is over 3,000 px on the long edge or you put the labels in a margin. Files above that are scaled down to 3,000 px before the lines go on, and the panel says so with both numbers, because silently returning a smaller file than the one you handed over is the kind of surprise that ruins a print. Labels set to sit in a margin add a white strip on the top and left edges — between 20 and 64 px depending on the picture, and stated exactly. Labels set to sit inside the cells add nothing, so the output stays pixel for pixel the input.
Why are some cells one pixel wider than others?
Because pixels are whole and your frame usually is not divisible. A picture 2,560 px across in 12 columns wants 213.33 px a cell, which no raster can draw, so eight columns come out 213 px and four come out 214 — and the difference has to go somewhere. This tool rounds every boundary from its exact position rather than stepping along a rounded pitch, which spreads the leftover pixels through the grid instead of dumping all of them into the final column. The table under the preview names the sizes and how many cells have each, so nothing about it has to be discovered by measuring the result.
Can I get the grid as a separate layer, or a transparent PNG of just the lines?
No — the lines are composited into the pixels, and that is the operation rather than a shortcoming. A flattened grid survives being pasted into a message, uploaded to a forum that strips metadata, or printed by somebody who has never opened a layered file, which is why people ask for this instead of doing it in an editor. The cost is that it cannot be undone: painting over a line does not recover what was underneath it. Keep the original and treat the ruled file as a copy. If you need the grid switchable, the right tool is an image editor with layers, not this page.
Does it work on a PNG with transparency?
Yes, and the transparency is preserved. The picture is drawn first and the lines over it, so a transparent background stays transparent and the grid lines cross it as lines rather than as a filled sheet — useful when the ruled file is going over a colored background later. The one exception is the label margin: that strip is filled white so the numbers are readable, because a label drawn on transparency is invisible against half the backgrounds it might land on. Choose labels inside the cells instead if the file has to stay transparent to its edges.
How should I refer to a cell?
Use the letters-down option and say B4, because it cannot be read in the wrong order. Numbers on both edges are quicker to scan but 2,4 and 4,2 are different squares and half the people in a conversation will assume the opposite convention from the other half — the row-then-column argument is old enough to have caused real errors in map reading. Letters down the side and numbers across the top removes the ambiguity at no cost, and the CSV export uses the same naming as the picture so the two can be read side by side.
Can it slice the picture into separate tiles for me?
No, it draws one file and hands you the coordinates to cut it yourself. Producing 144 numbered files raises questions this page cannot answer — what they are named, whether the edges overlap, what happens to the odd pixel — and getting any of them wrong quietly is worse than not doing it. The CSV lists every cell as a column, a row, and a left, top, width and height in pixels, which is what a crop script or a batch action in an editor consumes. The rectangles tile the frame exactly, so the pieces cut from them join with no seam and no gap.
What is a sensible number of divisions?
Somewhere between 4 and 16 for anything a person will read, and far higher only when a machine is reading it. A grid of 8 by 8 on a 1,600 px picture gives 200 px cells, each large enough to hold a legible label inside it. Past about 40 divisions the cells fall below 40 px on a typical file, labels no longer fit inside them, and the lines start to be a meaningful fraction of what you can see — at which point the tool stops you: a cell narrower than four line widths is refused rather than drawn, with the thinner line offered as one click.
About burning lines into pixels, and when that is the right answer
An overlay in an editor and an overlay in a file are not the same object. In an editor the grid is a layer: it can be hidden, recolored, moved, and it never touches the picture underneath. Flattened into a PNG it is none of those things — it is part of the image, indistinguishable from a line that was photographed. That is a loss, and it is also the entire reason this page exists. A flattened grid arrives intact in a message thread, on a forum that re-encodes every upload, in a slide somebody else assembled, and on a printer driven by a person who has never opened a layered file. The rule to work by is simple: keep the original, treat the ruled copy as disposable, and re-make it when the division changes rather than trying to repair it.
The part almost every overlay gets quietly wrong is what happens when the frame does not divide. Pixel boundaries are whole numbers, so a 2,560 px picture cut into 12 columns cannot have twelve equal cells: the honest answers are cells of 213 and 214 px mixed through the grid, or eleven cells of 213 and one of 217 carrying all of the leftovers. A tool that steps along a rounded pitch produces the second without saying so, and the error is invisible until somebody slices on those lines and finds the last tile a different shape. Rounding each boundary from its exact fractional position gives the first, keeps every cell within half a pixel of where it belongs, and is why this page can print a cell table instead of a nominal pitch. That flattening argument is the same one behind pixelating a region and covering one with a bar: an edit that matters has to be in the pixels, because anything reversible is not really hidden.
Choosing a line is a measurement problem rather than a taste one. Black lines vanish in shadow, white lines vanish in sky, and both are common enough in photographs that a single-tone grid always fails somewhere in the frame — a saturated magenta or a lime green survives skin, asphalt and cloud alike, because almost nothing photographic sits that far out in the gamut. Width matters less than people expect until the cells get small, at which point the lines stop being an annotation and start being a substantial part of what you see; four line widths to a cell is the floor this page enforces. If what you actually want is the ruling on paper rather than in the file, with a matching empty grid and the scale between them worked out, that is the grid drawing method one page across; if you want ruled paper with no picture at all, that is the graph paper generator, and if the cells should be six-sided, a hex grid tiles the same area without aligned rows. And if the grid is really a step toward replacing each cell with a character or a colored block, the ASCII generator does exactly that and counts what it used.
Where the file is opened and where it goes
Your file is opened by JavaScript running in the tab you are reading this in. It is never uploaded, never sent to a server and never stored anywhere — there is no upload step to undo, because there is no upload. Close the tab and nothing of it remains.
The PNG you download is produced by the same canvas the preview was scaled down from, so there is no second render on a server that could differ from what you approved — and no copy of the picture anywhere but the tab it was opened in.