LightweightWhiteboard:Images

You can put images onto the board, for example a screenshot to mark up. An inserted image first floats above the board. You can move and resize it until you place it. Once placed, it is part of the board pixels.

Supported formats

PNG, JPEG (.jpg, .jpeg), GIF, BMP, WebP, SVG, ICO, AVIF and .whiteboard files. An animated GIF is inserted as a still image.

Files and web images that the extension reads for the board may be at most 50 MB.

Inserting an image

File dialog

Click Insert image... in the toolbar. A file dialog opens. You can select several files at once. The images appear in the middle of the visible part of the board.

Drag and drop

Drag an image onto the board. It appears centered on the drop point. If you drop several files, each further image is shifted by 24 pixels so they do not cover each other completely.

You can drop:

• files from the desktop or your file manager
• files from the VS Code Explorer
• images or image links from a web browser. The extension downloads the image. The server must send it with an image content type.

VS Code only passes a drop to the board while you hold Shift. The hint in the status bar reminds you of this. While you drag over the board it is highlighted as a drop target.

Paste

Copy an image file or a screenshot to the clipboard and press Ctrl+V on the board. The image appears in the middle of the visible part of the board. If the clipboard holds several image files, only the first one is inserted.

Size of a new image

• An image that is larger than 90 % of the board width or height is scaled down to fit. Smaller images keep their size. Images are never enlarged.
• An SVG without its own size is inserted at 300 × 300 pixels.
• The image is moved so that it starts inside the board.

Moving and resizing

While the image floats, it has a dashed outline and a handle in each corner. The status bar shows a hint.

Action	How
Move	Drag the image.
Resize	Drag a corner handle. The aspect ratio is kept.
Resize freely	Hold Shift while you drag a corner handle.
Place	Press Enter, click on the board next to the image, or choose another tool.
Discard	Press Esc, Delete or Backspace.

The smallest size is 4 × 4 pixels. Parts of the image that are moved outside the board are cut off when you place it.

A floating image is also placed when you insert another image, clear the board, undo or redo. Undo right after inserting places the image and takes it back in one step.

Panning with the middle mouse button or Space + drag also works while the pointer is over the image. See Zoom and Pan.

Saving with a floating image

If you save while an image still floats, the saved file contains the image at its current position. On the board it keeps floating, so you can still move it.

Errors

If an image cannot be inserted, a message appears at the top of the board and disappears after a few seconds. You can also close it with its × button. Typical messages:

Message	Cause
This is not an image that can be inserted.	The file or the dropped data could not be decoded as an image, or the drop contained no image at all.
Not a supported image: <name>	A file from the Explorer or the file dialog has an extension that is not in the list above.
Not an image: <address>	A web address did not return an image.
Image is too large: <name>	The file or download is larger than 50 MB.