gizmobench

Droste Effect Maker

Open a picture (JPEG, PNG, WebP, GIF or BMP, up to 12 megapixels) and mark where it should reappear inside itself by dragging four corners or typing them in pixels. Each copy is placed by a projective four-corner map, so a tilted or perspective frame such as a screen, a window or a picture on a wall works as well as a straight rectangle, and the copies nest up to 30 levels deep. Mirror flips each copy left to right relative to the one around it. The zoom slider previews any point of the loop, and the GIF zooms inward or outward by one nested level per loop (two with Mirror on), for up to 10 seconds and 200 frames. PNG and GIF come out at up to 1080 pixels on the longest side, and a small project file keeps the corners and settings but never the picture, which is decoded in this tab and never uploaded.

Your picture

JPEG, PNG, WebP, GIF or BMP, up to 12 megapixels. It stays in this tab.

Inset corners, in picture pixels

Drag the four handles on the preview, or focus one and use the arrow keys (Shift moves ten times as far).

Animation and output: inward, 2 s at 20 fps, 1080 px

Zoom direction

At most 200 frames per GIF. The output is never enlarged past the picture's own size.

Result

Open a picture to nest inside itself

It is decoded in this tab and never uploaded. You can also drop a file here.

Open a picture, or try the test pattern, to start.

Depth
5
GIF frames
40
Frame delay
50 ms
Output size
open a picture

GIF: 40 frames, 50 ms each, 2 s per loop, repeating forever. Each frame keeps at most 256 colors (busy frames choose them on a coarser color grid), delays move in 10 ms steps, and transparent areas turn white. The PNG keeps transparency and shows the frame in the preview.

Where each nested copy sits

No picture is open, so there is no preview yet.

How the corners map

  • Central half inset1200 × 800 picture, inset from 25% to 75%
    (300, 200) (900, 200) (900, 600) (300, 600)
  • Depth 2the same inset mapped into itself
    (450, 300) (750, 300) (750, 500) (450, 500)
  • Crossed insetcorners (0, 0) (100, 100) (100, 0) (0, 100)
    Refused before rendering: The top and bottom edges of the inset cross each other, so the shape is a bow tie rather than a four-sided inset. Swap the two corners that passed each other, or drag them back.

Common questions

What is the Droste effect?
A picture that contains a smaller copy of itself, which contains a smaller copy again, and so on. It is named after a brand of Dutch cocoa whose tin showed a nurse carrying that same tin. This page builds the recursion from your own picture: you mark the inset where the copy goes, and each copy is mapped into the inset of the one around it.
How do I make a Droste effect from my photo?
Press Open image, or drop the file on the stage. The inset starts as the central half of the picture; drag its four corner handles onto the frame, screen or window where the picture should repeat, or type the corners in pixels. Set the recursion depth from 1 to 30 (5 on a first visit) and the preview updates as you go. Download PNG saves the frame the preview shows, which is the still picture unless you moved the zoom slider, and Download GIF saves the zoom loop.
Does the inset have to be a rectangle?
No. Any convex four-sided shape inside the picture works, including a tilted or perspective one, because each copy is placed by a projective map that sends the picture's four corners exactly onto the inset's four corners. The corners go clockwise: top left, top right, bottom right, bottom left. An inset whose edges cross, whose corners fall on one straight line, that bends inward, that runs anticlockwise or that covers more than 90% of the picture is refused with the reason before anything is drawn.
Is this the spiral Droste effect?
No. The spiral kind bends the picture with a complex logarithm so the nesting becomes one continuous twist, and this page does not do that. It nests straight projective copies, a picture within a picture within a picture. Turning the inset turns each copy by the same angle relative to the one around it, so a turned inset gives a stepped rotation rather than a smooth spiral.
How does the zoom GIF loop?
Each loop zooms from the whole picture to the first nested copy, which looks like the whole picture again, so the GIF repeats forever. With Mirror on, a loop passes through two copies, so the picture is the right way round when it repeats. Inward starts at the whole picture and moves in; outward plays the same positions in reverse. The deepest copy shows the plain picture with no further nesting, so a higher depth hides the restart. An inset turned close to upside down is refused for the zoom because its corner paths would meet part way; a still PNG of it still works.
What are the GIF limits?
From 0.2 to 10 seconds, 1 to 50 frames per second and at most 200 frames, at up to 1080 pixels on the longest side. GIF stores delays in hundredths of a second, so frame delays move in 10 ms steps, and the readout shows them before you export: 2 seconds at 20 fps is 40 frames of 50 ms each. Each frame keeps at most 256 colors, chosen for that frame (busy frames choose them on a coarser color grid), and transparent areas turn white; the PNG keeps transparency. The GIF is made in the background with a frame counter, and Cancel stops it.
Why is my download smaller than 1080 pixels?
The longest side is capped at 1080 pixels and the picture is never enlarged, so a 600 × 400 picture exports at 600 × 400 even with 1080 set. A 1200 × 800 picture at 1080 exports at 1080 × 720, and a portrait 600 × 800 picture at 640 exports at 480 × 640. The preview itself is drawn at up to 640 pixels, and the downloads are rendered again at the output size.
Is my picture uploaded or stored?
No. The picture is decoded in this tab, with its size read from the file header first, so anything over 12 megapixels (12 × 1024 × 1024 pixels) or 16384 pixels a side is refused before it is decoded. Every render runs in a background worker in the same tab. Save project JSON writes the corners and settings to a small file, never the picture, and the page remembers only the depth, mirror, animation and output settings in this browser, once you have changed one.

Each nested copy is placed by an exact projective (four-corner perspective) map computed in double precision, and its pixels are resampled from the picture; this is not the complex-logarithm spiral some Droste artwork uses. Insets whose edges cross, whose corners fall on one straight line, that bend inward or that cover more than 90% of the picture are refused before anything is drawn. GIF frames keep at most 256 colors each and frame delays move in 10 ms steps, both shown before you export, and the only built-in picture is an original test pattern.