How to Embed Pictures in HTML for Tumblr Post

Techwalla may earn compensation through affiliate links in this story.

Tumblr lets you add photos to text posts either by uploading an image file from your hard drive or by directly pasting a URL to a picture hosted on a third-party server into the post editor window. If Tumblr fails to properly fetch the linked image, edit the post's HTML code to embed the picture manually.


  • Unlike standard posts, text posts that contain images added by editing the post's source code do not directly display the linked picture. Instead, such posts display a gray icon which visitors must then click to reveal the picture.
  • Certain websites actively prevent other sites from directly linking to images hosted on their servers -- a practice known as hotlinking. If you attempt to add a link to an image hosted by such a site, Tumblr may be unable to display the picture.

Step 1

Image Credit: Image courtesy of Tumblr

Go to your Tumblr dashboard and create a new text post by clicking the Text icon.

Step 2

Compose your text post.

Step 3

Image Credit: Image courtesy of Tumblr

Switch to Tumblr's HTML editor by opening the cog menu and selecting HTML from the Text Editor menu.

Step 4

Image Credit: Image courtesy of Tumblr

Enter the following HTML code at the point where you want to display the image:

Replace the example URL with the correct one.


Do not switch back to the rich text editor after editing the post's source code. Doing so causes Tumblr to delete the image tag you inserted.

Step 5

Publish your post by clicking the Post button.