Upload an image
In the article editor, click the image icon in the toolbar (or drag and drop an image file onto the editor). You can also paste an image URL directly. Once uploaded, the image is stored on Yaplet's CDN and referenced in the article body.
Supported formats: JPEG, PNG, GIF, WebP, SVG.
How images are displayed
Images appear inline in the article body at the position you insert them. When a visitor clicks an image, it opens full-size in a lightbox overlay — a dark backdrop with the image centred and a close button. This lets you keep images small in the article flow while still making full-resolution versions accessible.
Image sizing
After inserting an image you can set its width and height in pixels. A few guidelines:
- Use the image's native pixel size, or cap it at 800 px wide for screenshots — wider images push the article layout on narrow screens.
- Always set both width and height so the browser can reserve the correct space before the image loads (avoids layout shift).
- For small UI screenshots that need to be readable, 600–800 px wide is a good default.
Alt text and accessibility
When inserting an image you can add alt text — a short description of the image content. Alt text is read aloud by screen readers and shown when the image fails to load. Write it as a plain sentence describing what the image shows: "Widget settings panel with the Knowledge Base tab selected", not just "screenshot".
Tips for screenshots
- Crop tightly — show only the part of the screen the step refers to. A full-browser screenshot rarely adds value.
- Add a border for white-background screenshots — a 1 px light-grey border prevents a screenshot from blending invisibly into the page background.
- Annotate before uploading — use a tool like CleanShot X, Snagit, or macOS Preview to add arrows and numbered callouts before uploading. The KB editor does not have built-in annotation tools.
- Keep file sizes reasonable — compress PNGs with a tool like TinyPNG before uploading. Large images slow down article load time in the widget.