Adding a visual element to a Janitor AI character’s first message transforms a standard text-based greeting into an immersive roleplay experience. Since Janitor AI does not provide a native "upload" button within the text editor for messages, creators must use either Markdown syntax or basic HTML tags to display images. This process relies on hosting an image elsewhere and referencing its direct URL within the character's definition.

Quick Answer: The Code for Inserting Images

For those who need the code immediately, here are the two primary methods to display an image in a Janitor AI first message:

Method 1: Markdown (Recommended for simplicity) ![Image Description](Direct_Image_URL_HERE)

Method 2: HTML (Recommended for size control) <img src="Direct_Image_URL_HERE" width="100%">

In both cases, you must replace Direct_Image_URL_HERE with a link that ends in a file extension such as .jpg, .png, .gif, or .webp.

Markdown vs HTML: Choosing the Best Method for Your Bot

Understanding the difference between Markdown and HTML is essential for fine-tuning how a character presents themselves. Janitor AI’s interface is built to render both, but they serve different creative needs.

Using Markdown for Seamless Integration

Markdown is the standard formatting language for many AI platforms. Its syntax is lightweight and easy to remember. The primary advantage of Markdown is that it usually scales the image automatically to fit the width of the chat window. This is ideal for creators who want a "set it and forget it" solution that works well across both desktop and mobile devices.

However, Markdown lacks precision. You cannot easily define the exact pixel width or height of an image. If the source file is massive, it might appear overwhelming in the chat history.

Using HTML for Precise Layout Control

HTML provides significantly more power. By using the <img> tag, creators can specify attributes that Markdown cannot touch. For instance, setting width="300" ensures the image remains a consistent size regardless of the original file's dimensions.

Experienced bot creators often prefer HTML because it allows for "Responsive Design." By setting the width to a percentage (e.g., width="80%"), the image stays proportional to the user’s screen size, preventing the awkward horizontal scrolling that can occur with fixed-pixel images on smaller smartphones.

The Secret to Working Links: Finding Direct URLs

The most common reason images fail to appear in Janitor AI—often showing up as a broken icon or a clickable text link—is the use of an incorrect URL. Janitor AI cannot render a "webpage"; it can only render an "image file."

Distinguishing Gallery Links from Direct Links

When you upload an image to a site like Imgur or Postimages, the URL in your browser’s address bar is usually a gallery link (e.g., imgur.com/a/example). This page contains ads, comments, and the site’s interface. If you paste this into Janitor AI, the system will not find the raw image data.

A direct link, conversely, points only to the file itself. It must end in a recognized image format.

  • Correct: https://i.imgur.com/example.jpg
  • Incorrect: https://imgur.com/example

How to Retrieve a Direct Link

To get the correct URL, right-click (or long-press on mobile) the image you have uploaded and select "Copy Image Address" or "Open Image in New Tab." Once the image is open by itself on a plain background, copy the URL from the address bar. If it doesn't end in .png, .jpg, or .gif, it is likely not a direct link.

Best Image Hosting Sites for Janitor AI in 2026

Where you host your images determines how long they will remain visible. Many popular platforms have strict "hotlinking" policies that may block your image from appearing on external sites like Janitor AI.

Janitor AI Media Library (Internal Hosting)

As of recent platform updates, Janitor AI has introduced a native Media Library accessible through the creator dashboard. This is the most reliable method because the images are hosted on the same servers as the chat interface. Using the internal library minimizes loading lag and ensures the link will never expire as long as your account exists.

Catbox.moe

Catbox is a favorite among the advanced roleplay community. It is a minimalist hosting service that does not compress files heavily and is generally more permissive regarding different types of content. It provides permanent direct links that are highly compatible with Janitor AI’s rendering engine.

Imgur (Use with Caution)

While Imgur was once the gold standard, it has become increasingly restrictive. It sometimes blocks "hotlinking" from high-traffic AI sites, leading to images that work for the creator but appear as "Image not found" for other users. If you use Imgur, ensure you are logged in so you can track if your images are being flagged or removed.

Avoid Discord for Long-Term Hosting

A common mistake is using Discord to host images by uploading them to a private server and copying the link. Discord uses temporary "tokens" in their URLs. This means the image will work for a few hours or days, but the link will eventually "break," leaving your character’s first message with a dead link icon.

Step-by-Step Guide to Embedding Images

Follow these steps to ensure your image displays perfectly every time you start a new chat.

Step 1: Prepare the Visual Asset

Before uploading, consider the aspect ratio. Character portraits (vertical) look best for introductions, while "setting" or "landscape" images work well as headers at the very top of the message. Keep the file size under 2MB to ensure fast loading for users with slower internet connections.

Step 2: Upload and Copy the Direct URL

Upload your file to your chosen host. Use the "Copy Image Address" method mentioned earlier to ensure you have the raw file path.

Step 3: Access the Character Editor

Navigate to your "My Characters" tab on Janitor AI. Click on the character you wish to edit and find the field labeled "First Message" or "Greeting."

Step 4: Input the Code

Decide where you want the image to appear. Placing the code at the very beginning of the box puts the image at the top of the chat.

  • Tip: Adding a line break (hitting Enter) after the code ensures that the character’s text doesn't start immediately next to the image, which can look cluttered.

Step 5: Test and Verify

Save the character and start a "New Chat." Check how the image looks on both your desktop browser and your mobile device. If the image is too wide on mobile, switch to the HTML method and set the width to 100%.

Troubleshooting: Why Your Image Isn't Showing

If you followed the steps but only see a link or a blank space, check for these common errors:

1. Spaces in the Syntax

Markdown is very sensitive to spaces. Ensure there is no space between the exclamation mark and the brackets, or between the brackets and the parentheses.

  • Wrong: ! [alt] (url)
  • Right: ![alt](url)

2. HTTP vs HTTPS

Janitor AI is a secure site. If your image link starts with http:// instead of https://, many modern browsers will block the image for security reasons. Always ensure your host supports SSL (HTTPS).

3. Hotlink Protection

Some sites (like Pinterest or certain Wiki pages) prevent their images from being displayed on other websites. If you are using a link you found on Google Images without re-hosting it, the original site might be blocking Janitor AI. The solution is to download the image and re-upload it to a dedicated host like Catbox or the Janitor Media Library.

4. File Size and Resolution

Extremely high-resolution images (4K or 8K) may fail to render because the browser times out while trying to fetch the data. Aim for a resolution no wider than 1080px for a first message.

Creative Ways to Use Images in Your Character's Intro

The first message isn't just for a single portrait. Advanced creators use code to build a more complex visual narrative.

Creating a Mood Board

You can include multiple small images to represent the character's aesthetic. Using HTML, you can place three images side-by-side: <img src="link1.jpg" width="30%"> <img src="link2.jpg" width="30%"> <img src="link3.jpg" width="30%"> This creates a "gallery" effect that immediately sets the tone of the RP environment.

Using Animated GIFs

Janitor AI supports GIFs in the first message. This is an excellent way to show a character’s subtle movements—like a smirk, a tilt of the head, or the falling of snow in the background. Be mindful that GIFs are much larger than static images and can significantly slow down the initial chat loading time.

Environmental Headers

Instead of a character portrait, consider using a wide, cinematic shot of the location where the roleplay begins (e.g., a rain-slicked cyberpunk street or a cozy medieval tavern). This helps the user visualize the "stage" before they see the character.

Visual Design for Mobile Users

A significant portion of the Janitor AI community accesses the site via mobile devices. Images that look perfect on a wide monitor can become problematic on a vertical screen.

The "Squish" Factor

If you use fixed-width HTML (e.g., width="800"), the image will overflow the mobile screen, forcing the user to scroll horizontally. This breaks the flow of the conversation. Using width="100%" or simply using Markdown is the safest way to ensure the image "shrinks" to fit the phone screen.

Text-Image Balance

On mobile, an image takes up a lot of "real estate." If your image is very tall, the user might have to scroll down just to see the first word of the greeting. Experienced creators often place the image below the first paragraph of text so the user is immediately greeted by the narrative before being hit with the visual.

What is the Janitor AI Media Library?

For those unaware, the platform has been moving toward a more integrated system. The Media Library is a specialized tool where you can manage all assets associated with your bots.

Advantages of Using the Library

  1. Persistence: Unlike external sites that might delete "inactive" images after 6 months, the Media Library is permanent.
  2. Ease of Use: You can copy the code directly from the library interface.
  3. Privacy: It ensures that your images are associated with your Janitor account, reducing the risk of your assets being flagged by external hosting terms of service.

To use it, look for the "Media" or "Library" tab in your profile settings. Upload your image there, and the system will provide a "Media URL" that is guaranteed to work within the chat interface.

Summary

Putting images in a Janitor AI first message is a powerful way to enhance character depth and world-building. While the platform doesn't have a direct "click-to-upload" feature for messages yet, the use of Markdown and HTML provides a flexible workaround.

To succeed:

  • Always use Direct Links (URLs ending in .jpg or .png).
  • Prefer the Janitor Media Library or Catbox.moe for hosting.
  • Use HTML if you need to control the size of the image for mobile users.
  • Avoid Discord links as they will eventually expire.

By mastering these simple code snippets, you can create bots that stand out in the community, providing a rich, multi-sensory experience from the very first interaction.

FAQ

Can Janitor AI generate images during a chat?

No. Janitor AI is a text-based Large Language Model (LLM) interface. While it can display pre-existing images that you or the creator have coded into the messages, it cannot "draw" or "generate" new images based on the conversation. If a bot appears to send a new image, it is usually a pre-set link triggered by specific keywords in the character's instructions.

Why does my image show up as a blue link instead of a picture?

This happens when the syntax is broken or the URL is not a direct file link. Check for spaces in your Markdown ![]() or ensure your HTML <img src=""> has the correct quotes. If you are using a link from a site like Pinterest, the site might be blocking "hotlinking," causing it to revert to a text link.

Is there a limit to how many images I can put in the first message?

Technically, no, but practically, yes. Adding too many images will make the first message take a long time to load. Furthermore, if you are using an API like OpenAI or Anthropic, the text code for the image URLs counts toward your "context limit" (though only by a few tokens). Keeping it to one or two high-quality images is usually the best practice.

Does the image show up for everyone or just me?

If the code is placed in the "First Message" field of a public character, it will show up for every user who starts a chat with that character. However, the image must be hosted on a public server. If you link to an image on your private Google Drive or a password-protected site, other users will see a broken icon.

Can I use images in the character's description?

Yes! The same Markdown and HTML rules apply to the "Character Description" and "Persona" fields. Many creators use this to show "Outfit References" or "Character Sheets" that users can look at by clicking the character's profile during a chat.