Html how to add image to

Images in HTML

How do we put an image on a webpage?

In order to put a simple image on a webpage, we use the element. This is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source). The src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL, in the same way as href attribute values in elements.

Note: You should read A quick primer on URLs and paths to refresh your memory on relative and absolute URLs before continuing.

If the image was in an images subdirectory, which was inside the same directory as the HTML page, then you’d embed it like this:

You could embed the image using its absolute URL, for example:

But this is pointless, as it just makes the browser do more work, looking up the IP address from the DNS server all over again, etc. You’ll almost always keep the images for your website on the same server as your HTML.

Warning: Most images are copyrighted. Do not display an image on your webpage unless:

Copyright violations are illegal and unethical. In addition, never point your src attribute at an image hosted on someone else’s website that you don’t have permission to link to. This is called «hotlinking». Again, stealing someone’s bandwidth is illegal. It also slows down your page, leaving you with no control over whether the image is removed or replaced with something embarrassing.

Our above code would give us the following result:

Note: Elements like and are sometimes referred to as replaced elements. This is because the element’s content and size are defined by an external resource (like an image or video file), not by the contents of the element itself. You can read more about them at Replaced elements.

Note: You can find the finished example from this section running on GitHub (see the source code too.)

Alternative text

So, why would you ever see or need alt text? It can come in handy for a number of reasons:

What exactly should you write inside your alt attribute? It depends on why the image is there in the first place. In other words, what you lose if your image doesn’t show up:

Essentially, the key is to deliver a usable experience, even when the images can’t be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You’ll soon realize how helpful alt text is if the image cannot be seen.

Note: For more information, see our guide to Text Alternatives.

Width and height

You can use the width and height attributes to specify the width and height of your image. You can find your image’s width and height in a number of ways. For example on the Mac you can use Cmd + I to get the info display up for the image file. Returning to our example, we could do this:

This doesn’t result in much difference to the display, under normal circumstances. But if the image isn’t being displayed, for example, the user has just navigated to the page, and the image hasn’t yet loaded, you’ll notice the browser is leaving a space for the image to appear in:

This is a good thing to do, resulting in the page loading quicker and more smoothly.

However, you shouldn’t alter the size of your images using HTML attributes. If you set the image size too big, you’ll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user’s needs. The image may also end up looking distorted, if you don’t maintain the correct aspect ratio. You should use an image editor to put your image at the correct size before putting it on your webpage.

Note: If you do need to alter an image’s size, you should use CSS instead.

Image titles

As with links, you can also add title attributes to images, to provide further supporting information if needed. In our example, we could do this:

This gives us a tooltip on mouse hover, just like link titles:

However, this is not recommended — title has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won’t show it unless you are hovering with a mouse (so e.g. no access to keyboard users). If you are interested in more information about this, read The Trials and Tribulations of the Title Attribute by Scott O’Hara.

It is better to include such supporting information in the main article text, rather than attached to the image.

Active learning: embedding an image

It is now your turn to play! This active learning section will have you up and running with a simple embedding exercise. You are provided with a basic tag; we’d like you to embed the image located at the following URL:

Earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we’ll let you off this one time.

We would also like you to:

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

Annotating images with figures and figure captions

Speaking of captions, there are a number of ways that you could add a caption to go with your image. For example, there would be nothing to stop you from doing this:

This is OK. It contains the content you need, and is nicely stylable using CSS. But there is a problem here: there is nothing that semantically links the image to its caption, which can cause problems for screen readers. For example, when you have 50 images and captions, which caption goes with which image?

A better solution, is to use the HTML and elements. These are created for exactly this purpose: to provide a semantic container for figures, and to clearly link the figure to the caption. Our above example could be rewritten like this:

The element tells browsers, and assistive technology that the caption describes the other content of the element.

Note: From an accessibility viewpoint, captions and alt text have distinct roles. Captions benefit even people who can see the image, whereas alt text provides the same functionality as an absent image. Therefore, captions and alt text shouldn’t just say the same thing, because they both appear when the image is gone. Try turning images off in your browser and see how it looks.

A figure doesn’t have to be an image. It is an independent unit of content that:

A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

Active learning: creating a figure

In this active learning section, we’d like you to take the finished code from the previous active learning section, and turn it into a figure:

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see an answer:

CSS background images

You can also use CSS to embed images into webpages (and JavaScript, but that’s another story entirely). The CSS background-image property, and the other background-* properties, are used to control background image placement. For example, to place a background image on every paragraph on a page, you could do this:

The resulting embedded image is arguably easier to position and control than HTML images. So why bother with HTML images? As hinted to above, CSS background images are for decoration only. If you just want to add something pretty to your page to enhance the visuals, this is fine. Though, such images have no semantic meaning at all. They can’t have any text equivalents, are invisible to screen readers, and so on. This is where HTML images shine!

Summing up: if an image has meaning, in terms of your content, you should use an HTML image. If an image is purely decoration, you should use CSS background images.

Note: You’ll learn a lot more about CSS background images in our CSS topic.

Test your skills!

You’ve reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you’ve retained this information before you move on — see Test your skills: HTML images.

Summary

That’s all for now. We have covered images and captions in detail. In the next article, we’ll move it up a gear, looking at how to use HTML to embed video and audio content in web pages.

HTML Images

Images can improve the design and the appearance of a web page.

Example

Example

Example

HTML Images Syntax

The HTML tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag is empty, it contains attributes only, and does not have a closing tag.

The tag has two required attributes:

Syntax

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

Example

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

If a browser cannot find an image, it will display the value of the alt attribute:

Example

Tip: A screen reader is a software program that reads the HTML code, and allows the user to «listen» to the content. Screen readers are useful for people who are visually impaired or learning disabled.

You can use the style attribute to specify the width and height of an image.

Example

Alternatively, you can use the width and height attributes:

Example

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

Width and Height, or Style?

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

How To Add Images To Your Webpage Using HTML

In this tutorial, we’ll learn how to use HTML to add images on a website. We’ll also learn how to add alternative text to images to improve accessibility for site visitors who use screen readers.

Adding an image with HTML

Images are added to an HTML document using the element. The element requires the attribute src which allows you to set the location of the file where the image is stored. An image element is written like this:

Note that the element does not use a closing tag. To try using the element, download our image of Sammy the Shark and place it in your project directory html-practice.

Note: To download the image of Sammy the Shark, visit the link and CTRL + Left Click (on Macs) or Right Click (on Windows) on the image and select “Save Image As” and save it as small-profile.jpeg to your project directory.

Next, erase the content of your index.html file and paste into the file. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

Then, copy the file path of the image and replace Image_Location with the location of your saved image. If you are using the Visual Studio Code text editor, you can copy the file path by using CTRL + Left Click (on Macs) or Right Click (on Windows) on the image file small-profile.jpeg in the left-hand panel and selecting “Copy Path.” For an illustration of the process, please see the gif below:

Note: Make sure to copy the relative or project file path of the image rather than the absolute or full file path of the image. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative path would work if we decided to publish our website online. Since our end goal is to create a publishable website, we will start using relative paths now when adding elements to our document.

Save your index.html file and reload it in your browser. You should receive something like this:

Technically, you can also use links to images hosted online as file paths. To understand how this works, try replacing the image location with a link to our image of Sammy the Shark like this:

Save your file and reload it in the browser. The image should still load in your web document, but this time the image is being sourced from its online location rather than your local project directory. You can experiment with adding other online images by using their location links as the src attribute in the tag.

However, when building a website it is generally better to host your images in your project directory to ensure the sustainability of the site. If the image is taken down by its host or if its address changes, it will no longer render on your site.

Alternative Text for Accessibility

When adding an image, you should always include alternative text describing its content using the alt attribute. This text is typically not displayed on the webpage but is used by screen readers to communicate content to visually-impaired site visitors.

When adding alternative text, keep the following best practices in mind:

For informative images, alternative text should clearly and concisely describe the subject matter of the image, without referring to the image itself. For example, do not write “Image of Sammy the Shark, DigitalOcean’s mascot” but “Sammy the Shark, DigitalOcean’s mascot.”

For decorative images, the alt attribute should still be used but with a null value, as this improves the screen reader experience: .

For a useful guide on determining whether an image is informative or decorative, visit https://www.w3.org/WAI/tutorials/images/decision-tree/

You should now have familiarity with how to add images to your HTML document and how to add alternative text to aid with accessibility. We’ll learn how to change the image size and style in the tutorial How To Add a Profile Image To Your Webpage later on in the series. In the next tutorial, we’ll learn how to add links to an HTML document.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Tutorial Series: How To Build a Website with HTML

This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

LearnWebCode

As you recall from Lesson 1 (What is HTML?), adding a paragraph in HTML is as simple as wrapping text in

tags. Adding an image, however, is a little more complicated.

Follow Along

Before we continue, I encourage you to follow along by copying and pasting today’s code into your own HTML document (or the page we created in Lesson 2: How To Create and Save Your First HTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we make edits. This will greatly enhance your learning ability.

A Funny Dog

Let’s pretend we have an image of a dog on our computer saved as “funny-dog.jpg” and we want to insert it into a webpage; this is the code we would use:

Let’s analyze this code. First, is the code for creating an image element. Next, the letters “src” are used as an attribute (which you learned about in Lesson 3: Attributes and Values) and stand for “source”. Basically, we need to provide the web browser with a value to the source of the image. Naturally, the value for the source attribute is “funny-dog.jpg”. This example assumes your image file is located in the same directory as your HTML file. If, for example, you had your image file inside a folder named “images” your code would look like this:

Self Closing Elements

As you can see, in both code examples so far there has not been an ending tag, because the image code is a “self closing” element. This is because unlike a paragraph, we won’t have a plethora of content inside our element, but rather a single image. In fact, HTML5 does not require us to ever “close” our elements, but for organizational reasons I recommend including traditional closing tags for most elements.

There is one additional bit of code we must add before we are finished. We must assign an “alt” attribute and value to our image. The “alt” attribute stands for “alternative” and is used to provide a text-based alternative for viewers incase the image will not load, or if they are visually impaired. Here is what our code will look like:

If you prefer to watch video lessons instead of reading written lessons check out my 8 hour video course and learn pro-level HTML, CSS, and responsive design.

About the Author

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

20 thoughts on “ HTML Lesson 4: How to Insert an Image in HTML ”

Thanks for your help! I’m still struggling with the editing of a theme, but this helped me with imgs.

Hiya thanks for the tutorial. One question, how can I change the size of the images? I just put one on and it’s massive!

Is this theme for free? I want this theme too! BTW. Thank you for your blog.I learn a lot from it!

These lessons have been so helpful cause I am learning how to design a website.
Thanx

Sure, it did work. I love it.
Thanks you so much. Keep up Serving!

Hello Brad,
You’ve been extremely helpful over the years. In adding images to HTML, it’s been successful ever since – that’s if I’m connected to the Internet.
However, can’t I get to see the image I added to the HTML doc without getting on the net?

You dont have to connect to the net to view your HTML doc, just make sure your HTML files and images folder are in the same directory.

Thanks for sharing it was very helpful!

thanks man i have just inserted images on ma webpage

OK so i managed to put up some images onto my work in progress. How do i control where about i put them? I want one to sit on the right of a few dot points but i can only put it below, above or between each of them where as I’m aiming to get NEXT to them. Any tips?

Hi Tasman, if you want the image to sit next to other content (to the right) you’ll want to learn about CSS Floats. I have a YouTube video that explains floats here.

I’ve just started learning HTML with your great lessons. I have an issue with linking two pages. The link does not work. I work on Mac and tried many times to solve this with no success. Appreciated!

Hi, do your page names use hyphens instead of spaces? So for example “new-page.html” instead of “new page.html”
Aside from not using spaces in file names, the next thing I can think of is to pay extra attention to the folder/directory structure. Are the two pages you are linking in the same folder?

THank you so much you have helped me alot.

if the html document in folder
c:\web\html\world.html

and image in folder
d:\image\dog\funnydog.jpeg

so how to add this image to above html doc
thanks
janaka

That’s a good question. If the image folder is not on the same hard drive (or partition) as the HTML folder that will be tricky. If possible, I’d recommend creating a folder named “images” that sits in the same “html” folder that your “world.html” exists within. Or at the very least, create an “image” folder that sits at the root of the “C” drive just like your “web” folder does. Then, you could reference the image with the “src” attribute with this value “../../image/dog/funnydog.jpeg” – Do you plan on eventually moving your web page to a web-host so the world can view your page? Or is this page only for personal use on your computer? If you want to place the page online eventually you’ll want to make sure the “images” folder is closer to the HTML file.

Now my doubts are clear related to inserting imagesnin HTML documents. Thank you for help!

Hello, Thank you, for your lessons for html code. I am totally blind, and I was able to post my picture with your clear instructions. Thanks again!

How to Add Images in HTML From a Folder

Have you seen any websites without images? Yes, we still might get a few, but they are rare these days. Let’s learn how you can add images to HTML documents.

Modern web relies hugely on images relevant to the site content as this helps to improve the website appearance and helps readers to understand the content better.

A website can contain multiple images that are often organised in the subdirectories and folders. Thus, it’s important to learn, how you can include an image in an HTML file from a folder.

The HTML tag

You can include an image in HTML using the HTML tag.

The loads the image and places it on the web page. It has 2 important attributes:

How to set the image source in HTML

Let’s learn a bit more about how you specify the source of the image.

The base case is to specify the filename of the image that you’d like to place in the HTML document.

The browser will look for the image in the same folder where you’ve placed the HTML document.

If the image is located in a folder or a subdirectory, you need to include it to the source as well.

After you’ve added the /images string to the source, the browser will look for the image flowers.jpg in it instead of the current directory.

How to add an image to HTML from a remote location

The images that you use in your HTML pages don’t have to be located next to them. You can easily add images from remote locations (other websites or file storages) using a URL.

How to use “.” or “..” as the image source in HTML

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript