diff --git a/src/font/shaper/run.zig b/src/font/shaper/run.zig
index ef55ba981..8d53c601b 100644
--- a/src/font/shaper/run.zig
+++ b/src/font/shaper/run.zig
@@ -228,6 +228,12 @@ pub const RunIterator = struct {
                 continue;
             }
 
+            // If we're a Kitty unicode placeholder then we add a blank.
+            if (cell.codepoint() == terminal.kitty.graphics.unicode.placeholder) {
+                try self.addCodepoint(&hasher, ' ', @intCast(cluster));
+                continue;
+            }
+
             // Add all the codepoints for our grapheme
             try self.addCodepoint(
                 &hasher,
@@ -284,8 +290,20 @@ pub const RunIterator = struct {
         style: font.Style,
         presentation: ?font.Presentation,
     ) !?font.Collection.Index {
+        if (cell.isEmpty() or
+            cell.codepoint() == 0 or
+            cell.codepoint() == terminal.kitty.graphics.unicode.placeholder)
+        {
+            return try self.grid.getIndex(
+                alloc,
+                ' ',
+                style,
+                presentation,
+            );
+        }
+
         // Get the font index for the primary codepoint.
-        const primary_cp: u32 = if (cell.isEmpty() or cell.codepoint() == 0) ' ' else cell.codepoint();
+        const primary_cp: u32 = cell.codepoint();
         const primary = try self.grid.getIndex(
             alloc,
             primary_cp,
diff --git a/src/renderer/Metal.zig b/src/renderer/Metal.zig
index 55024f42b..6ceaad166 100644
--- a/src/renderer/Metal.zig
+++ b/src/renderer/Metal.zig
@@ -124,6 +124,7 @@ images: ImageMap = .{},
 image_placements: ImagePlacementList = .{},
 image_bg_end: u32 = 0,
 image_text_end: u32 = 0,
+image_virtual: bool = false,
 
 /// Metal state
 shaders: Shaders, // Compiled shaders
@@ -939,7 +940,13 @@ pub fn updateFrame(
         // If we have Kitty graphics data, we enter a SLOW SLOW SLOW path.
         // We only do this if the Kitty image state is dirty meaning only if
         // it changes.
-        if (state.terminal.screen.kitty_images.dirty) {
+        //
+        // If we have any virtual references, we must also rebuild our
+        // kitty state on every frame because any cell change can move
+        // an image.
+        if (state.terminal.screen.kitty_images.dirty or
+            self.image_virtual)
+        {
             try self.prepKittyGraphics(state.terminal);
         }
 
@@ -1596,6 +1603,7 @@ fn prepKittyGraphics(
     // We always clear our previous placements no matter what because
     // we rebuild them from scratch.
     self.image_placements.clearRetainingCapacity();
+    self.image_virtual = false;
 
     // Go through our known images and if there are any that are no longer
     // in use then mark them to be freed.
@@ -1619,8 +1627,25 @@ fn prepKittyGraphics(
     // Go through the placements and ensure the image is loaded on the GPU.
     var it = storage.placements.iterator();
     while (it.next()) |kv| {
-        // Find the image in storage
         const p = kv.value_ptr;
+
+        // Special logic based on location
+        switch (p.location) {
+            .pin => {},
+            .virtual => {
+                // We need to mark virtual placements on our renderer so that
+                // we know to rebuild in more scenarios since cell changes can
+                // now trigger placement changes.
+                self.image_virtual = true;
+
+                // We also continue out because virtual placements are
+                // only triggered by the unicode placeholder, not by the
+                // placement itself.
+                continue;
+            },
+        }
+
+        // Get the image for the placement
         const image = storage.imageById(kv.key_ptr.image_id) orelse {
             log.warn(
                 "missing image for placement, ignoring image_id={}",
@@ -1629,100 +1654,16 @@ fn prepKittyGraphics(
             continue;
         };
 
-        // If the selection isn't within our viewport then skip it.
-        const rect = p.rect(image, t);
-        if (bot.before(rect.top_left)) continue;
-        if (rect.bottom_right.before(top)) continue;
+        try self.prepKittyPlacement(t, &top, &bot, &image, p);
+    }
 
-        // If the top left is outside the viewport we need to calc an offset
-        // so that we render (0, 0) with some offset for the texture.
-        const offset_y: u32 = if (rect.top_left.before(top)) offset_y: {
-            const vp_y = t.screen.pages.pointFromPin(.screen, top).?.screen.y;
-            const img_y = t.screen.pages.pointFromPin(.screen, rect.top_left).?.screen.y;
-            const offset_cells = vp_y - img_y;
-            const offset_pixels = offset_cells * self.grid_metrics.cell_height;
-            break :offset_y @intCast(offset_pixels);
-        } else 0;
-
-        // We need to prep this image for upload if it isn't in the cache OR
-        // it is in the cache but the transmit time doesn't match meaning this
-        // image is different.
-        const gop = try self.images.getOrPut(self.alloc, kv.key_ptr.image_id);
-        if (!gop.found_existing or
-            gop.value_ptr.transmit_time.order(image.transmit_time) != .eq)
-        {
-            // Copy the data into the pending state.
-            const data = try self.alloc.dupe(u8, image.data);
-            errdefer self.alloc.free(data);
-
-            // Store it in the map
-            const pending: Image.Pending = .{
-                .width = image.width,
-                .height = image.height,
-                .data = data.ptr,
-            };
-
-            const new_image: Image = switch (image.format) {
-                .grey_alpha => .{ .pending_grey_alpha = pending },
-                .rgb => .{ .pending_rgb = pending },
-                .rgba => .{ .pending_rgba = pending },
-                .png => unreachable, // should be decoded by now
-            };
-
-            if (!gop.found_existing) {
-                gop.value_ptr.* = .{
-                    .image = new_image,
-                    .transmit_time = undefined,
-                };
-            } else {
-                try gop.value_ptr.image.markForReplace(
-                    self.alloc,
-                    new_image,
-                );
-            }
-
-            gop.value_ptr.transmit_time = image.transmit_time;
-        }
-
-        // Convert our screen point to a viewport point
-        const viewport: terminal.point.Point = t.screen.pages.pointFromPin(
-            .viewport,
-            p.pin.*,
-        ) orelse .{ .viewport = .{} };
-
-        // Calculate the source rectangle
-        const source_x = @min(image.width, p.source_x);
-        const source_y = @min(image.height, p.source_y + offset_y);
-        const source_width = if (p.source_width > 0)
-            @min(image.width - source_x, p.source_width)
-        else
-            image.width;
-        const source_height = if (p.source_height > 0)
-            @min(image.height, p.source_height)
-        else
-            image.height -| source_y;
-
-        // Calculate the width/height of our image.
-        const dest_width = if (p.columns > 0) p.columns * self.grid_metrics.cell_width else source_width;
-        const dest_height = if (p.rows > 0) p.rows * self.grid_metrics.cell_height else source_height;
-
-        // Accumulate the placement
-        if (image.width > 0 and image.height > 0) {
-            try self.image_placements.append(self.alloc, .{
-                .image_id = kv.key_ptr.image_id,
-                .x = @intCast(p.pin.x),
-                .y = @intCast(viewport.viewport.y),
-                .z = p.z,
-                .width = dest_width,
-                .height = dest_height,
-                .cell_offset_x = p.x_offset,
-                .cell_offset_y = p.y_offset,
-                .source_x = source_x,
-                .source_y = source_y,
-                .source_width = source_width,
-                .source_height = source_height,
-            });
-        }
+    // If we have virtual placements then we need to scan for placeholders.
+    if (self.image_virtual) {
+        var v_it = terminal.kitty.graphics.unicode.placementIterator(top, bot);
+        while (v_it.next()) |virtual_p| try self.prepKittyVirtualPlacement(
+            t,
+            &virtual_p,
+        );
     }
 
     // Sort the placements by their Z value.
@@ -1759,6 +1700,180 @@ fn prepKittyGraphics(
     }
 }
 
+fn prepKittyVirtualPlacement(
+    self: *Metal,
+    t: *terminal.Terminal,
+    p: *const terminal.kitty.graphics.unicode.Placement,
+) !void {
+    const storage = &t.screen.kitty_images;
+    const image = storage.imageById(p.image_id) orelse {
+        log.warn(
+            "missing image for virtual placement, ignoring image_id={}",
+            .{p.image_id},
+        );
+        return;
+    };
+
+    const rp = p.renderPlacement(
+        storage,
+        &image,
+        self.grid_metrics.cell_width,
+        self.grid_metrics.cell_height,
+    ) catch |err| {
+        log.warn("error rendering virtual placement err={}", .{err});
+        return;
+    };
+
+    // If our placement is zero sized then we don't do anything.
+    if (rp.dest_width == 0 or rp.dest_height == 0) return;
+
+    const viewport: terminal.point.Point = t.screen.pages.pointFromPin(
+        .viewport,
+        rp.top_left,
+    ) orelse {
+        // This is unreachable with virtual placements because we should
+        // only ever be looking at virtual placements that are in our
+        // viewport in the renderer and virtual placements only ever take
+        // up one row.
+        unreachable;
+    };
+
+    // Send our image to the GPU and store the placement for rendering.
+    try self.prepKittyImage(&image);
+    try self.image_placements.append(self.alloc, .{
+        .image_id = image.id,
+        .x = @intCast(rp.top_left.x),
+        .y = @intCast(viewport.viewport.y),
+        .z = -1,
+        .width = rp.dest_width,
+        .height = rp.dest_height,
+        .cell_offset_x = rp.offset_x,
+        .cell_offset_y = rp.offset_y,
+        .source_x = rp.source_x,
+        .source_y = rp.source_y,
+        .source_width = rp.source_width,
+        .source_height = rp.source_height,
+    });
+}
+
+fn prepKittyPlacement(
+    self: *Metal,
+    t: *terminal.Terminal,
+    top: *const terminal.Pin,
+    bot: *const terminal.Pin,
+    image: *const terminal.kitty.graphics.Image,
+    p: *const terminal.kitty.graphics.ImageStorage.Placement,
+) !void {
+    // Get the rect for the placement. If this placement doesn't have
+    // a rect then its virtual or something so skip it.
+    const rect = p.rect(image.*, t) orelse return;
+
+    // If the selection isn't within our viewport then skip it.
+    if (bot.before(rect.top_left)) return;
+    if (rect.bottom_right.before(top.*)) return;
+
+    // If the top left is outside the viewport we need to calc an offset
+    // so that we render (0, 0) with some offset for the texture.
+    const offset_y: u32 = if (rect.top_left.before(top.*)) offset_y: {
+        const vp_y = t.screen.pages.pointFromPin(.screen, top.*).?.screen.y;
+        const img_y = t.screen.pages.pointFromPin(.screen, rect.top_left).?.screen.y;
+        const offset_cells = vp_y - img_y;
+        const offset_pixels = offset_cells * self.grid_metrics.cell_height;
+        break :offset_y @intCast(offset_pixels);
+    } else 0;
+
+    // We need to prep this image for upload if it isn't in the cache OR
+    // it is in the cache but the transmit time doesn't match meaning this
+    // image is different.
+    try self.prepKittyImage(image);
+
+    // Convert our screen point to a viewport point
+    const viewport: terminal.point.Point = t.screen.pages.pointFromPin(
+        .viewport,
+        rect.top_left,
+    ) orelse .{ .viewport = .{} };
+
+    // Calculate the source rectangle
+    const source_x = @min(image.width, p.source_x);
+    const source_y = @min(image.height, p.source_y + offset_y);
+    const source_width = if (p.source_width > 0)
+        @min(image.width - source_x, p.source_width)
+    else
+        image.width;
+    const source_height = if (p.source_height > 0)
+        @min(image.height, p.source_height)
+    else
+        image.height -| source_y;
+
+    // Calculate the width/height of our image.
+    const dest_width = if (p.columns > 0) p.columns * self.grid_metrics.cell_width else source_width;
+    const dest_height = if (p.rows > 0) p.rows * self.grid_metrics.cell_height else source_height;
+
+    // Accumulate the placement
+    if (image.width > 0 and image.height > 0) {
+        try self.image_placements.append(self.alloc, .{
+            .image_id = image.id,
+            .x = @intCast(rect.top_left.x),
+            .y = @intCast(viewport.viewport.y),
+            .z = p.z,
+            .width = dest_width,
+            .height = dest_height,
+            .cell_offset_x = p.x_offset,
+            .cell_offset_y = p.y_offset,
+            .source_x = source_x,
+            .source_y = source_y,
+            .source_width = source_width,
+            .source_height = source_height,
+        });
+    }
+}
+
+fn prepKittyImage(
+    self: *Metal,
+    image: *const terminal.kitty.graphics.Image,
+) !void {
+    // If this image exists and its transmit time is the same we assume
+    // it is the identical image so we don't need to send it to the GPU.
+    const gop = try self.images.getOrPut(self.alloc, image.id);
+    if (gop.found_existing and
+        gop.value_ptr.transmit_time.order(image.transmit_time) == .eq)
+    {
+        return;
+    }
+
+    // Copy the data into the pending state.
+    const data = try self.alloc.dupe(u8, image.data);
+    errdefer self.alloc.free(data);
+
+    // Store it in the map
+    const pending: Image.Pending = .{
+        .width = image.width,
+        .height = image.height,
+        .data = data.ptr,
+    };
+
+    const new_image: Image = switch (image.format) {
+        .grey_alpha => .{ .pending_grey_alpha = pending },
+        .rgb => .{ .pending_rgb = pending },
+        .rgba => .{ .pending_rgba = pending },
+        .png => unreachable, // should be decoded by now
+    };
+
+    if (!gop.found_existing) {
+        gop.value_ptr.* = .{
+            .image = new_image,
+            .transmit_time = undefined,
+        };
+    } else {
+        try gop.value_ptr.image.markForReplace(
+            self.alloc,
+            new_image,
+        );
+    }
+
+    gop.value_ptr.transmit_time = image.transmit_time;
+}
+
 /// Update the configuration.
 pub fn changeConfig(self: *Metal, config: *DerivedConfig) !void {
     // We always redo the font shaper in case font features changed. We
diff --git a/src/renderer/OpenGL.zig b/src/renderer/OpenGL.zig
index 46acff1a9..2645ebc26 100644
--- a/src/renderer/OpenGL.zig
+++ b/src/renderer/OpenGL.zig
@@ -120,6 +120,7 @@ images: ImageMap = .{},
 image_placements: ImagePlacementList = .{},
 image_bg_end: u32 = 0,
 image_text_end: u32 = 0,
+image_virtual: bool = false,
 
 /// Defererred OpenGL operation to update the screen size.
 const SetScreenSize = struct {
@@ -693,7 +694,13 @@ pub fn updateFrame(
         // If we have Kitty graphics data, we enter a SLOW SLOW SLOW path.
         // We only do this if the Kitty image state is dirty meaning only if
         // it changes.
-        if (state.terminal.screen.kitty_images.dirty) {
+        //
+        // If we have any virtual references, we must also rebuild our
+        // kitty state on every frame because any cell change can move
+        // an image.
+        if (state.terminal.screen.kitty_images.dirty or
+            self.image_virtual)
+        {
             // prepKittyGraphics touches self.images which is also used
             // in drawFrame so if we're drawing on a separate thread we need
             // to lock this.
@@ -752,6 +759,7 @@ fn prepKittyGraphics(
     // We always clear our previous placements no matter what because
     // we rebuild them from scratch.
     self.image_placements.clearRetainingCapacity();
+    self.image_virtual = false;
 
     // Go through our known images and if there are any that are no longer
     // in use then mark them to be freed.
@@ -777,6 +785,23 @@ fn prepKittyGraphics(
     while (it.next()) |kv| {
         // Find the image in storage
         const p = kv.value_ptr;
+
+        // Special logic based on location
+        switch (p.location) {
+            .pin => {},
+            .virtual => {
+                // We need to mark virtual placements on our renderer so that
+                // we know to rebuild in more scenarios since cell changes can
+                // now trigger placement changes.
+                self.image_virtual = true;
+
+                // We also continue out because virtual placements are
+                // only triggered by the unicode placeholder, not by the
+                // placement itself.
+                continue;
+            },
+        }
+
         const image = storage.imageById(kv.key_ptr.image_id) orelse {
             log.warn(
                 "missing image for placement, ignoring image_id={}",
@@ -785,100 +810,16 @@ fn prepKittyGraphics(
             continue;
         };
 
-        // If the selection isn't within our viewport then skip it.
-        const rect = p.rect(image, t);
-        if (bot.before(rect.top_left)) continue;
-        if (rect.bottom_right.before(top)) continue;
+        try self.prepKittyPlacement(t, &top, &bot, &image, p);
+    }
 
-        // If the top left is outside the viewport we need to calc an offset
-        // so that we render (0, 0) with some offset for the texture.
-        const offset_y: u32 = if (rect.top_left.before(top)) offset_y: {
-            const vp_y = t.screen.pages.pointFromPin(.screen, top).?.screen.y;
-            const img_y = t.screen.pages.pointFromPin(.screen, rect.top_left).?.screen.y;
-            const offset_cells = vp_y - img_y;
-            const offset_pixels = offset_cells * self.grid_metrics.cell_height;
-            break :offset_y @intCast(offset_pixels);
-        } else 0;
-
-        // We need to prep this image for upload if it isn't in the cache OR
-        // it is in the cache but the transmit time doesn't match meaning this
-        // image is different.
-        const gop = try self.images.getOrPut(self.alloc, kv.key_ptr.image_id);
-        if (!gop.found_existing or
-            gop.value_ptr.transmit_time.order(image.transmit_time) != .eq)
-        {
-            // Copy the data into the pending state.
-            const data = try self.alloc.dupe(u8, image.data);
-            errdefer self.alloc.free(data);
-
-            // Store it in the map
-            const pending: Image.Pending = .{
-                .width = image.width,
-                .height = image.height,
-                .data = data.ptr,
-            };
-
-            const new_image: Image = switch (image.format) {
-                .grey_alpha => .{ .pending_grey_alpha = pending },
-                .rgb => .{ .pending_rgb = pending },
-                .rgba => .{ .pending_rgba = pending },
-                .png => unreachable, // should be decoded by now
-            };
-
-            if (!gop.found_existing) {
-                gop.value_ptr.* = .{
-                    .image = new_image,
-                    .transmit_time = undefined,
-                };
-            } else {
-                try gop.value_ptr.image.markForReplace(
-                    self.alloc,
-                    new_image,
-                );
-            }
-
-            gop.value_ptr.transmit_time = image.transmit_time;
-        }
-
-        // Convert our screen point to a viewport point
-        const viewport: terminal.point.Point = t.screen.pages.pointFromPin(
-            .viewport,
-            p.pin.*,
-        ) orelse .{ .viewport = .{} };
-
-        // Calculate the source rectangle
-        const source_x = @min(image.width, p.source_x);
-        const source_y = @min(image.height, p.source_y + offset_y);
-        const source_width = if (p.source_width > 0)
-            @min(image.width - source_x, p.source_width)
-        else
-            image.width;
-        const source_height = if (p.source_height > 0)
-            @min(image.height, p.source_height)
-        else
-            image.height -| source_y;
-
-        // Calculate the width/height of our image.
-        const dest_width = if (p.columns > 0) p.columns * self.grid_metrics.cell_width else source_width;
-        const dest_height = if (p.rows > 0) p.rows * self.grid_metrics.cell_height else source_height;
-
-        // Accumulate the placement
-        if (image.width > 0 and image.height > 0) {
-            try self.image_placements.append(self.alloc, .{
-                .image_id = kv.key_ptr.image_id,
-                .x = @intCast(p.pin.x),
-                .y = @intCast(viewport.viewport.y),
-                .z = p.z,
-                .width = dest_width,
-                .height = dest_height,
-                .cell_offset_x = p.x_offset,
-                .cell_offset_y = p.y_offset,
-                .source_x = source_x,
-                .source_y = source_y,
-                .source_width = source_width,
-                .source_height = source_height,
-            });
-        }
+    // If we have virtual placements then we need to scan for placeholders.
+    if (self.image_virtual) {
+        var v_it = terminal.kitty.graphics.unicode.placementIterator(top, bot);
+        while (v_it.next()) |virtual_p| try self.prepKittyVirtualPlacement(
+            t,
+            &virtual_p,
+        );
     }
 
     // Sort the placements by their Z value.
@@ -915,6 +856,181 @@ fn prepKittyGraphics(
     }
 }
 
+fn prepKittyVirtualPlacement(
+    self: *OpenGL,
+    t: *terminal.Terminal,
+    p: *const terminal.kitty.graphics.unicode.Placement,
+) !void {
+    const storage = &t.screen.kitty_images;
+    const image = storage.imageById(p.image_id) orelse {
+        log.warn(
+            "missing image for virtual placement, ignoring image_id={}",
+            .{p.image_id},
+        );
+        return;
+    };
+
+    const rp = p.renderPlacement(
+        storage,
+        &image,
+        self.grid_metrics.cell_width,
+        self.grid_metrics.cell_height,
+    ) catch |err| {
+        log.warn("error rendering virtual placement err={}", .{err});
+        return;
+    };
+
+    // If our placement is zero sized then we don't do anything.
+    if (rp.dest_width == 0 or rp.dest_height == 0) return;
+
+    const viewport: terminal.point.Point = t.screen.pages.pointFromPin(
+        .viewport,
+        rp.top_left,
+    ) orelse {
+        // This is unreachable with virtual placements because we should
+        // only ever be looking at virtual placements that are in our
+        // viewport in the renderer and virtual placements only ever take
+        // up one row.
+        unreachable;
+    };
+
+    // Send our image to the GPU and store the placement for rendering.
+    try self.prepKittyImage(&image);
+    try self.image_placements.append(self.alloc, .{
+        .image_id = image.id,
+        .x = @intCast(rp.top_left.x),
+        .y = @intCast(viewport.viewport.y),
+        .z = -1,
+        .width = rp.dest_width,
+        .height = rp.dest_height,
+        .cell_offset_x = rp.offset_x,
+        .cell_offset_y = rp.offset_y,
+        .source_x = rp.source_x,
+        .source_y = rp.source_y,
+        .source_width = rp.source_width,
+        .source_height = rp.source_height,
+    });
+}
+
+fn prepKittyPlacement(
+    self: *OpenGL,
+    t: *terminal.Terminal,
+    top: *const terminal.Pin,
+    bot: *const terminal.Pin,
+    image: *const terminal.kitty.graphics.Image,
+    p: *const terminal.kitty.graphics.ImageStorage.Placement,
+) !void {
+    // Get the rect for the placement. If this placement doesn't have
+    // a rect then its virtual or something so skip it.
+    const rect = p.rect(image.*, t) orelse return;
+
+    // If the selection isn't within our viewport then skip it.
+    if (bot.before(rect.top_left)) return;
+    if (rect.bottom_right.before(top.*)) return;
+
+    // If the top left is outside the viewport we need to calc an offset
+    // so that we render (0, 0) with some offset for the texture.
+    const offset_y: u32 = if (rect.top_left.before(top.*)) offset_y: {
+        const vp_y = t.screen.pages.pointFromPin(.screen, top.*).?.screen.y;
+        const img_y = t.screen.pages.pointFromPin(.screen, rect.top_left).?.screen.y;
+        const offset_cells = vp_y - img_y;
+        const offset_pixels = offset_cells * self.grid_metrics.cell_height;
+        break :offset_y @intCast(offset_pixels);
+    } else 0;
+
+    // We need to prep this image for upload if it isn't in the cache OR
+    // it is in the cache but the transmit time doesn't match meaning this
+    // image is different.
+    try self.prepKittyImage(image);
+
+    // Convert our screen point to a viewport point
+    const viewport: terminal.point.Point = t.screen.pages.pointFromPin(
+        .viewport,
+        rect.top_left,
+    ) orelse .{ .viewport = .{} };
+
+    // Calculate the source rectangle
+    const source_x = @min(image.width, p.source_x);
+    const source_y = @min(image.height, p.source_y + offset_y);
+    const source_width = if (p.source_width > 0)
+        @min(image.width - source_x, p.source_width)
+    else
+        image.width;
+    const source_height = if (p.source_height > 0)
+        @min(image.height, p.source_height)
+    else
+        image.height -| source_y;
+
+    // Calculate the width/height of our image.
+    const dest_width = if (p.columns > 0) p.columns * self.grid_metrics.cell_width else source_width;
+    const dest_height = if (p.rows > 0) p.rows * self.grid_metrics.cell_height else source_height;
+
+    // Accumulate the placement
+    if (image.width > 0 and image.height > 0) {
+        try self.image_placements.append(self.alloc, .{
+            .image_id = image.id,
+            .x = @intCast(rect.top_left.x),
+            .y = @intCast(viewport.viewport.y),
+            .z = p.z,
+            .width = dest_width,
+            .height = dest_height,
+            .cell_offset_x = p.x_offset,
+            .cell_offset_y = p.y_offset,
+            .source_x = source_x,
+            .source_y = source_y,
+            .source_width = source_width,
+            .source_height = source_height,
+        });
+    }
+}
+
+fn prepKittyImage(
+    self: *OpenGL,
+    image: *const terminal.kitty.graphics.Image,
+) !void {
+    // We need to prep this image for upload if it isn't in the cache OR
+    // it is in the cache but the transmit time doesn't match meaning this
+    // image is different.
+    const gop = try self.images.getOrPut(self.alloc, image.id);
+    if (gop.found_existing and
+        gop.value_ptr.transmit_time.order(image.transmit_time) == .eq)
+    {
+        return;
+    }
+
+    // Copy the data into the pending state.
+    const data = try self.alloc.dupe(u8, image.data);
+    errdefer self.alloc.free(data);
+
+    // Store it in the map
+    const pending: Image.Pending = .{
+        .width = image.width,
+        .height = image.height,
+        .data = data.ptr,
+    };
+
+    const new_image: Image = switch (image.format) {
+        .grey_alpha => .{ .pending_grey_alpha = pending },
+        .rgb => .{ .pending_rgb = pending },
+        .rgba => .{ .pending_rgba = pending },
+        .png => unreachable, // should be decoded by now
+    };
+
+    if (!gop.found_existing) {
+        gop.value_ptr.* = .{
+            .image = new_image,
+            .transmit_time = undefined,
+        };
+    } else {
+        try gop.value_ptr.image.markForReplace(
+            self.alloc,
+            new_image,
+        );
+    }
+
+    gop.value_ptr.transmit_time = image.transmit_time;
+}
+
 /// rebuildCells rebuilds all the GPU cells from our CPU state. This is a
 /// slow operation but ensures that the GPU state exactly matches the CPU state.
 /// In steady-state operation, we use some GPU tricks to send down stale data
diff --git a/src/terminal/PageList.zig b/src/terminal/PageList.zig
index 8a5713333..64b741f2c 100644
--- a/src/terminal/PageList.zig
+++ b/src/terminal/PageList.zig
@@ -7,6 +7,7 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 const assert = std.debug.assert;
 const fastmem = @import("../fastmem.zig");
+const kitty = @import("kitty.zig");
 const point = @import("point.zig");
 const pagepkg = @import("page.zig");
 const stylepkg = @import("style.zig");
@@ -1056,6 +1057,11 @@ const ReflowCursor = struct {
                 self.page_cell.style_id = id;
             }
 
+            // Copy Kitty virtual placeholder status
+            if (cell.codepoint() == kitty.graphics.unicode.placeholder) {
+                self.page_row.kitty_virtual_placeholder = true;
+            }
+
             self.cursorForward();
         }
 
@@ -3224,12 +3230,12 @@ pub const Pin = struct {
 
     /// Returns the grapheme codepoints for the given cell. These are only
     /// the EXTRA codepoints and not the first codepoint.
-    pub fn grapheme(self: Pin, cell: *pagepkg.Cell) ?[]u21 {
+    pub fn grapheme(self: Pin, cell: *const pagepkg.Cell) ?[]u21 {
         return self.page.data.lookupGrapheme(cell);
     }
 
     /// Returns the style for the given cell in this pin.
-    pub fn style(self: Pin, cell: *pagepkg.Cell) stylepkg.Style {
+    pub fn style(self: Pin, cell: *const pagepkg.Cell) stylepkg.Style {
         if (cell.style_id == stylepkg.default_id) return .{};
         return self.page.data.styles.get(
             self.page.data.memory,
@@ -7956,3 +7962,122 @@ test "PageList resize reflow less cols to wrap a wide char" {
         }
     }
 }
+
+test "PageList resize reflow less cols copy kitty placeholder" {
+    const testing = std.testing;
+    const alloc = testing.allocator;
+
+    var s = try init(alloc, 4, 2, 0);
+    defer s.deinit();
+    {
+        try testing.expect(s.pages.first == s.pages.last);
+        const page = &s.pages.first.?.data;
+
+        // Write unicode placeholders
+        for (0..s.cols - 1) |x| {
+            const rac = page.getRowAndCell(x, 0);
+            rac.row.kitty_virtual_placeholder = true;
+            rac.cell.* = .{
+                .content_tag = .codepoint,
+                .content = .{ .codepoint = kitty.graphics.unicode.placeholder },
+            };
+        }
+    }
+
+    // Resize
+    try s.resize(.{ .cols = 2, .reflow = true });
+    try testing.expectEqual(@as(usize, 2), s.cols);
+    try testing.expectEqual(@as(usize, 2), s.totalRows());
+
+    var it = s.rowIterator(.right_down, .{ .active = .{} }, null);
+    while (it.next()) |offset| {
+        for (0..s.cols - 1) |x| {
+            var offset_copy = offset;
+            offset_copy.x = @intCast(x);
+            const rac = offset_copy.rowAndCell();
+
+            const row = rac.row;
+            try testing.expect(row.kitty_virtual_placeholder);
+        }
+    }
+}
+
+test "PageList resize reflow more cols clears kitty placeholder" {
+    const testing = std.testing;
+    const alloc = testing.allocator;
+
+    var s = try init(alloc, 4, 2, 0);
+    defer s.deinit();
+    {
+        try testing.expect(s.pages.first == s.pages.last);
+        const page = &s.pages.first.?.data;
+
+        // Write unicode placeholders
+        for (0..s.cols - 1) |x| {
+            const rac = page.getRowAndCell(x, 0);
+            rac.row.kitty_virtual_placeholder = true;
+            rac.cell.* = .{
+                .content_tag = .codepoint,
+                .content = .{ .codepoint = kitty.graphics.unicode.placeholder },
+            };
+        }
+    }
+
+    // Resize smaller then larger
+    try s.resize(.{ .cols = 2, .reflow = true });
+    try s.resize(.{ .cols = 4, .reflow = true });
+    try testing.expectEqual(@as(usize, 4), s.cols);
+    try testing.expectEqual(@as(usize, 2), s.totalRows());
+
+    var it = s.rowIterator(.right_down, .{ .active = .{} }, null);
+    {
+        const row = it.next().?;
+        const rac = row.rowAndCell();
+        try testing.expect(rac.row.kitty_virtual_placeholder);
+    }
+    {
+        const row = it.next().?;
+        const rac = row.rowAndCell();
+        try testing.expect(!rac.row.kitty_virtual_placeholder);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "PageList resize reflow wrap moves kitty placeholder" {
+    const testing = std.testing;
+    const alloc = testing.allocator;
+
+    var s = try init(alloc, 4, 2, 0);
+    defer s.deinit();
+    {
+        try testing.expect(s.pages.first == s.pages.last);
+        const page = &s.pages.first.?.data;
+
+        // Write unicode placeholders
+        for (2..s.cols - 1) |x| {
+            const rac = page.getRowAndCell(x, 0);
+            rac.row.kitty_virtual_placeholder = true;
+            rac.cell.* = .{
+                .content_tag = .codepoint,
+                .content = .{ .codepoint = kitty.graphics.unicode.placeholder },
+            };
+        }
+    }
+
+    try s.resize(.{ .cols = 2, .reflow = true });
+    try testing.expectEqual(@as(usize, 2), s.cols);
+    try testing.expectEqual(@as(usize, 2), s.totalRows());
+
+    var it = s.rowIterator(.right_down, .{ .active = .{} }, null);
+    {
+        const row = it.next().?;
+        const rac = row.rowAndCell();
+        try testing.expect(!rac.row.kitty_virtual_placeholder);
+    }
+    {
+        const row = it.next().?;
+        const rac = row.rowAndCell();
+        try testing.expect(rac.row.kitty_virtual_placeholder);
+    }
+    try testing.expect(it.next() == null);
+}
diff --git a/src/terminal/Screen.zig b/src/terminal/Screen.zig
index a9552db20..8ba977b7c 100644
--- a/src/terminal/Screen.zig
+++ b/src/terminal/Screen.zig
@@ -1012,6 +1012,16 @@ pub fn clearCells(
         if (cells.len == self.pages.cols) row.styled = false;
     }
 
+    if (row.kitty_virtual_placeholder and
+        cells.len == self.pages.cols)
+    {
+        for (cells) |c| {
+            if (c.codepoint() == kitty.graphics.unicode.placeholder) {
+                break;
+            }
+        } else row.kitty_virtual_placeholder = false;
+    }
+
     @memset(cells, self.blankCell());
 }
 
diff --git a/src/terminal/Terminal.zig b/src/terminal/Terminal.zig
index c58377374..063368960 100644
--- a/src/terminal/Terminal.zig
+++ b/src/terminal/Terminal.zig
@@ -281,7 +281,7 @@ pub fn print(self: *Terminal, c: u21) !void {
                 // column. Otherwise, we need to check if there is text to
                 // figure out if we're attaching to the prev or current.
                 if (self.screen.cursor.x != right_limit - 1) break :left 1;
-                break :left @intFromBool(!self.screen.cursor.page_cell.hasText());
+                break :left @intFromBool(self.screen.cursor.page_cell.codepoint() == 0);
             };
 
             // If the previous cell is a wide spacer tail, then we actually
@@ -299,7 +299,7 @@ pub fn print(self: *Terminal, c: u21) !void {
 
         // If our cell has no content, then this is a new cell and
         // necessarily a grapheme break.
-        if (!prev.cell.hasText()) break :grapheme;
+        if (prev.cell.codepoint() == 0) break :grapheme;
 
         const grapheme_break = brk: {
             var state: unicode.GraphemeBreakState = .{};
@@ -379,7 +379,11 @@ pub fn print(self: *Terminal, c: u21) !void {
                 }
             }
 
-            log.debug("c={x} grapheme attach to left={}", .{ c, prev.left });
+            log.debug("c={X} grapheme attach to left={} primary_cp={X}", .{
+                c,
+                prev.left,
+                prev.cell.codepoint(),
+            });
             self.screen.cursorMarkDirty();
             try self.screen.appendGrapheme(prev.cell, c);
             return;
@@ -636,6 +640,12 @@ fn printCell(
         }
     }
 
+    // If this is a Kitty unicode placeholder then we need to mark the
+    // row so that the renderer can lookup rows with these much faster.
+    if (c == kitty.graphics.unicode.placeholder) {
+        self.screen.cursor.page_row.kitty_virtual_placeholder = true;
+    }
+
     // We check for an active hyperlink first because setHyperlink
     // handles clearing the old hyperlink and an optimization if we're
     // overwriting the same hyperlink.
@@ -3542,6 +3552,24 @@ test "Terminal: print invoke charset single" {
     }
 }
 
+test "Terminal: print kitty unicode placeholder" {
+    var t = try init(testing.allocator, .{ .cols = 10, .rows = 10 });
+    defer t.deinit(testing.allocator);
+
+    try t.print(kitty.graphics.unicode.placeholder);
+    try testing.expectEqual(@as(usize, 0), t.screen.cursor.y);
+    try testing.expectEqual(@as(usize, 1), t.screen.cursor.x);
+
+    {
+        const list_cell = t.screen.pages.getCell(.{ .screen = .{ .x = 0, .y = 0 } }).?;
+        const cell = list_cell.cell;
+        try testing.expectEqual(@as(u21, kitty.graphics.unicode.placeholder), cell.content.codepoint);
+        try testing.expect(list_cell.row.kitty_virtual_placeholder);
+    }
+
+    try testing.expect(t.isDirty(.{ .screen = .{ .x = 0, .y = 0 } }));
+}
+
 test "Terminal: soft wrap" {
     var t = try init(testing.allocator, .{ .cols = 3, .rows = 80 });
     defer t.deinit(testing.allocator);
diff --git a/src/terminal/kitty/graphics.zig b/src/terminal/kitty/graphics.zig
index cfc45adbc..0beb4901e 100644
--- a/src/terminal/kitty/graphics.zig
+++ b/src/terminal/kitty/graphics.zig
@@ -16,7 +16,14 @@
 //! aim to ship a v1 of this implementation came at some cost. I learned a lot
 //! though and I think we can go back through and fix this up.
 
+const render = @import("graphics_render.zig");
 pub usingnamespace @import("graphics_command.zig");
 pub usingnamespace @import("graphics_exec.zig");
 pub usingnamespace @import("graphics_image.zig");
 pub usingnamespace @import("graphics_storage.zig");
+pub const unicode = @import("graphics_unicode.zig");
+pub const RenderPlacement = render.Placement;
+
+test {
+    @import("std").testing.refAllDecls(@This());
+}
diff --git a/src/terminal/kitty/graphics_command.zig b/src/terminal/kitty/graphics_command.zig
index fe9a4520f..810a8df55 100644
--- a/src/terminal/kitty/graphics_command.zig
+++ b/src/terminal/kitty/graphics_command.zig
@@ -462,6 +462,10 @@ pub const Display = struct {
     rows: u32 = 0, // r
     cursor_movement: CursorMovement = .after, // C
     virtual_placement: bool = false, // U
+    parent_id: u32 = 0, // P
+    parent_placement_id: u32 = 0, // Q
+    horizontal_offset: u32 = 0, // H
+    vertical_offset: u32 = 0, // V
     z: i32 = 0, // z
 
     pub const CursorMovement = enum {
@@ -537,6 +541,22 @@ pub const Display = struct {
             result.z = @bitCast(v);
         }
 
+        if (kv.get('P')) |v| {
+            result.parent_id = v;
+        }
+
+        if (kv.get('Q')) |v| {
+            result.parent_placement_id = v;
+        }
+
+        if (kv.get('H')) |v| {
+            result.horizontal_offset = v;
+        }
+
+        if (kv.get('V')) |v| {
+            result.vertical_offset = v;
+        }
+
         return result;
     }
 };
diff --git a/src/terminal/kitty/graphics_exec.zig b/src/terminal/kitty/graphics_exec.zig
index 0ea084795..b8924d56f 100644
--- a/src/terminal/kitty/graphics_exec.zig
+++ b/src/terminal/kitty/graphics_exec.zig
@@ -184,19 +184,33 @@ fn display(
     // Make sure our response has the image id in case we looked up by number
     result.id = img.id;
 
-    // Track a new pin for our cursor. The cursor is always tracked but we
-    // don't want this one to move with the cursor.
-    const placement_pin = terminal.screen.pages.trackPin(
-        terminal.screen.cursor.page_pin.*,
-    ) catch |err| {
-        log.warn("failed to create pin for Kitty graphics err={}", .{err});
-        result.message = "EINVAL: failed to prepare terminal state";
-        return result;
+    // Location where the placement will go.
+    const location: ImageStorage.Placement.Location = location: {
+        // Virtual placements are not tracked
+        if (d.virtual_placement) {
+            if (d.parent_id > 0) {
+                result.message = "EINVAL: virtual placement cannot refer to a parent";
+                return result;
+            }
+
+            break :location .{ .virtual = {} };
+        }
+
+        // Track a new pin for our cursor. The cursor is always tracked but we
+        // don't want this one to move with the cursor.
+        const pin = terminal.screen.pages.trackPin(
+            terminal.screen.cursor.page_pin.*,
+        ) catch |err| {
+            log.warn("failed to create pin for Kitty graphics err={}", .{err});
+            result.message = "EINVAL: failed to prepare terminal state";
+            return result;
+        };
+        break :location .{ .pin = pin };
     };
 
     // Add the placement
     const p: ImageStorage.Placement = .{
-        .pin = placement_pin,
+        .location = location,
         .x_offset = d.x_offset,
         .y_offset = d.y_offset,
         .source_x = d.x,
@@ -218,21 +232,24 @@ fn display(
         return result;
     };
 
-    // Cursor needs to move after placement
-    switch (d.cursor_movement) {
-        .none => {},
-        .after => {
-            // We use terminal.index to properly handle scroll regions.
-            const size = p.gridSize(img, terminal);
-            for (0..size.rows) |_| terminal.index() catch |err| {
-                log.warn("failed to move cursor: {}", .{err});
-                break;
-            };
+    // Apply cursor movement setting. This only applies to pin placements.
+    switch (p.location) {
+        .virtual => {},
+        .pin => |pin| switch (d.cursor_movement) {
+            .none => {},
+            .after => {
+                // We use terminal.index to properly handle scroll regions.
+                const size = p.gridSize(img, terminal);
+                for (0..size.rows) |_| terminal.index() catch |err| {
+                    log.warn("failed to move cursor: {}", .{err});
+                    break;
+                };
 
-            terminal.setCursorPos(
-                terminal.screen.cursor.y,
-                p.pin.x + size.cols + 1,
-            );
+                terminal.setCursorPos(
+                    terminal.screen.cursor.y,
+                    pin.x + size.cols + 1,
+                );
+            },
         },
     }
 
diff --git a/src/terminal/kitty/graphics_render.zig b/src/terminal/kitty/graphics_render.zig
new file mode 100644
index 000000000..af888582f
--- /dev/null
+++ b/src/terminal/kitty/graphics_render.zig
@@ -0,0 +1,28 @@
+const std = @import("std");
+const assert = std.debug.assert;
+const testing = std.testing;
+const terminal = @import("../main.zig");
+
+/// A render placement is a way to position a Kitty graphics image onto
+/// the screen. It is broken down into the fields that make it easier to
+/// position the image using a renderer.
+pub const Placement = struct {
+    /// The top-left corner of the image in grid coordinates.
+    top_left: terminal.Pin,
+
+    /// The offset in pixels from the top-left corner of the grid cell.
+    offset_x: u32 = 0,
+    offset_y: u32 = 0,
+
+    /// The source rectangle of the image to render. This doesn't have to
+    /// match the size the destination size and the renderer is expected
+    /// to scale the image to fit the destination size.
+    source_x: u32 = 0,
+    source_y: u32 = 0,
+    source_width: u32 = 0,
+    source_height: u32 = 0,
+
+    /// The final width/height of the image in pixels.
+    dest_width: u32 = 0,
+    dest_height: u32 = 0,
+};
diff --git a/src/terminal/kitty/graphics_storage.zig b/src/terminal/kitty/graphics_storage.zig
index cf02ee73e..bf8633c88 100644
--- a/src/terminal/kitty/graphics_storage.zig
+++ b/src/terminal/kitty/graphics_storage.zig
@@ -218,18 +218,27 @@ pub const ImageStorage = struct {
         cmd: command.Delete,
     ) void {
         switch (cmd) {
-            .all => |delete_images| if (delete_images) {
-                // We just reset our entire state.
-                self.deinit(alloc, &t.screen);
-                self.* = .{
-                    .dirty = true,
-                    .total_limit = self.total_limit,
-                };
-            } else {
-                // Delete all our placements
-                self.clearPlacements(&t.screen);
-                self.placements.deinit(alloc);
-                self.placements = .{};
+            .all => |delete_images| {
+                var it = self.placements.iterator();
+                while (it.next()) |entry| {
+                    // Skip virtual placements
+                    switch (entry.value_ptr.location) {
+                        .pin => {},
+                        .virtual => continue,
+                    }
+
+                    // Deinit the placement and remove it
+                    const image_id = entry.key_ptr.image_id;
+                    entry.value_ptr.deinit(&t.screen);
+                    self.placements.removeByPtr(entry.key_ptr);
+                    if (delete_images) self.deleteIfUnused(alloc, image_id);
+                }
+
+                if (delete_images) {
+                    var image_it = self.images.iterator();
+                    while (image_it.next()) |kv| self.deleteIfUnused(alloc, kv.key_ptr.*);
+                }
+
                 self.dirty = true;
             },
 
@@ -318,7 +327,7 @@ pub const ImageStorage = struct {
                 var it = self.placements.iterator();
                 while (it.next()) |entry| {
                     const img = self.imageById(entry.key_ptr.image_id) orelse continue;
-                    const rect = entry.value_ptr.rect(img, t);
+                    const rect = entry.value_ptr.rect(img, t) orelse continue;
                     if (rect.top_left.x <= x and rect.bottom_right.x >= x) {
                         entry.value_ptr.deinit(&t.screen);
                         self.placements.removeByPtr(entry.key_ptr);
@@ -345,7 +354,7 @@ pub const ImageStorage = struct {
                 var it = self.placements.iterator();
                 while (it.next()) |entry| {
                     const img = self.imageById(entry.key_ptr.image_id) orelse continue;
-                    const rect = entry.value_ptr.rect(img, t);
+                    const rect = entry.value_ptr.rect(img, t) orelse continue;
 
                     // We need to copy our pin to ensure we are at least at
                     // the top-left x.
@@ -365,6 +374,14 @@ pub const ImageStorage = struct {
             .z => |v| {
                 var it = self.placements.iterator();
                 while (it.next()) |entry| {
+                    switch (entry.value_ptr.location) {
+                        .pin => {},
+
+                        // Virtual placeholders cannot delete by z according
+                        // to the spec.
+                        .virtual => continue,
+                    }
+
                     if (entry.value_ptr.z == v.z) {
                         const image_id = entry.key_ptr.image_id;
                         entry.value_ptr.deinit(&t.screen);
@@ -451,7 +468,7 @@ pub const ImageStorage = struct {
         var it = self.placements.iterator();
         while (it.next()) |entry| {
             const img = self.imageById(entry.key_ptr.image_id) orelse continue;
-            const rect = entry.value_ptr.rect(img, t);
+            const rect = entry.value_ptr.rect(img, t) orelse continue;
             if (target_pin.isBetween(rect.top_left, rect.bottom_right)) {
                 if (filter) |f| if (!f(filter_ctx, entry.value_ptr.*)) continue;
                 entry.value_ptr.deinit(&t.screen);
@@ -576,8 +593,8 @@ pub const ImageStorage = struct {
     };
 
     pub const Placement = struct {
-        /// The tracked pin for this placement.
-        pin: *PageList.Pin,
+        /// The location where this placement should be drawn.
+        location: Location,
 
         /// Offset of the x/y from the top-left of the cell.
         x_offset: u32 = 0,
@@ -596,11 +613,22 @@ pub const ImageStorage = struct {
         /// The z-index for this placement.
         z: i32 = 0,
 
+        pub const Location = union(enum) {
+            /// Exactly placed on a screen pin.
+            pin: *PageList.Pin,
+
+            /// Virtual placement (U=1) for unicode placeholders.
+            virtual: void,
+        };
+
         pub fn deinit(
             self: *const Placement,
             s: *terminal.Screen,
         ) void {
-            s.pages.untrackPin(self.pin);
+            switch (self.location) {
+                .pin => |p| s.pages.untrackPin(p),
+                .virtual => {},
+            }
         }
 
         /// Returns the size in grid cells that this placement takes up.
@@ -642,15 +670,20 @@ pub const ImageStorage = struct {
         }
 
         /// Returns a selection of the entire rectangle this placement
-        /// occupies within the screen.
+        /// occupies within the screen. This can return null if the placement
+        /// doesn't have an associated rect (i.e. a virtual placement).
         pub fn rect(
             self: Placement,
             image: Image,
             t: *const terminal.Terminal,
-        ) Rect {
+        ) ?Rect {
             const grid_size = self.gridSize(image, t);
+            const pin = switch (self.location) {
+                .pin => |p| p,
+                .virtual => return null,
+            };
 
-            var br = switch (self.pin.downOverflow(grid_size.rows - 1)) {
+            var br = switch (pin.downOverflow(grid_size.rows - 1)) {
                 .offset => |v| v,
                 .overflow => |v| v.end,
             };
@@ -658,12 +691,12 @@ pub const ImageStorage = struct {
                 // We need to sub one here because the x value is
                 // one width already. So if the image is width "1"
                 // then we add zero to X because X itelf is width 1.
-                self.pin.x + (grid_size.cols - 1),
+                pin.x + (grid_size.cols - 1),
                 t.cols - 1,
             );
 
             return .{
-                .top_left = self.pin.*,
+                .top_left = pin.*,
                 .bottom_right = br,
             };
         }
@@ -692,8 +725,8 @@ test "storage: add placement with zero placement id" {
     defer s.deinit(alloc, &t.screen);
     try s.addImage(alloc, .{ .id = 1, .width = 50, .height = 50 });
     try s.addImage(alloc, .{ .id = 2, .width = 25, .height = 25 });
-    try s.addPlacement(alloc, 1, 0, .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) });
-    try s.addPlacement(alloc, 1, 0, .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) });
+    try s.addPlacement(alloc, 1, 0, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) } });
+    try s.addPlacement(alloc, 1, 0, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) } });
 
     try testing.expectEqual(@as(usize, 2), s.placements.count());
     try testing.expectEqual(@as(usize, 2), s.images.count());
@@ -721,8 +754,8 @@ test "storage: delete all placements and images" {
     try s.addImage(alloc, .{ .id = 1 });
     try s.addImage(alloc, .{ .id = 2 });
     try s.addImage(alloc, .{ .id = 3 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
-    try s.addPlacement(alloc, 2, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
+    try s.addPlacement(alloc, 2, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
 
     s.dirty = false;
     s.delete(alloc, &t, .{ .all = true });
@@ -745,8 +778,8 @@ test "storage: delete all placements and images preserves limit" {
     try s.addImage(alloc, .{ .id = 1 });
     try s.addImage(alloc, .{ .id = 2 });
     try s.addImage(alloc, .{ .id = 3 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
-    try s.addPlacement(alloc, 2, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
+    try s.addPlacement(alloc, 2, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
 
     s.dirty = false;
     s.delete(alloc, &t, .{ .all = true });
@@ -769,8 +802,8 @@ test "storage: delete all placements" {
     try s.addImage(alloc, .{ .id = 1 });
     try s.addImage(alloc, .{ .id = 2 });
     try s.addImage(alloc, .{ .id = 3 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
-    try s.addPlacement(alloc, 2, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
+    try s.addPlacement(alloc, 2, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
 
     s.dirty = false;
     s.delete(alloc, &t, .{ .all = false });
@@ -792,8 +825,8 @@ test "storage: delete all placements by image id" {
     try s.addImage(alloc, .{ .id = 1 });
     try s.addImage(alloc, .{ .id = 2 });
     try s.addImage(alloc, .{ .id = 3 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
-    try s.addPlacement(alloc, 2, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
+    try s.addPlacement(alloc, 2, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
 
     s.dirty = false;
     s.delete(alloc, &t, .{ .id = .{ .image_id = 2 } });
@@ -815,8 +848,8 @@ test "storage: delete all placements by image id and unused images" {
     try s.addImage(alloc, .{ .id = 1 });
     try s.addImage(alloc, .{ .id = 2 });
     try s.addImage(alloc, .{ .id = 3 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
-    try s.addPlacement(alloc, 2, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
+    try s.addPlacement(alloc, 2, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
 
     s.dirty = false;
     s.delete(alloc, &t, .{ .id = .{ .delete = true, .image_id = 2 } });
@@ -838,9 +871,9 @@ test "storage: delete placement by specific id" {
     try s.addImage(alloc, .{ .id = 1 });
     try s.addImage(alloc, .{ .id = 2 });
     try s.addImage(alloc, .{ .id = 3 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
-    try s.addPlacement(alloc, 1, 2, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
-    try s.addPlacement(alloc, 2, 1, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
+    try s.addPlacement(alloc, 1, 2, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
+    try s.addPlacement(alloc, 2, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 1 }) } });
 
     s.dirty = false;
     s.delete(alloc, &t, .{ .id = .{
@@ -867,8 +900,8 @@ test "storage: delete intersecting cursor" {
     defer s.deinit(alloc, &t.screen);
     try s.addImage(alloc, .{ .id = 1, .width = 50, .height = 50 });
     try s.addImage(alloc, .{ .id = 2, .width = 25, .height = 25 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) });
-    try s.addPlacement(alloc, 1, 2, .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) } });
+    try s.addPlacement(alloc, 1, 2, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) } });
 
     t.screen.cursorAbsolute(12, 12);
 
@@ -899,8 +932,8 @@ test "storage: delete intersecting cursor plus unused" {
     defer s.deinit(alloc, &t.screen);
     try s.addImage(alloc, .{ .id = 1, .width = 50, .height = 50 });
     try s.addImage(alloc, .{ .id = 2, .width = 25, .height = 25 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) });
-    try s.addPlacement(alloc, 1, 2, .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) } });
+    try s.addPlacement(alloc, 1, 2, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) } });
 
     t.screen.cursorAbsolute(12, 12);
 
@@ -931,8 +964,8 @@ test "storage: delete intersecting cursor hits multiple" {
     defer s.deinit(alloc, &t.screen);
     try s.addImage(alloc, .{ .id = 1, .width = 50, .height = 50 });
     try s.addImage(alloc, .{ .id = 2, .width = 25, .height = 25 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) });
-    try s.addPlacement(alloc, 1, 2, .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) } });
+    try s.addPlacement(alloc, 1, 2, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) } });
 
     t.screen.cursorAbsolute(26, 26);
 
@@ -957,8 +990,8 @@ test "storage: delete by column" {
     defer s.deinit(alloc, &t.screen);
     try s.addImage(alloc, .{ .id = 1, .width = 50, .height = 50 });
     try s.addImage(alloc, .{ .id = 2, .width = 25, .height = 25 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) });
-    try s.addPlacement(alloc, 1, 2, .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) } });
+    try s.addPlacement(alloc, 1, 2, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) } });
 
     s.dirty = false;
     s.delete(alloc, &t, .{ .column = .{
@@ -988,9 +1021,9 @@ test "storage: delete by column 1x1" {
     var s: ImageStorage = .{};
     defer s.deinit(alloc, &t.screen);
     try s.addImage(alloc, .{ .id = 1, .width = 1, .height = 1 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) });
-    try s.addPlacement(alloc, 1, 2, .{ .pin = try trackPin(&t, .{ .x = 1, .y = 0 }) });
-    try s.addPlacement(alloc, 1, 3, .{ .pin = try trackPin(&t, .{ .x = 2, .y = 0 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) } });
+    try s.addPlacement(alloc, 1, 2, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 1, .y = 0 }) } });
+    try s.addPlacement(alloc, 1, 3, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 2, .y = 0 }) } });
 
     s.delete(alloc, &t, .{ .column = .{
         .delete = false,
@@ -1023,8 +1056,8 @@ test "storage: delete by row" {
     defer s.deinit(alloc, &t.screen);
     try s.addImage(alloc, .{ .id = 1, .width = 50, .height = 50 });
     try s.addImage(alloc, .{ .id = 2, .width = 25, .height = 25 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) });
-    try s.addPlacement(alloc, 1, 2, .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 0, .y = 0 }) } });
+    try s.addPlacement(alloc, 1, 2, .{ .location = .{ .pin = try trackPin(&t, .{ .x = 25, .y = 25 }) } });
 
     s.dirty = false;
     s.delete(alloc, &t, .{ .row = .{
@@ -1054,9 +1087,9 @@ test "storage: delete by row 1x1" {
     var s: ImageStorage = .{};
     defer s.deinit(alloc, &t.screen);
     try s.addImage(alloc, .{ .id = 1, .width = 1, .height = 1 });
-    try s.addPlacement(alloc, 1, 1, .{ .pin = try trackPin(&t, .{ .y = 0 }) });
-    try s.addPlacement(alloc, 1, 2, .{ .pin = try trackPin(&t, .{ .y = 1 }) });
-    try s.addPlacement(alloc, 1, 3, .{ .pin = try trackPin(&t, .{ .y = 2 }) });
+    try s.addPlacement(alloc, 1, 1, .{ .location = .{ .pin = try trackPin(&t, .{ .y = 0 }) } });
+    try s.addPlacement(alloc, 1, 2, .{ .location = .{ .pin = try trackPin(&t, .{ .y = 1 }) } });
+    try s.addPlacement(alloc, 1, 3, .{ .location = .{ .pin = try trackPin(&t, .{ .y = 2 }) } });
 
     s.delete(alloc, &t, .{ .row = .{
         .delete = false,
diff --git a/src/terminal/kitty/graphics_unicode.zig b/src/terminal/kitty/graphics_unicode.zig
new file mode 100644
index 000000000..339ad6202
--- /dev/null
+++ b/src/terminal/kitty/graphics_unicode.zig
@@ -0,0 +1,1348 @@
+//! This file contains various logic and data for working with the
+//! Kitty graphics protocol unicode placeholder, virtual placement feature.
+
+const std = @import("std");
+const assert = std.debug.assert;
+const testing = std.testing;
+const terminal = @import("../main.zig");
+const kitty_gfx = terminal.kitty.graphics;
+const Image = kitty_gfx.Image;
+const ImageStorage = kitty_gfx.ImageStorage;
+const RenderPlacement = kitty_gfx.RenderPlacement;
+
+const log = std.log.scoped(.kitty_gfx);
+
+/// Codepoint for the unicode placeholder character.
+pub const placeholder: u21 = 0x10EEEE;
+
+/// Returns an iterator that iterates over all of the virtual placements
+/// in the given pin. If `limit` is provided, the iterator will stop
+/// when it reaches that pin (inclusive). If `limit` is not provided,
+/// the iterator will continue until the end of the page list.
+pub fn placementIterator(
+    pin: terminal.Pin,
+    limit: ?terminal.Pin,
+) PlacementIterator {
+    var row_it = pin.rowIterator(.right_down, limit);
+    const row = row_it.next();
+    return .{ .row_it = row_it, .row = row };
+}
+
+/// Iterator over unicode virtual placements.
+pub const PlacementIterator = struct {
+    row_it: terminal.PageList.RowIterator,
+    row: ?terminal.Pin,
+
+    pub fn next(self: *PlacementIterator) ?Placement {
+        while (self.row) |*row| {
+            // This row flag is set on rows that have the virtual placeholder
+            if (!row.rowAndCell().row.kitty_virtual_placeholder) {
+                self.row = self.row_it.next();
+                continue;
+            }
+
+            // Our current run. A run is always only a single row. This
+            // assumption is built-in to our logic so if we want to change
+            // this later we have to redo the logic; tests should cover;
+            var run: ?IncompletePlacement = null;
+
+            // Iterate over our remaining cells and find one with a placeholder.
+            const cells = row.cells(.right);
+            for (cells, row.x..) |*cell, x| {
+                // "row" now points to the top-left pin of the placement.
+                // We need this temporary state to build our incomplete
+                // placement.
+                assert(@intFromPtr(row) == @intFromPtr(&self.row));
+                row.x = @intCast(x);
+
+                // If this cell doesn't have the placeholder, then we
+                // complete the run if we have it otherwise we just move
+                // on and keep searching.
+                if (cell.codepoint() != placeholder) {
+                    if (run) |prev| return prev.complete();
+                    continue;
+                }
+
+                // If we don't have a previous run, then we save this
+                // incomplete one, start a run, and move on.
+                const curr = IncompletePlacement.init(row, cell);
+                if (run) |*prev| {
+                    // If we can't append, then we complete the previous
+                    // run and return it.
+                    if (!prev.append(&curr)) {
+                        // Note: self.row is already updated due to the
+                        // row pointer above. It points back at this same
+                        // cell so we can continue the new placements from
+                        // here.
+                        return prev.complete();
+                    }
+
+                    // append is mutating so if we reached this point
+                    // then prev has been updated.
+                } else {
+                    // For appending, we need to set our initial values.
+                    var prev = curr;
+                    if (prev.row == null) prev.row = 0;
+                    if (prev.col == null) prev.col = 0;
+                    run = prev;
+                }
+            }
+
+            // We move to the next row no matter what
+            self.row = self.row_it.next();
+
+            // If we have a run, we complete it here.
+            if (run) |prev| return prev.complete();
+        }
+
+        return null;
+    }
+};
+
+/// A virtual placement in the terminal. This can represent more than
+/// one cell if the cells combine to be a run.
+pub const Placement = struct {
+    /// The top-left pin of the placement. This can be used to get the
+    /// screen x/y.
+    pin: terminal.Pin,
+
+    /// The image ID and placement ID for this virtual placement. The
+    /// image ID is encoded in the fg color (plus optional a 8-bit high
+    /// value in the 3rd diacritic). The placement ID is encoded in the
+    /// underline color (optionally).
+    image_id: u32,
+    placement_id: u32,
+
+    /// Starting row/col index for the image itself. This is the "fragment"
+    /// of the image we want to show in this placement. This is 0-indexed.
+    col: u32,
+    row: u32,
+
+    /// The width/height in cells of this placement.
+    width: u32,
+    height: u32,
+
+    pub const Error = error{
+        PlacementGridOutOfBounds,
+        PlacementMissingPlacement,
+    };
+
+    /// Take this virtual placement and convert it to a render placement.
+    pub fn renderPlacement(
+        self: *const Placement,
+        storage: *const ImageStorage,
+        img: *const Image,
+        cell_width: u32,
+        cell_height: u32,
+    ) Error!RenderPlacement {
+        // In this function, there is a variable naming convention to try
+        // to make it slightly less confusing. The prefix will tell you what
+        // coordinate/size space a variable lives in:
+        // - img_* is for the original image
+        // - p_* is for the final placement
+        // - vp_* is for the virtual placement
+
+        // Determine the grid size that this virtual placement fits into.
+        const p_grid = try self.grid(storage, img, cell_width, cell_height);
+
+        // From here on out we switch to floating point math. These are
+        // constants that we'll reference repeatedly.
+        const img_width_f64: f64 = @floatFromInt(img.width);
+        const img_height_f64: f64 = @floatFromInt(img.height);
+
+        // Next we have to fit the source image into the grid size while preserving
+        // aspect ratio. We will center the image horizontally/vertically if
+        // necessary.
+        const p_scale: struct {
+            /// The offsets are pixels from the top-left of the placement-sized
+            /// image in order to center the image as necessary.
+            x_offset: f64 = 0,
+            y_offset: f64 = 0,
+
+            /// The multipliers to apply to the width/height of the original
+            /// image size in order to reach the placement size.
+            x_scale: f64 = 0,
+            y_scale: f64 = 0,
+        } = scale: {
+            const p_rows_px: f64 = @floatFromInt(p_grid.rows * cell_height);
+            const p_cols_px: f64 = @floatFromInt(p_grid.columns * cell_width);
+            if (img_width_f64 * p_rows_px > img_height_f64 * p_cols_px) {
+                // Image is wider than the grid, fit width and center height
+                const x_scale = p_cols_px / @max(img_width_f64, 1);
+                const y_scale = x_scale;
+                const y_offset = (p_rows_px - img_height_f64 * y_scale) / 2;
+                break :scale .{
+                    .x_scale = x_scale,
+                    .y_scale = y_scale,
+                    .y_offset = y_offset,
+                };
+            } else {
+                // Image is taller than the grid, fit height and center width
+                const y_scale = p_rows_px / @max(img_height_f64, 1);
+                const x_scale = y_scale;
+                const x_offset = (p_cols_px - img_width_f64 * x_scale) / 2;
+                break :scale .{
+                    .x_scale = x_scale,
+                    .y_scale = y_scale,
+                    .x_offset = x_offset,
+                };
+            }
+        };
+
+        // Scale our original image according to the aspect ratio
+        // and padding calculated for p_scale.
+        const img_scaled: struct {
+            x_offset: f64,
+            y_offset: f64,
+            width: f64,
+            height: f64,
+        } = scale: {
+            const x_offset: f64 = p_scale.x_offset / p_scale.x_scale;
+            const y_offset: f64 = p_scale.y_offset / p_scale.y_scale;
+            const width: f64 = img_width_f64 + (x_offset * 2);
+            const height: f64 = img_height_f64 + (y_offset * 2);
+            break :scale .{
+                .x_offset = x_offset,
+                .y_offset = y_offset,
+                .width = width,
+                .height = height,
+            };
+        };
+
+        // Calculate the source rectangle for the scaled image. These
+        // coordinates are in the scaled image space.
+        var img_scale_source: struct {
+            x: f64,
+            y: f64,
+            width: f64,
+            height: f64,
+        } = source: {
+            // Float-converted values we already have
+            const vp_width: f64 = @floatFromInt(self.width);
+            const vp_height: f64 = @floatFromInt(self.height);
+            const vp_col: f64 = @floatFromInt(self.col);
+            const vp_row: f64 = @floatFromInt(self.row);
+            const p_grid_cols: f64 = @floatFromInt(p_grid.columns);
+            const p_grid_rows: f64 = @floatFromInt(p_grid.rows);
+
+            // Calculate the scaled source rectangle for the image, undoing
+            // the aspect ratio scaling as necessary.
+            const width: f64 = img_scaled.width * (vp_width / p_grid_cols);
+            const height: f64 = img_scaled.height * (vp_height / p_grid_rows);
+            const x: f64 = img_scaled.width * (vp_col / p_grid_cols);
+            const y: f64 = img_scaled.height * (vp_row / p_grid_rows);
+
+            break :source .{
+                .width = width,
+                .height = height,
+                .x = x,
+                .y = y,
+            };
+        };
+
+        // The destination rectangle. The x/y is specified by offsets from
+        // the top-left since that's how our RenderPlacement works.
+        const p_dest: struct {
+            x_offset: f64,
+            y_offset: f64,
+            width: f64,
+            height: f64,
+        } = dest: {
+            var x_offset: f64 = 0;
+            var y_offset: f64 = 0;
+            var width: f64 = @floatFromInt(self.width * cell_width);
+            var height: f64 = @floatFromInt(self.height * cell_height);
+
+            if (img_scale_source.y < img_scaled.y_offset) {
+                // If our source rect y is within the offset area, we need to
+                // adjust our source rect and destination since the source texture
+                // doesnt actually have the offset area blank.
+                const offset: f64 = img_scaled.y_offset - img_scale_source.y;
+                img_scale_source.height -= offset;
+                y_offset = offset;
+                height -= offset * p_scale.y_scale;
+                img_scale_source.y = 0;
+
+                // If our height is greater than our original height,
+                // bring it back down. This addresses the case where the top
+                // and bottom offsets are both used.
+                if (img_scale_source.height > img_height_f64) {
+                    img_scale_source.height = img_height_f64;
+                    height = img_height_f64 * p_scale.y_scale;
+                }
+            } else if (img_scale_source.y + img_scale_source.height >
+                img_scaled.height - img_scaled.y_offset)
+            {
+                // if our y is in our bottom offset area, we need to shorten the
+                // source to fit in the cell.
+                img_scale_source.y -= img_scaled.y_offset;
+                img_scale_source.height = img_scaled.height - img_scaled.y_offset - img_scale_source.y;
+                img_scale_source.height -= img_scaled.y_offset;
+                height = img_scale_source.height * p_scale.y_scale;
+            } else {
+                img_scale_source.y -= img_scaled.y_offset;
+            }
+
+            if (img_scale_source.x < img_scaled.x_offset) {
+                // If our source rect x is within the offset area, we need to
+                // adjust our source rect and destination since the source texture
+                // doesnt actually have the offset area blank.
+                const offset: f64 = img_scaled.x_offset - img_scale_source.x;
+                img_scale_source.width -= offset;
+                x_offset = offset;
+                width -= offset * p_scale.x_scale;
+                img_scale_source.x = 0;
+
+                // If our width is greater than our original width,
+                // bring it back down. This addresses the case where the left
+                // and right offsets are both used.
+                if (img_scale_source.width > img_width_f64) {
+                    img_scale_source.width = img_width_f64;
+                    width = img_width_f64 * p_scale.x_scale;
+                }
+            } else if (img_scale_source.x + img_scale_source.width >
+                img_scaled.width - img_scaled.x_offset)
+            {
+                // if our x is in our right offset area, we need to shorten the
+                // source to fit in the cell.
+                img_scale_source.x -= img_scaled.x_offset;
+                img_scale_source.width = img_scaled.width - img_scaled.x_offset - img_scale_source.x;
+                img_scale_source.width -= img_scaled.x_offset;
+                width = img_scale_source.width * p_scale.x_scale;
+            } else {
+                img_scale_source.x -= img_scaled.x_offset;
+            }
+
+            // If our modified source width/height is less than zero then
+            // we render nothing because it means we're rendering outside
+            // of the visible image.
+            if (img_scale_source.width <= 0 or img_scale_source.height <= 0) {
+                return .{ .top_left = self.pin };
+            }
+
+            break :dest .{
+                .x_offset = x_offset * p_scale.x_scale,
+                .y_offset = y_offset * p_scale.y_scale,
+                .width = width,
+                .height = height,
+            };
+        };
+        // log.warn("img_width={} img_height={}\np_grid={}\np_scale={}\nimg_scaled={}\nimg_scale_source={}\np_dest={}\n", .{
+        //     img_width_f64,
+        //     img_height_f64,
+        //     p_grid,
+        //     p_scale,
+        //     img_scaled,
+        //     img_scale_source,
+        //     p_dest,
+        // });
+
+        return .{
+            .top_left = self.pin,
+            .offset_x = @intFromFloat(@round(p_dest.x_offset)),
+            .offset_y = @intFromFloat(@round(p_dest.y_offset)),
+            .source_x = @intFromFloat(@round(img_scale_source.x)),
+            .source_y = @intFromFloat(@round(img_scale_source.y)),
+            .source_width = @intFromFloat(@round(img_scale_source.width)),
+            .source_height = @intFromFloat(@round(img_scale_source.height)),
+            .dest_width = @intFromFloat(@round(p_dest.width)),
+            .dest_height = @intFromFloat(@round(p_dest.height)),
+        };
+    }
+
+    // Calculate the grid size for the placement. For virtual placements,
+    // we use the requested row/cols. If either isn't specified, we choose
+    // the best size based on the image size to fit the entire image in its
+    // original size.
+    //
+    // This part of the code does NOT do preserve any aspect ratios. Its
+    // dumbly fitting the image into the grid size -- possibly user specified.
+    fn grid(
+        self: *const Placement,
+        storage: *const ImageStorage,
+        image: *const Image,
+        cell_width: u32,
+        cell_height: u32,
+    ) !struct {
+        rows: u32,
+        columns: u32,
+    } {
+        // Get the placement. If an ID is specified we look for the exact one.
+        // If no ID, then we find the first virtual placement for this image.
+        const placement = if (self.placement_id > 0) storage.placements.get(.{
+            .image_id = self.image_id,
+            .placement_id = .{ .tag = .external, .id = self.placement_id },
+        }) orelse {
+            return Error.PlacementMissingPlacement;
+        } else placement: {
+            var it = storage.placements.iterator();
+            while (it.next()) |entry| {
+                if (entry.key_ptr.image_id == self.image_id and
+                    entry.value_ptr.location == .virtual)
+                {
+                    break :placement entry.value_ptr.*;
+                }
+            }
+
+            return Error.PlacementMissingPlacement;
+        };
+
+        // Use requested rows/columns if specified
+        // For unspecified rows/columns, calculate based on the image size.
+        var rows = placement.rows;
+        var columns = placement.columns;
+        if (rows == 0) rows = (image.height + cell_height - 1) / cell_height;
+        if (columns == 0) columns = (image.width + cell_width - 1) / cell_width;
+        return .{
+            .rows = std.math.cast(terminal.size.CellCountInt, rows) orelse
+                return Error.PlacementGridOutOfBounds,
+            .columns = std.math.cast(terminal.size.CellCountInt, columns) orelse
+                return Error.PlacementGridOutOfBounds,
+        };
+    }
+};
+
+/// IncompletePlacement is the placement information present in a single
+/// cell. It is "incomplete" because the specification allows for missing
+/// diacritics and so on that continue from previous valid placements.
+const IncompletePlacement = struct {
+    /// The pin of the cell that created this incomplete placement.
+    pin: terminal.Pin,
+
+    /// Lower 24 bits of the image ID. This is specified in the fg color
+    /// and is always required.
+    image_id_low: u24,
+
+    /// Higher 8 bits of the image ID specified using the 3rd diacritic.
+    /// This is optional.
+    image_id_high: ?u8 = null,
+
+    /// Placement ID is optionally specified in the underline color.
+    placement_id: ?u24 = null,
+
+    /// The row/col index for the image. These are 0-indexed. These
+    /// are specified using diacritics. The row is first and the col
+    /// is second. Both are optional. If not specified, they can continue
+    /// a previous placement under certain conditions.
+    row: ?u32 = null,
+    col: ?u32 = null,
+
+    /// The run width so far in cells.
+    width: u32 = 1,
+
+    /// Parse the incomplete placement information from a row and cell.
+    ///
+    /// The cell could be derived from the row but in our usage we already
+    /// have the cell and we don't want to waste cycles recomputing it.
+    pub fn init(
+        row: *const terminal.Pin,
+        cell: *const terminal.Cell,
+    ) IncompletePlacement {
+        assert(cell.codepoint() == placeholder);
+        const style = row.style(cell);
+
+        var result: IncompletePlacement = .{
+            .pin = row.*,
+            .image_id_low = colorToId(style.fg_color),
+            .placement_id = placement_id: {
+                const id = colorToId(style.underline_color);
+                break :placement_id if (id != 0) id else null;
+            },
+        };
+
+        // Try to decode all our diacritics. Any invalid diacritics are
+        // treated as if they don't exist. This isn't explicitly specified
+        // at the time of writing this but it appears to be how Kitty behaves.
+        const cps: []const u21 = row.grapheme(cell) orelse &.{};
+        if (cps.len > 0) {
+            result.row = getIndex(cps[0]) orelse value: {
+                log.warn("virtual placement with invalid row diacritic cp={X}", .{cps[0]});
+                break :value null;
+            };
+
+            if (cps.len > 1) {
+                result.col = getIndex(cps[1]) orelse value: {
+                    log.warn("virtual placement with invalid col diacritic cp={X}", .{cps[1]});
+                    break :value null;
+                };
+
+                if (cps.len > 2) {
+                    const high_ = getIndex(cps[2]) orelse value: {
+                        log.warn("virtual placement with invalid high diacritic cp={X}", .{cps[2]});
+                        break :value null;
+                    };
+
+                    if (high_) |high| {
+                        result.image_id_high = std.math.cast(
+                            u8,
+                            high,
+                        ) orelse value: {
+                            log.warn("virtual placement with invalid high diacritic cp={X} value={}", .{
+                                cps[2],
+                                high,
+                            });
+                            break :value null;
+                        };
+                    }
+
+                    // Any additional diacritics are ignored.
+                }
+            }
+        }
+
+        return result;
+    }
+
+    /// Append this incomplete placement to an existing placement to
+    /// create a run. This returns true if the placements are compatible
+    /// and were combined. If this returns false, the other placement is
+    /// unchanged.
+    pub fn append(self: *IncompletePlacement, other: *const IncompletePlacement) bool {
+        if (!self.canAppend(other)) return false;
+        self.width += 1;
+        return true;
+    }
+
+    fn canAppend(self: *const IncompletePlacement, other: *const IncompletePlacement) bool {
+        // Converted from Kitty's logic, don't @ me.
+        return self.image_id_low == other.image_id_low and
+            self.placement_id == other.placement_id and
+            (other.row == null or other.row == self.row) and
+            (other.col == null or other.col == self.col.? + self.width) and
+            (other.image_id_high == null or other.image_id_high == self.image_id_high);
+    }
+
+    /// Complete the incomplete placement to create a full placement.
+    /// This creates a new placement that isn't continuous with any previous
+    /// placements.
+    ///
+    /// The pin is the pin of the cell that created this incomplete placement.
+    pub fn complete(self: *const IncompletePlacement) Placement {
+        return .{
+            .pin = self.pin,
+            .image_id = image_id: {
+                const low: u32 = @intCast(self.image_id_low);
+                const high: u32 = @intCast(self.image_id_high orelse 0);
+                break :image_id low | (high << 24);
+            },
+
+            .placement_id = self.placement_id orelse 0,
+            .col = self.col orelse 0,
+            .row = self.row orelse 0,
+            .width = self.width,
+            .height = 1,
+        };
+    }
+
+    /// Convert a style color to a Kitty image protocol ID. This works by
+    /// taking the 24 most significant bits of the color, which lets it work
+    /// for both palette and rgb-based colors.
+    fn colorToId(c: terminal.Style.Color) u24 {
+        return switch (c) {
+            .none => 0,
+            .palette => |v| @intCast(v),
+            .rgb => |rgb| rgb: {
+                const r: u24 = @intCast(rgb.r);
+                const g: u24 = @intCast(rgb.g);
+                const b: u24 = @intCast(rgb.b);
+                break :rgb (r << 16) | (g << 8) | b;
+            },
+        };
+    }
+};
+
+/// Get the row/col index for a diacritic codepoint. These are 0-indexed.
+fn getIndex(cp: u21) ?u32 {
+    const idx = std.sort.binarySearch(u21, cp, diacritics, {}, (struct {
+        fn order(context: void, lhs: u21, rhs: u21) std.math.Order {
+            _ = context;
+            return std.math.order(lhs, rhs);
+        }
+    }).order) orelse return null;
+    return @intCast(idx);
+}
+
+/// These are the diacritics used with the Kitty graphics protocol
+/// Unicode placement feature to specify the row/column for placement.
+/// The index into the array determines the value.
+///
+/// This is derived from:
+/// https://sw.kovidgoyal.net/kitty/_downloads/f0a0de9ec8d9ff4456206db8e0814937/rowcolumn-diacritics.txt
+const diacritics: []const u21 = &.{
+    0x0305,
+    0x030D,
+    0x030E,
+    0x0310,
+    0x0312,
+    0x033D,
+    0x033E,
+    0x033F,
+    0x0346,
+    0x034A,
+    0x034B,
+    0x034C,
+    0x0350,
+    0x0351,
+    0x0352,
+    0x0357,
+    0x035B,
+    0x0363,
+    0x0364,
+    0x0365,
+    0x0366,
+    0x0367,
+    0x0368,
+    0x0369,
+    0x036A,
+    0x036B,
+    0x036C,
+    0x036D,
+    0x036E,
+    0x036F,
+    0x0483,
+    0x0484,
+    0x0485,
+    0x0486,
+    0x0487,
+    0x0592,
+    0x0593,
+    0x0594,
+    0x0595,
+    0x0597,
+    0x0598,
+    0x0599,
+    0x059C,
+    0x059D,
+    0x059E,
+    0x059F,
+    0x05A0,
+    0x05A1,
+    0x05A8,
+    0x05A9,
+    0x05AB,
+    0x05AC,
+    0x05AF,
+    0x05C4,
+    0x0610,
+    0x0611,
+    0x0612,
+    0x0613,
+    0x0614,
+    0x0615,
+    0x0616,
+    0x0617,
+    0x0657,
+    0x0658,
+    0x0659,
+    0x065A,
+    0x065B,
+    0x065D,
+    0x065E,
+    0x06D6,
+    0x06D7,
+    0x06D8,
+    0x06D9,
+    0x06DA,
+    0x06DB,
+    0x06DC,
+    0x06DF,
+    0x06E0,
+    0x06E1,
+    0x06E2,
+    0x06E4,
+    0x06E7,
+    0x06E8,
+    0x06EB,
+    0x06EC,
+    0x0730,
+    0x0732,
+    0x0733,
+    0x0735,
+    0x0736,
+    0x073A,
+    0x073D,
+    0x073F,
+    0x0740,
+    0x0741,
+    0x0743,
+    0x0745,
+    0x0747,
+    0x0749,
+    0x074A,
+    0x07EB,
+    0x07EC,
+    0x07ED,
+    0x07EE,
+    0x07EF,
+    0x07F0,
+    0x07F1,
+    0x07F3,
+    0x0816,
+    0x0817,
+    0x0818,
+    0x0819,
+    0x081B,
+    0x081C,
+    0x081D,
+    0x081E,
+    0x081F,
+    0x0820,
+    0x0821,
+    0x0822,
+    0x0823,
+    0x0825,
+    0x0826,
+    0x0827,
+    0x0829,
+    0x082A,
+    0x082B,
+    0x082C,
+    0x082D,
+    0x0951,
+    0x0953,
+    0x0954,
+    0x0F82,
+    0x0F83,
+    0x0F86,
+    0x0F87,
+    0x135D,
+    0x135E,
+    0x135F,
+    0x17DD,
+    0x193A,
+    0x1A17,
+    0x1A75,
+    0x1A76,
+    0x1A77,
+    0x1A78,
+    0x1A79,
+    0x1A7A,
+    0x1A7B,
+    0x1A7C,
+    0x1B6B,
+    0x1B6D,
+    0x1B6E,
+    0x1B6F,
+    0x1B70,
+    0x1B71,
+    0x1B72,
+    0x1B73,
+    0x1CD0,
+    0x1CD1,
+    0x1CD2,
+    0x1CDA,
+    0x1CDB,
+    0x1CE0,
+    0x1DC0,
+    0x1DC1,
+    0x1DC3,
+    0x1DC4,
+    0x1DC5,
+    0x1DC6,
+    0x1DC7,
+    0x1DC8,
+    0x1DC9,
+    0x1DCB,
+    0x1DCC,
+    0x1DD1,
+    0x1DD2,
+    0x1DD3,
+    0x1DD4,
+    0x1DD5,
+    0x1DD6,
+    0x1DD7,
+    0x1DD8,
+    0x1DD9,
+    0x1DDA,
+    0x1DDB,
+    0x1DDC,
+    0x1DDD,
+    0x1DDE,
+    0x1DDF,
+    0x1DE0,
+    0x1DE1,
+    0x1DE2,
+    0x1DE3,
+    0x1DE4,
+    0x1DE5,
+    0x1DE6,
+    0x1DFE,
+    0x20D0,
+    0x20D1,
+    0x20D4,
+    0x20D5,
+    0x20D6,
+    0x20D7,
+    0x20DB,
+    0x20DC,
+    0x20E1,
+    0x20E7,
+    0x20E9,
+    0x20F0,
+    0x2CEF,
+    0x2CF0,
+    0x2CF1,
+    0x2DE0,
+    0x2DE1,
+    0x2DE2,
+    0x2DE3,
+    0x2DE4,
+    0x2DE5,
+    0x2DE6,
+    0x2DE7,
+    0x2DE8,
+    0x2DE9,
+    0x2DEA,
+    0x2DEB,
+    0x2DEC,
+    0x2DED,
+    0x2DEE,
+    0x2DEF,
+    0x2DF0,
+    0x2DF1,
+    0x2DF2,
+    0x2DF3,
+    0x2DF4,
+    0x2DF5,
+    0x2DF6,
+    0x2DF7,
+    0x2DF8,
+    0x2DF9,
+    0x2DFA,
+    0x2DFB,
+    0x2DFC,
+    0x2DFD,
+    0x2DFE,
+    0x2DFF,
+    0xA66F,
+    0xA67C,
+    0xA67D,
+    0xA6F0,
+    0xA6F1,
+    0xA8E0,
+    0xA8E1,
+    0xA8E2,
+    0xA8E3,
+    0xA8E4,
+    0xA8E5,
+    0xA8E6,
+    0xA8E7,
+    0xA8E8,
+    0xA8E9,
+    0xA8EA,
+    0xA8EB,
+    0xA8EC,
+    0xA8ED,
+    0xA8EE,
+    0xA8EF,
+    0xA8F0,
+    0xA8F1,
+    0xAAB0,
+    0xAAB2,
+    0xAAB3,
+    0xAAB7,
+    0xAAB8,
+    0xAABE,
+    0xAABF,
+    0xAAC1,
+    0xFE20,
+    0xFE21,
+    0xFE22,
+    0xFE23,
+    0xFE24,
+    0xFE25,
+    0xFE26,
+    0x10A0F,
+    0x10A38,
+    0x1D185,
+    0x1D186,
+    0x1D187,
+    0x1D188,
+    0x1D189,
+    0x1D1AA,
+    0x1D1AB,
+    0x1D1AC,
+    0x1D1AD,
+    0x1D242,
+    0x1D243,
+    0x1D244,
+};
+
+test "unicode diacritic sorted" {
+    // diacritics must be sorted since we use a binary search.
+    try testing.expect(std.sort.isSorted(u21, diacritics, {}, (struct {
+        fn lessThan(context: void, lhs: u21, rhs: u21) bool {
+            _ = context;
+            return lhs < rhs;
+        }
+    }).lessThan));
+}
+
+test "unicode diacritic" {
+    // Some spot checks based on Kitty behavior
+    try testing.expectEqual(30, getIndex(0x483).?);
+    try testing.expectEqual(294, getIndex(0x1d242).?);
+}
+
+test "unicode placement: none" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 5 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Single cell
+    try t.printString("hello\nworld\n1\n2");
+
+    // No placements
+    const pin = t.screen.pages.getTopLeft(.viewport);
+    var it = placementIterator(pin, null);
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: single row/col" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 5 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Single cell
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(0, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: continuation break" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 10 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Two runs because it jumps cols
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}");
+    try t.printString("\u{10EEEE}\u{0305}\u{030E}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(0, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+        try testing.expectEqual(1, p.width);
+    }
+    {
+        const p = it.next().?;
+        try testing.expectEqual(0, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(2, p.col);
+        try testing.expectEqual(1, p.width);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: continuation with diacritics set" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 10 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Three cells. They'll continue even though they're explicit
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}");
+    try t.printString("\u{10EEEE}\u{0305}\u{030D}");
+    try t.printString("\u{10EEEE}\u{0305}\u{030E}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(0, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+        try testing.expectEqual(3, p.width);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: continuation with no col" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 10 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Three cells. They'll continue even though they're explicit
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}");
+    try t.printString("\u{10EEEE}\u{0305}");
+    try t.printString("\u{10EEEE}\u{0305}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(0, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+        try testing.expectEqual(3, p.width);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: continuation with no diacritics" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 10 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Three cells. They'll continue even though they're explicit
+    try t.printString("\u{10EEEE}");
+    try t.printString("\u{10EEEE}");
+    try t.printString("\u{10EEEE}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(0, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+        try testing.expectEqual(3, p.width);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: run ending" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 10 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Three cells. They'll continue even though they're explicit
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}");
+    try t.printString("\u{10EEEE}\u{0305}\u{030D}");
+    try t.printString("ABC");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(0, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+        try testing.expectEqual(2, p.width);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: run starting in the middle" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 10 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Three cells. They'll continue even though they're explicit
+    try t.printString("ABC");
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}");
+    try t.printString("\u{10EEEE}\u{0305}\u{030D}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(0, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+        try testing.expectEqual(2, p.width);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: specifying image id as palette" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 5 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Single cell
+    try t.setAttribute(.{ .@"256_fg" = 42 });
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(42, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: specifying image id with high bits" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 5 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Single cell
+    try t.setAttribute(.{ .@"256_fg" = 42 });
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}\u{030E}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(33554474, p.image_id);
+        try testing.expectEqual(0, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+    }
+    try testing.expect(it.next() == null);
+}
+
+test "unicode placement: specifying placement id as palette" {
+    const alloc = testing.allocator;
+    var t = try terminal.Terminal.init(alloc, .{ .rows = 5, .cols = 5 });
+    defer t.deinit(alloc);
+    t.modes.set(.grapheme_cluster, true);
+
+    // Single cell
+    try t.setAttribute(.{ .@"256_fg" = 42 });
+    try t.setAttribute(.{ .@"256_underline_color" = 21 });
+    try t.printString("\u{10EEEE}\u{0305}\u{0305}");
+
+    // Get our top left pin
+    const pin = t.screen.pages.getTopLeft(.viewport);
+
+    // Should have exactly one placement
+    var it = placementIterator(pin, null);
+    {
+        const p = it.next().?;
+        try testing.expectEqual(42, p.image_id);
+        try testing.expectEqual(21, p.placement_id);
+        try testing.expectEqual(0, p.row);
+        try testing.expectEqual(0, p.col);
+    }
+    try testing.expect(it.next() == null);
+}
+
+// Fish:
+// printf "\033_Gf=100,i=1,t=f,q=2;$(printf dog.png | base64)\033\\"
+// printf "\e[38;5;1m\U10EEEE\U0305\U0305\U10EEEE\U0305\U030D\U10EEEE\U0305\U030E\U10EEEE\U0305\U0310\e[39m\n"
+// printf "\e[38;5;1m\U10EEEE\U030D\U0305\U10EEEE\U030D\U030D\U10EEEE\U030D\U030E\U10EEEE\U030D\U0310\e[39m\n"
+// printf "\033_Ga=p,i=1,U=1,q=2,c=4,r=2\033\\"
+test "unicode render placement: dog 4x2" {
+    const alloc = testing.allocator;
+    const cell_width = 36;
+    const cell_height = 80;
+
+    var t = try terminal.Terminal.init(alloc, .{ .cols = 100, .rows = 100 });
+    defer t.deinit(alloc);
+    var s: ImageStorage = .{};
+    defer s.deinit(alloc, &t.screen);
+
+    const image: Image = .{ .id = 1, .width = 500, .height = 306 };
+    try s.addImage(alloc, image);
+    try s.addPlacement(alloc, 1, 0, .{
+        .location = .{ .virtual = {} },
+        .columns = 4,
+        .rows = 2,
+    });
+
+    // Row 1
+    {
+        const p: Placement = .{
+            .pin = t.screen.cursor.page_pin.*,
+            .image_id = 1,
+            .placement_id = 0,
+            .col = 0,
+            .row = 0,
+            .width = 4,
+            .height = 1,
+        };
+        const rp = try p.renderPlacement(&s, &image, cell_width, cell_height);
+        try testing.expectEqual(0, rp.offset_x);
+        try testing.expectEqual(36, rp.offset_y);
+        try testing.expectEqual(0, rp.source_x);
+        try testing.expectEqual(0, rp.source_y);
+        try testing.expectEqual(500, rp.source_width);
+        try testing.expectEqual(153, rp.source_height);
+        try testing.expectEqual(144, rp.dest_width);
+        try testing.expectEqual(44, rp.dest_height);
+    }
+    // Row 2
+    {
+        const p: Placement = .{
+            .pin = t.screen.cursor.page_pin.*,
+            .image_id = 1,
+            .placement_id = 0,
+            .col = 0,
+            .row = 1,
+            .width = 4,
+            .height = 1,
+        };
+        const rp = try p.renderPlacement(&s, &image, cell_width, cell_height);
+        try testing.expectEqual(0, rp.offset_x);
+        try testing.expectEqual(0, rp.offset_y);
+        try testing.expectEqual(0, rp.source_x);
+        try testing.expectEqual(153, rp.source_y);
+        try testing.expectEqual(500, rp.source_width);
+        try testing.expectEqual(153, rp.source_height);
+        try testing.expectEqual(144, rp.dest_width);
+        try testing.expectEqual(44, rp.dest_height);
+    }
+}
+
+// Fish:
+// printf "\033_Gf=100,i=1,t=f,q=2;$(printf dog.png | base64)\033\\"
+// printf "\e[38;5;1m\U10EEEE\U0305\U0305\U10EEEE\U0305\U030D\U10EEEE\U0305\U030E\U10EEEE\U0305\U0310\e[39m\n"
+// printf "\e[38;5;1m\U10EEEE\U030D\U0305\U10EEEE\U030D\U030D\U10EEEE\U030D\U030E\U10EEEE\U030D\U0310\e[39m\n"
+// printf "\033_Ga=p,i=1,U=1,q=2,c=2,r=2\033\\"
+test "unicode render placement: dog 2x2 with blank cells" {
+    const alloc = testing.allocator;
+    const cell_width = 36;
+    const cell_height = 80;
+
+    var t = try terminal.Terminal.init(alloc, .{ .cols = 100, .rows = 100 });
+    defer t.deinit(alloc);
+    var s: ImageStorage = .{};
+    defer s.deinit(alloc, &t.screen);
+
+    const image: Image = .{ .id = 1, .width = 500, .height = 306 };
+    try s.addImage(alloc, image);
+    try s.addPlacement(alloc, 1, 0, .{
+        .location = .{ .virtual = {} },
+        .columns = 2,
+        .rows = 2,
+    });
+
+    // Row 1
+    {
+        const p: Placement = .{
+            .pin = t.screen.cursor.page_pin.*,
+            .image_id = 1,
+            .placement_id = 0,
+            .col = 0,
+            .row = 0,
+            .width = 4,
+            .height = 1,
+        };
+        const rp = try p.renderPlacement(&s, &image, cell_width, cell_height);
+        try testing.expectEqual(0, rp.offset_x);
+        try testing.expectEqual(58, rp.offset_y);
+        try testing.expectEqual(0, rp.source_x);
+        try testing.expectEqual(0, rp.source_y);
+        try testing.expectEqual(500, rp.source_width);
+        try testing.expectEqual(153, rp.source_height);
+        try testing.expectEqual(72, rp.dest_width);
+        try testing.expectEqual(22, rp.dest_height);
+    }
+    // Row 2
+    {
+        const p: Placement = .{
+            .pin = t.screen.cursor.page_pin.*,
+            .image_id = 1,
+            .placement_id = 0,
+            .col = 0,
+            .row = 1,
+            .width = 4,
+            .height = 1,
+        };
+        const rp = try p.renderPlacement(&s, &image, cell_width, cell_height);
+        try testing.expectEqual(0, rp.offset_x);
+        try testing.expectEqual(0, rp.offset_y);
+        try testing.expectEqual(0, rp.source_x);
+        try testing.expectEqual(153, rp.source_y);
+        try testing.expectEqual(500, rp.source_width);
+        try testing.expectEqual(153, rp.source_height);
+        try testing.expectEqual(72, rp.dest_width);
+        try testing.expectEqual(22, rp.dest_height);
+    }
+}
+
+// Fish:
+// printf "\033_Gf=100,i=1,t=f,q=2;$(printf dog.png | base64)\033\\"
+// printf "\e[38;5;1m\U10EEEE\U0305\U0305\U10EEEE\U0305\U030D\U10EEEE\U0305\U030E\U10EEEE\U0305\U0310\e[39m\n"
+// printf "\033_Ga=p,i=1,U=1,q=2,c=1,r=1\033\\"
+test "unicode render placement: dog 1x1" {
+    const alloc = testing.allocator;
+    const cell_width = 36;
+    const cell_height = 80;
+
+    var t = try terminal.Terminal.init(alloc, .{ .cols = 100, .rows = 100 });
+    defer t.deinit(alloc);
+    var s: ImageStorage = .{};
+    defer s.deinit(alloc, &t.screen);
+
+    const image: Image = .{ .id = 1, .width = 500, .height = 306 };
+    try s.addImage(alloc, image);
+    try s.addPlacement(alloc, 1, 0, .{
+        .location = .{ .virtual = {} },
+        .columns = 1,
+        .rows = 1,
+    });
+
+    // Row 1
+    {
+        const p: Placement = .{
+            .pin = t.screen.cursor.page_pin.*,
+            .image_id = 1,
+            .placement_id = 0,
+            .col = 0,
+            .row = 0,
+            .width = 4,
+            .height = 1,
+        };
+        const rp = try p.renderPlacement(&s, &image, cell_width, cell_height);
+        try testing.expectEqual(0, rp.offset_x);
+        try testing.expectEqual(29, rp.offset_y);
+        try testing.expectEqual(0, rp.source_x);
+        try testing.expectEqual(0, rp.source_y);
+        try testing.expectEqual(500, rp.source_width);
+        try testing.expectEqual(306, rp.source_height);
+        try testing.expectEqual(36, rp.dest_width);
+        try testing.expectEqual(22, rp.dest_height);
+    }
+}
diff --git a/src/terminal/kitty/testdata/dog.png b/src/terminal/kitty/testdata/dog.png
new file mode 100644
index 000000000..a5749c232
Binary files /dev/null and b/src/terminal/kitty/testdata/dog.png differ
diff --git a/src/terminal/page.zig b/src/terminal/page.zig
index 677e3fb4a..b396493fe 100644
--- a/src/terminal/page.zig
+++ b/src/terminal/page.zig
@@ -8,6 +8,7 @@ const posix = std.posix;
 const fastmem = @import("../fastmem.zig");
 const color = @import("color.zig");
 const hyperlink = @import("hyperlink.zig");
+const kitty = @import("kitty.zig");
 const sgr = @import("sgr.zig");
 const style = @import("style.zig");
 const size = @import("size.zig");
@@ -825,6 +826,9 @@ pub const Page = struct {
                         src_cell.style_id,
                     ) orelse src_cell.style_id;
                 }
+                if (src_cell.codepoint() == kitty.graphics.unicode.placeholder) {
+                    dst_row.kitty_virtual_placeholder = true;
+                }
             }
         }
 
@@ -912,6 +916,9 @@ pub const Page = struct {
                     dst.hyperlink = true;
                     dst_row.hyperlink = true;
                 }
+                if (src.codepoint() == kitty.graphics.unicode.placeholder) {
+                    dst_row.kitty_virtual_placeholder = true;
+                }
             }
         }
 
@@ -931,6 +938,7 @@ pub const Page = struct {
             src_row.grapheme = false;
             src_row.hyperlink = false;
             src_row.styled = false;
+            src_row.kitty_virtual_placeholder = false;
         }
     }
 
@@ -1028,6 +1036,16 @@ pub const Page = struct {
             if (cells.len == self.size.cols) row.styled = false;
         }
 
+        if (row.kitty_virtual_placeholder and
+            cells.len == self.size.cols)
+        {
+            for (cells) |c| {
+                if (c.codepoint() == kitty.graphics.unicode.placeholder) {
+                    break;
+                }
+            } else row.kitty_virtual_placeholder = false;
+        }
+
         // Zero the cells as u64s since empirically this seems
         // to be a bit faster than using @memset(cells, .{})
         @memset(@as([]u64, @ptrCast(cells)), 0);
@@ -1134,7 +1152,7 @@ pub const Page = struct {
     pub fn setGraphemes(self: *Page, row: *Row, cell: *Cell, cps: []u21) Allocator.Error!void {
         defer self.assertIntegrity();
 
-        assert(cell.hasText());
+        assert(cell.codepoint() > 0);
         assert(cell.content_tag == .codepoint);
 
         const cell_offset = getOffset(Cell, self.memory, cell);
@@ -1160,7 +1178,7 @@ pub const Page = struct {
     pub fn appendGrapheme(self: *Page, row: *Row, cell: *Cell, cp: u21) Allocator.Error!void {
         defer self.assertIntegrity();
 
-        if (comptime std.debug.runtime_safety) assert(cell.hasText());
+        if (comptime std.debug.runtime_safety) assert(cell.codepoint() != 0);
 
         const cell_offset = getOffset(Cell, self.memory, cell);
         var map = self.grapheme_map.map(self.memory);
@@ -1219,7 +1237,7 @@ pub const Page = struct {
     /// Returns the codepoints for the given cell. These are the codepoints
     /// in addition to the first codepoint. The first codepoint is NOT
     /// included since it is on the cell itself.
-    pub fn lookupGrapheme(self: *const Page, cell: *Cell) ?[]u21 {
+    pub fn lookupGrapheme(self: *const Page, cell: *const Cell) ?[]u21 {
         const cell_offset = getOffset(Cell, self.memory, cell);
         const map = self.grapheme_map.map(self.memory);
         const slice = map.get(cell_offset) orelse return null;
@@ -1551,7 +1569,11 @@ pub const Row = packed struct(u64) {
     /// running program, or "unknown" if it was never set.
     semantic_prompt: SemanticPrompt = .unknown,
 
-    _padding: u24 = 0,
+    /// True if this row contains a virtual placeholder for the Kitty
+    /// graphics protocol. (U+10EEEE)
+    kitty_virtual_placeholder: bool = false,
+
+    _padding: u23 = 0,
 
     /// Semantic prompt type.
     pub const SemanticPrompt = enum(u3) {
@@ -1673,6 +1695,12 @@ pub const Cell = packed struct(u64) {
         return @as(u64, @bitCast(self)) == 0;
     }
 
+    /// Returns true if this cell represents a cell with text to render.
+    ///
+    /// Cases this returns false:
+    ///   - Cell text is blank
+    ///   - Cell is styled but only with a background color and no text
+    ///   - Cell has a unicode placeholder for Kitty graphics protocol
     pub fn hasText(self: Cell) bool {
         return switch (self.content_tag) {
             .codepoint,