How to Insert Images with HTML

PDF download Download Article
Follow this simple guide to add images to your website with HTML
PDF download Download Article

Adding images to your website or social networking profile is a great way to spruce up your page. The HTML code for adding images is straightforward, and often one of the first lessons for an HTML novice.

How to Add an Image in HTML

The <img> tag in HTML allows you to link an image from the internet to a page. Add <img> to a new line, then put your image’s URL into a src (source) attribute. For example, <img src="http://www.website.com/my-dog.jpg">.

Sample HTML for Inserting Images

Part 1
Part 1 of 2:

Inserting the Image

PDF download Download Article
  1. Upload your image . There are many free image hosting services, such as Picasa Web Albums, Imgur, Flickr, or Photobucket. Read the terms carefully. Some services will reduce your image quality, or take down your image if too many people view it (since this uses up the host's bandwidth).
    • Some blog-hosting services let you upload images using the blog administrator 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.
    • If you want to use an image on another website, ask the creator for permission. If she grants it, download the image , then upload the image to an image hosting site.
  2. 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 directly in the post. Many forums use a custom system instead of HTML. Ask for help from other forum-goers if this doesn't work.
    Advertisement
  3. Find the point in your HTML body where you'd like to insert an image. Write the tag <img> here. This is an empty tag, meaning it stands alone, with no closing tag. Everything you need to display your image will go inside the two angle brackets.
    • <img>
  4. Visit the web page where your image is hosted. Right-click the image (control-click on Mac) and select "Copy Image Location." You can also click "View Image" to see the image alone on a page, then copy the URL in your address bar.
    • If you uploaded the image to an images directory in your own website, link to it with /images/ yourfilenamehere . If this doesn't work, the images directory is probably inside another folder. Move it up to the root directory.
  5. As you may already know, HTML attributes go inside a tag to modify it. The src attribute is short for "source," and tells the browser where to look to find the image. Write src=" " and paste the image URL in between the quotation marks. Here's an example: [1]
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg">
  6. Technically your HTML has everything it needs to display the image, but it's best to add an alt attribute as well. This tells the browser what text to display when the image fails to load. More importantly, this helps search engines figure out what your image is about, and lets screen readers describe the image to visually impaired visitors. [2] Follow this example, changing the text inside the quotation marks:
    • <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="my dog eating a tangerine">
    • If the image is not important to the page content, include the alt attribute with no text (alt=""). [3]
  7. 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 with it for another reason, continue to the next section.
    8. Advertisement
Part 2
Part 2 of 2:

Optional Adjustments

PDF download Download Article
  1. 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. [4] If you want a quick and serviceable adjustment, use this format:
    • <img src="http://example.com/example.png" alt="display this" width=200 height=200> (Number of pixels, or the more phone-friendly "CSS pixels" in HTML5.) [5] [6]
    • or <img src="http://example.com/example.png" width=100% height=10%> (Percentage of web page dimensions, or percentage of HTML element containing the image.)
    • If you only enter one attribute (width or height), the browser should preserve the width:height ratio.
  2. 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.
    • <img src="http://example.com/example.png" title="Photograph by J. Godfrey">
  3. To make an image that's also a link, insert the image tag inside the <a></a> hyperlink tag. Here's an example:
    • <a href="http://www.urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
    4. Advertisement

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 94 Helpful 177
  • 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 31 Helpful 34
  • 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 43 Helpful 34
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      Show More Tips
      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!
      Advertisement

      Warnings

      • Do not "hotlink" by inserting the URL of another person's website. This uses up bandwidth on that person's site, without bringing any visitors to his page. Besides the bad etiquette, a hotlinked image will disappear if the linked site goes down. If the web host sees what you're doing, he can even change the image that appears on your site.
        Thanks
        Helpful 0 Not Helpful 1
      Advertisement

      You Might Also Like

      How to
      Use Font Color Tags in HTML
      How to
      Resize iFrames in HTML
      How to
      Link Within a Page Using HTML
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Make a Birthday Card with HTML and CSS
      Advertisement

      Expert Interview

      Thanks for reading our article! If you’d like to learn more about html basics, check out our in-depth interview with Tyrone Showers .

      References

      1. ↑ https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
      2. ↑ https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML
      3. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
      4. ↑ https://html.com/attributes/img-width/
      5. ↑ http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
      6. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

      About This Article

      Article Summary X

      1. Upload the image.
      2. Open your HTML file.
      3. Type <img src="">
      4. Insert the image URL between the quote marks.

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 2,052,000 times.

      Reader Success Stories

      • Pushpak Kolhe

        Mar 10, 2017

        "This, I think, is the most successful and impressive page, because we know that wikiHow is forever true, it never ..." more
      More reader stories Hide reader stories
      Share your story

      Is this article up to date?

      Advertisement