How to Embed Pictures in HTML for Tumblr Post

By Paul Higgins

Learn how to add a picture to a Tumblr text post by adding a specific tag to the post's HTML source code.

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.

Warning

  • 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

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

Step 2

Compose your text post.

Step 3

Switch to the HTML editor.

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

Step 4

Add the HTML code.

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

http://www.example.com/image.jpg">;

Replace the example URL with the correct one.

Warning

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.