Images & embeds

How to Embed an Image URL in HTML, Markdown, and BBCode

Every embed format needs the same thing: a direct public URL to the image file itself. Get that URL from a Yoink upload, then wrap it in the syntax your platform expects, whether that is an HTML img tag, Markdown image syntax, or forum BBCode.

On this page

Step 1: Get a direct image URL

  1. Open the Yoink uploader and choose Select Files, or drag your image onto the drop area on desktop. A demo bug screenshot with synthetic data, public art files, or a published event graphic all work; only upload images you own or have permission to publish.
  2. Start the upload with the main upload button and wait for it to complete.
  3. Copy the link from the completed result. It starts with https://files.yoink.zip/ and points directly at your file.

The uploader sends the file you selected. The link is public: anyone with it can view or forward the image, and signing in does not change that. There is also no promised lifetime, so treat Yoink links as convenient sharing, not permanent asset hosting. See limits and retention before embedding anything a project depends on long term; durable site assets belong in your repo or controlled hosting.

Step 2: Pick the right syntax

Use the format your target platform actually parses. Pasting the wrong one just shows raw text.

  • HTML pages and templates: an img element with the URL in src and a real description in alt.
  • Markdown files, GitHub READMEs, many docs tools: ![alt text](URL). A plain [text](URL) renders as a clickable link instead of an inline image.
  • Forums running phpBB and similar software: [img]URL[/img] in a BBCode-enabled editor.

HTML

html
<img src="https://files.yoink.zip/your-file-id/screenshot.png" alt="Settings panel showing the overlapping save button">

Per MDN's image guide, alt is the fallback description when the image cannot load, and optional width/height should match the true aspect ratio rather than fake dimensions.

Markdown

markdown
![Settings panel showing the overlapping save button](https://files.yoink.zip/your-file-id/screenshot.png)

GitHub's formatting syntax uses the same pattern; use its Preview tab before committing to confirm the image renders.

BBCode

text
[img]https://files.yoink.zip/your-file-id/screenshot.png[/img]

Step 3: A forum workflow

Forum posting trips people up because there are two different places a URL can go.

  1. Compose your post in the forum editor.
  2. If the posting form has an Insert Image button or URL field, paste only the plain URL there, no tags around it. The forum adds the markup itself.
  3. If you are typing directly in a BBCode editor, write the full [img]URL[/img] tag yourself.
  4. Preview the post before submitting.
  5. Check the forum's rules on remote images and image dimensions. Per the official phpBB BBCode guide, administrators control whether BBCode and the img tag are enabled, and the image must be accessible on the web, not on your local disk. When in doubt, ask a moderator.

If the image does not display

  • Open the URL directly in a browser tab.
  • Confirm the platform allows remote images at all; some sanitize or proxy them.
  • Remember the file must stay available. Troubleshoot with image link not displaying.

Nothing here guarantees embedding works everywhere: each site decides which external images it will load and render.