Annotating images

Crop real screenshots and add red boxes, numbers, text and blur (with an AI draft)

Mark up the screen you captured, then insert it

In a how-to article, a red box and a number saying "click here" on the screenshot is often all a reader needs to stop getting lost. In Sorabun (Pro and Cloud editions), you can annotate an image right from the image block in the block editor. There is no need to open an image editor.

1. In the post editor, select an image block (only images in the Media Library can be used)
2. Press "Annotate" in the block toolbar
3. In the window that opens, crop, mark, add text and blur
4. Press "Save and replace"

When you save, the annotated image is added to the Media Library as a new image, and the image block is switched to it. The original image stays in the Media Library, so you can always start over. The alternative text (alt) is carried over.

Tools

• Colors: red, yellow, blue and black. Select a shape first, then press a color to change it
• Undo (Ctrl+Z), redo (Ctrl+Shift+Z) and delete (Delete) are available
• Line width and the size of numbers and text are set automatically from the image size
• Lines get a white edge so they stay visible on both dark and light screens

Drafting with AI

Press "Draft with AI" in the side panel and the AI reads the image and places:

• A red box and number on what to click, chosen from what you wrote in "What to mark"
• A crop area that keeps the marked element and enough of its surroundings to recognize where it is (widened so marks and numbers are not cut off)
• Blur over personal information: email addresses, people's names, phone numbers, postal addresses, API keys and passwords, account numbers, card numbers, people's faces and license plates

If a screenshot slot (a box such as "Shot slot: [PC] the list screen. Include the 'Create' button at the top right") sits right before the image block, its text is filled into "What to mark" for you. See the "Automatic Screenshot Citations" chapter for screenshot slots.

The AI draft needs a Gemini API key ("Settings > API keys"). The Cloud edition needs no key.

Removing the screenshot slot

When a screenshot slot sits before the image block, "Remove the screenshot slot" appears next to the save button (on by default). The slot is removed together with the save, so you won't forget to delete it after replacing the image. If the same block contains other text, only the slot is removed.

Choosing a blur style

• Mosaic: when you want to keep the look of the surroundings. The cells are never finer than a third of the short side of the area (fine mosaics can sometimes be reversed for text in a known font)
• Solid fill: for API keys, passwords, card numbers and anything that must not be even partly readable

Blur is burned into the saved image and cannot be removed later (the original stays in the Media Library). Also check whether the original image is already used in a published post.

Format of the saved image

• JPEG photos are saved as JPEG; everything else (PNG, WebP, GIF) is saved as PNG
• When cropped, the image is saved at the cropped size
• Text is burned in with the Japanese fonts of the browser you are editing in. No fonts or image tools need to be added to your server

Where the image is sent

• All annotation work (cropping, shapes, text, blur) happens in your browser. The image is not sent anywhere
• Only when you press "Draft with AI" are the image (resized to 1600 px on the long side) and your instruction sent to Google Gemini. With your own key it goes under your contract; the Cloud edition goes through the Sorabun relay, which does not store images

Troubleshooting