How to host images for AI character cards and Markdown

An image host stores the picture; an image URL tells the app where to fetch it; the app decides how to display it. Getting all three right matters more than finding a clever formatting trick.

This guide shows a portable workflow for original character artwork and scene illustrations. Markdown support differs between apps and between fields in the same app. It is not an assurance that every EchoMelon text field accepts an inline image. Use a dedicated image uploader when the interface provides one.

Choose where the picture belongs

First decide its job:

Job	Start here
Character portrait or cover	The app's portrait or cover uploader
Scene illustration inside a description	A supported rich-text or Markdown field
Chat background	A dedicated background setting, if available
Reference for the model	The app's documented image-input feature

These jobs are separate. A picture appearing on screen does not prove the model can see it, describe it or remember it. A portrait upload also does not necessarily give you a reusable public hosting URL.

For a lighthouse mystery, a portrait introduces the archivist, a map illustrates the harbor, and a background establishes the room. Uploading the same large map into every field adds clutter without giving the player another useful fact.

Prepare an image you can publish

Use artwork you created or have permission to share. Keep a local original, and make a smaller web copy suitable for its role. A map needs readable labels; a portrait needs a recognizable subject at thumbnail size. Remove personal location metadata when relevant.

Use a plain filename such as lighthouse-map-v1.jpg. Prefer common formats accepted by the destination. Changing a filename from .png to .jpg does not convert the image; export it properly. If the app rejects the file, check its displayed size and format limits before repeatedly uploading it.

Avoid putting API keys, account tokens or private information in a filename or URL. Publicly viewable artwork can be copied even when the surrounding character is shared with a smaller audience.

Upload, then obtain an image URL

When your app has an uploader, select the file, inspect the preview, finish the form's save step, then reopen the saved character or setting. A local preview alone does not establish that an upload was saved.

When you need an external host, choose one that supports stable HTTPS image delivery and permits the intended use. Check its current storage limits, retention rules and embedding policy. “Free” does not tell you whether an anonymous upload will remain available next year.

Copy the host's direct image URL, rather than a gallery, editing or file-management page. The exact button name varies. A direct URL should return the image itself to a viewer who is allowed to load it. A .jpg ending is a helpful clue, not proof; valid image URLs can have other paths.

Test it in a separate logged-out or private browser window. If that window asks you to sign in, displays a management dashboard or shows an expired-link error, other readers may not be able to load the image. Do not make an entire private folder or repository public just to fix one embed. Choose an appropriate image-sharing option instead.

Add the image where Markdown is supported

The standard image pattern is documented in the Markdown Guide:

![Description of the picture](https://example.com/your-image.jpg)

Replace the placeholder with your tested URL. For the fictional lighthouse scene:

![A harbor map showing the lighthouse north of the ferry dock](https://example.com/your-map.jpg)

These example.com addresses are placeholders, not working image links. Replace them with your own tested addresses. Keep the description useful: identify what the player needs from the image. Put essential clues in ordinary text as well, so a failed image does not make the scene impossible to play.

Preview the exact field where you intend to use it. Then save and reopen that field. If the syntax appears literally, that field may not support Markdown. If only an image icon or alt text appears, investigate delivery and rendering separately.

On EchoMelon, some character image fields use dedicated uploads, while text display paths have their own formatting behavior. We have not validated this Markdown template across all live text fields. Follow the visible upload controls for artwork and test any inline format before relying on it in a published story.

Diagnose a broken image

What you see	What to check next
Login or gallery page	Copy the direct image address rather than the viewer-page address
Works only in your browser	Check whether your login or an expiring share link is required
URL opens an image, embed fails	Check the host's embedding rules and the app's supported formats
Literal ![...] text	Check whether that field renders Markdown
Wrong or stretched crop	Use the destination's preview and prepare a suitable aspect ratio
Old picture after replacement	Confirm the saved URL; allow for caching before changing more settings

Change one thing at a time. Keep the original file and a small list of where you used it. If you move hosts, update those references and check the saved pages again; replacing one URL does not update other copies automatically.

Keep the story usable without the picture

A good character introduction still communicates identity, motivation and the first playable situation in text. Artwork can reinforce those details, but it should not carry the only copy of a name, clue or relationship rule.

Write the scene first, add one image with a clear purpose, then review the saved result on both a narrow and a wide screen. That gives you a smaller, easier-to-maintain character page than a wall of decorative embeds.

For an example of the information to inspect before playing, see our EchoMelon story preview guide.

Before decorating a page, make its character description and motivation clear. A plain-text status panel can record changing clues without making them depend on a picture loading.