How to Embed an Image

When you embed an image, the picture shows up right inside a page or post. There is no file to attach and nothing for the reader to download. You add the image's link in the spot you want, and it appears there on its own.

You need two things. One is a direct link to the image, and the other is the right bit of code for where you are placing it. This guide covers both, for HTML, Markdown, forums, docs, and email, plus what to do when an embedded image does not show up.

What it means to embed an image

Embedding is different from sending a file. When you attach an image, the other person gets a copy they have to open. When you embed one, the image is pulled in from a link and shown in place, so it looks like part of the page.

For this to work, the image has to live somewhere online with its own web address. The embed code points to that address, and the page loads the picture from there each time someone views it.

This is how images show up in blog posts, forum replies, and online docs without anyone attaching a file.

Get a link you can embed

Before you can embed an image, it needs a direct link, one that ends in .png, .jpg, or .webp and opens only the picture.

If your image is on your computer, upload it first. Open imagepaste, paste or drag the image in, and copy the link it gives back. That link points straight at the file, so it works in any embed code.

If the image is already online, right-click it and choose Copy image address. Just make sure the link opens the picture on its own, not a full web page. For more on this, see our guide on how to turn an image into a URL.

How to embed an image in HTML, Markdown, and forums

Once you have the link, the code depends on where you are putting it.

HTML (websites, custom pages):

<img src="your-link.png" alt="short description">

The alt text describes the picture for screen readers, and it shows if the image fails to load.

Markdown (Reddit, GitHub, Notion, many note apps):


Forums with BBCode (older message boards):

[img]your-link.png[/img]

In each one, swap your-link.png for your real image link. Paste the code where you want the picture, and it shows up when the page loads.

How to embed an image in docs and email

Most everyday apps do not need any code. You paste or insert the image, and they handle the rest.

• Google Docs and Slides: click Insert, then Image, then By URL. Paste the link and the picture drops in. You can also paste a copied image with Ctrl+V.

• Notion: type /image, pick Embed link, and paste the URL.

• Microsoft Word: click Insert, then Pictures, then Online Pictures or From a Link.

• Gmail and Outlook: paste the image straight into the body of the email, or use the insert-image button. It shows inline for the reader.

These tools store or display the picture for you, so you do not have to write any embed code.

Embed vs hyperlink an image

These two sound similar but do different things.

Embedding shows the picture in place. The reader sees the image without clicking anything. That is what the code above does.

Hyperlinking makes the picture clickable. The image still shows, but clicking it opens a link, like a web page or a bigger version. This is what people mean by adding a link to a picture.

To hyperlink an image in HTML, you wrap the embed code in a link:

<a href="page-to-open"><img src="your-link.png" alt="short description"></a>

In Google Docs or Word, click the image, use the link button (or Ctrl+K), and paste the address you want it to open.

So embed when you just want the picture to show, and hyperlink when you want it to act like a button.

When an embedded image won't show

If you see a broken icon instead of the picture, one of these is usually the reason.

The link is not a direct image link. It may point at a web page, not the file. A working link ends in .png, .jpg, or .webp. Open it on its own to check that only the picture appears.

The image was deleted or moved. An embed loads the picture live from its link. If the file is gone, the embed breaks. Host the image somewhere that keeps it, so the link stays good.

The host blocks embedding. Some sites do not allow their images to load on other pages. Upload the picture to a host that allows it, then use that link.

A typo in the code. Check the quotes and brackets, and make sure the link is pasted in full.

For embeds that need to last, upload the image to a host that keeps the file until you remove it. Then the link, and the embed, keep working.

Conclusion

Embedding an image comes down to two steps. Get a direct link to the picture, then add the right code or use the insert option for where you are placing it. HTML, Markdown, forums, docs, and email each have their own simple way in.

The main thing is the link. If it points straight at the image file and the file stays online, the embed keeps working. Host the picture somewhere that holds it, and your image shows up every time the page loads.