How to Add Images Using HTML: Beginner's Guide

If you need to add an image using HTML but aren't sure where to start, this is the perfect article for you. Inserting images using HTML is very simple, and once you get it down, you'll be doing it like it's second nature. Keep reading to learn how!

How to Add an Image in HTML: Quick Steps

Type <img src="".
Paste your image link between the quotes: <img src="url_here".
Add an alt attribute after the URL: <img src="url_here" alt="alt_text_here".
Close the tag with a bracket: <img src="url_here" alt="alt_text_here">.

Sample HTML for Inserting Images

HTML Code for Inserting Images

Section 1 of 2:

Inserting the Image

Download Article

1
Upload your image. There are many free image hosting services. Some of the most popular free online image hosts are Imgur, ImgBB, Postimages, and Imgbox.
- Some image hosts require you to sign up for an account, while others let you upload images without an account. However, it's always best to sign up for an account so you can easily find the direct link to the image later.
- Some blog-hosting services let you upload images using built-in tools.
- If you have a paid web host, upload the image to your own site using an FTP service. Creating an "images" directory is recommended to keep your files organized.
2
Open your HTML file. Open the HTML document for the web page where the image will be displayed.
- If you are trying to insert an image on a forum, you can type this code directly into your post. However, be aware that some forums don't use HTML; instead, they use a different coding language called BBCode. If you're not sure how to insert an image on a forum, ask the forum admin for assistance.
Advertisement
3
Begin with the img tag. Find the point in your HTML body where you'd like to insert an image. Type <img here.^{[1]
X
Research source} Leave off the closing bracket, for now. We'll close it later.
- The <img> tag is considered an "empty" tag, as it doesn't require a closing tag. Unlike other tags (like <b></b>, there is no "</img>" tag.
4
Add the src attribute with quotes. As you may already know, HTML attributes go inside a tag to modify it. The src attribute tells the browser to display whatever URL you add after the src tag as an image. The code will work without the quotes, but using them is best practice.
- So far, your code should look like this: <img src=""
5
Copy the direct URL to your image. Most image hosts will provide this for you. Look specifically for the direct URL; any other URL won't work. A direct URL ends with the image's file type (e.g., .png, .jpg).
- If you uploaded the image to an images directory on your website, link to it as /images/yourfilenamehere. If this doesn't work, the images directory is probably inside another folder. Move it up to the root directory.
- To copy the URL, highlight it and press Ctrl+C on Windows or ⌘ Cmd+C on Mac.
6
Paste the URL into your img tag between the quotes. To paste the image URL into your tag, click between the quotes and press Ctrl+V on Windows or ⌘ Cmd+V on Mac.
- If you're using an image you uploaded to an image host like Imgur or Postimages, your code should look like <img src="http://www.examplehost.com/my-cute-dog.jpg".
- If you're using an image you uploaded to your blog or website host, you can use a shortened version of the URL. Your code might look something like <img src="images/my-cute-dog.jpg".
7
Add an alt attribute. While the alt attribute isn't necessary to display the image, it's best practice to include it. The alt attribute is what's read when someone using a screen reader looks at your webpage. It's also displayed if the image fails to load.^{[2]
X
Research source} Follow this example, changing the text inside the quotation marks:
- Add the alt attribute just like the src attribute. Then, write a short description of the image. Here's an example: <img src="http://www.examplehost.com/my-cute-dog.jpg" alt="A golden retriever lying on a sofa"
  - The best practice for writing alt text is to keep it short, accurately describe what's happening, and don't include the words "image" or "picture."^{[3]
    X
    Research source}
- If the image you're adding is decorative (like a divider or border), you don't have to include alt text. However, according to the Web Accessibility Initiative, you should still include an empty alt attribute (alt="").^{[4]
  X
  Research source}
8
Close your image tag. Add a closing bracket to the end of the tag. You've now created an HTML image tag that will insert an image in your document.
- In our example, the finished HTML code looks like this: <img src="http://www.examplehost.com/my-cute-dog.jpg" alt="A golden retriever lying on a sofa">
Save the HTML file to your website. Visit the page you just edited, or refresh the page if you already had it open. You should now see your image. If it's the wrong size or you're unhappy for any other reason, continue to the next section.

Section 2 of 2:

Optional Adjustments

Download Article

1
Change the size of the image. For best results, resize the image using free editing software, then upload the new version. Setting the width and height using HTML tells the browser to shrink or expand the image, which can be inconsistent across browsers and (rarely) cause display errors. If you want a quick and serviceable adjustment, however, you can use HTML to adjust the size of your image.^{[5]
X
Research source}
- Pixels: Setting the image size in pixels may make the image look too big or too small on certain devices. Regardless, it can still be useful to adjust the image size in pixels. Here's how:
  - <img src="http://www.examplehost.com/my-cute-dog.jpg" alt="A golden retriever lying on a sofa" width="200" height="600">
- Percentage: Setting the image size in percentage will help it display better across multiple devices.
  - <img src="http://www.examplehost.com/my-cute-dog.jpg" alt="A golden retriever lying on a sofa" width="50%" height="70%">
2
Add a tooltip using the title attribute. The title attribute can be used to add an additional comment or information about the image. For example, you can credit the artist here. In most cases, this text will be displayed when the visitor hovers the cursor over the image. The popup that appears when you hover over the image is called a “tooltip.”^{[6]
X
Research source}
- Example: <img src="http://www.examplehost.com/my-cute-dog.jpg" alt="A golden retriever lying on a sofa" title="My Cute Dog">
3
Make it a link. To make an image that's also a link, insert the image tag inside the <a></a> hyperlink tag. If the user clicks on the image, it will link them to a different page.
- Example: <a href="https://examplesite.com"><img src="http://www.examplehost.com/my-cute-dog.jpg" alt="A golden retriever lying on a sofa"></a>
1. And if the steps above have been helpful, be sure to download this article as a PDF so you can print, read, or reference it any time.

Community Q&A

Search

Add New Question

Question

I have an image on my computer. Can I insert it in HTML without uploading it to a website?

Community Answer

You can, but the image will still only be on your computer, and not visible by anyone else who visits your website. To do this, use the image's file path instead of a URL. To find the file path, use a browser's "Open File" function to open the image, then look at the address bar. It will say something like "C:\Users\wikihow\image.jpg"

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 97 Helpful 182
Question

Does it have to be a jpg file when inserting images with HTML?

Community Answer

No. You can use any image file type unless the hosting website only allows certain file types.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 32 Helpful 35
Question

Should I resize the image before uploading, or can I just use the width and height attributes?

Community Answer

If you're downsizing a particularly large image, it's best to do that in image editing software before uploading. Your website visitor has to download the exact image you uploaded, even if it only ends up as a tiny thumbnail on his or her screen.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 45 Helpful 36

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Video

Tips

If you see a slash at the end of an img tag (like <img src="urlhere" alt="althere" />), this is a carryover from XHTML, which has been mostly superseded by HTML5. You don't need to add this trailing slash, but some IDEs or web editors may add it for you.^{[7]
X
Research source} It's added because <img> is an empty tag that has no closing tag.

Thanks
Helpful 0 Not Helpful 0
In most cases, you'll want to stick to images in the .gif, .jpeg, .jpg, or .png format. Other formats are unlikely to display correctly on all browsers.

Thanks
Helpful 0 Not Helpful 0

Submit a Tip

All tip submissions are carefully reviewed before being published

Name

Please provide your name and last initial

Submit

Thanks for submitting a tip for review!

Warnings

Do not "hotlink" by using a direct link to someone else's image. This uses up bandwidth on that person's site (and costs them more money) without bringing any visitors to their page. Besides the bad etiquette, a hotlinked image will disappear if the site hosting it goes down.

Thanks
Helpful 0 Not Helpful 0