How to add text to an image with editable layers
Open your image, select the Text tool and place your wording on the canvas. Keep text separate from the photograph while you work. Export the finished image and save a JSON project if you want to change the text later.
Prepare the image before writing
Crop and resize the image before you finalize the text layout. A headline that fits a wide banner may not fit a square post. Decide which version you are making and choose a part of the photograph with enough visual space for words. Leave a margin around the text so it does not touch the edge or compete with the product.
Add text in miniPaint
- Open your photo. Use File → Open → Open File. You can also drag an image into the editor.
- Select the Text tool. Look for the text icon in the toolbar. Click on the canvas to begin adding text and use the text controls to enter and format it.
- Set a readable size and color. Start with a short phrase and a common system font. Check the result at the size people will actually see, rather than only when the canvas is enlarged.
- Keep the text on its own layer. Use the Layers panel to select and arrange elements. Put the text above the image. Avoid flattening the composition until you are happy with it.
- Position and review. Move the text away from busy details. Zoom out and confirm the words are still readable. Undo a change if the result becomes less clear.
- Export and save a project. File → Export produces an image for sharing. File → Save As produces the JSON project that preserves editable layers.
Make the words easier to read
Start with contrast: dark text on a light area, or light text on a dark area. A colorful photograph can make part of a sentence disappear even when another part is clear. A simple solid shape behind the words can help, provided it sits below the text in the layer order. Use fewer words before making the font smaller.
When preparing a product image, keep important specifications accurate and avoid covering the product. For information that users must be able to search, select or hear through a screen reader, repeat the essential wording as real HTML on the destination page. Text drawn into an image does not replace accessible page content.
Fonts and browser differences
System fonts depend on the device. A font that exists on your computer may not exist on a colleague’s phone. Optional web-font features may request a font from an external provider; see the privacy explanation. If layout consistency matters, inspect the exported image rather than assuming an editable project will render identically on every device.
Why save two files?
A PNG, JPG or WebP export is a rendered image. Its words are pixels rather than separately editable text layers. The JSON project keeps the editing structure used by miniPaint. Download both when you want a finished graphic today and a version you can revise tomorrow. Do not assume closing and reopening the tab will restore unsaved work.
For a clean result, check spelling, contrast, margins and the exported size. If the image is still too large, follow the resizing guide and review the text again after resizing.
Try it in the editor ↗