How to insert images with HTML: 10 Steps (with images)

Adding images to your website or social media profile is a great way to enhance your page. The HTML code for adding images is straightforward and is usually one of the first lessons learned by those just starting to use it.

Steps

Method 1 of 2: Inserting the Image

Step 1. Upload your image. There are several free image hosting services, such as Picasa Web Albums, Imgur, Flickr, or Photobucket. Please read the terms carefully. Some services will reduce the quality of your image or delete it if a lot of people see it (since it uses the bandwidth of the server).

Some blog hosting services allow you to upload your images using the blog manager tools.
If you paid for a server, upload the image to your own site using an FTP service. We recommend creating an image directory to keep your files organized.
If you want to use an image from another website, ask the creator for permission. If it allows you to use it, download the image and then upload it to an image-hosting site.

Step 2. Open your HTML file

Opens the HTML document for the web page where the image will be displayed.

If you try to insert an image in a forum, you can write directly in the post. Several forums use a custom system instead of HTML. Ask other forum members for help if it doesn't work out

Step 3. Start with the image tag

Find a point in the body of your HTML where you would like to insert an image. Write the label

here. This is an empty tag, that is, it stands alone, without a closing tag. Everything you need to display your image will go inside the two angle brackets.

Insert Images with HTML Step 5

Step 4. Find the URL of your image

Visit the website where your image is hosted. Right click (control - click on Mac) and select Copy Image Location. You can also click View Image to view the image alone on the page and then copy the URL into your address bar.

If you uploaded the image to an image directory on your own website, link to / images / yourfilename. If it doesn't work, then the images directory is probably inside another folder. Move it to the root directory

Step 5. Put the URL in a src attribute

As you may already know, HTML attributes go inside a tag to make modifications. Attribute src is short for "source" and tells the browser where to look to find the image. Type src = "" and paste the image URL between the quotation marks. Here is an example:

Step 6. Add an alt attribute

Technically, your HTML has everything you need to display the image, but it is better to also add an attribute alt. This tells the browser which text to display when the image fails to load. Also, above all, it helps search engines know what your image is about and allows screen readers to describe your image to visually impaired visitors. Follow this example by changing the text inside the quotes:

If the image is not important to the content of the page, include the attribute alt = "Image" without text (alt = "")

Step 7. Save your changes

Save your HTML file on your website. Visit the page you just edited or update the page if you already have it open. Now, look at your image. If it's not the right size or you don't like it for another reason, skip to the next section.

Method 2 of 2: Optional Settings

Step 1. Resize the image

For best results, resize the image using free editing software and then upload the new version. Establish the width and the high with HTML instructs the browser to reduce or enlarge the image, which can be inconsistent between browsers and cause (rarely) display errors. If you're looking for a quick and useful setting, use this format:

(Number of pixels or "CSS pixels" more focused on phones in HTML5)
o (Percentage of the dimensions of the web page or percentage of the HTML element that contains the image)
If you enter only one attribute (width or height), the browser should preserve the width: height ratio.

Step 2. Add a description

Attribute qualification can be used to add additional comments or information about the image. For example, you can quote the artist here. In most cases, this text will appear when the visitor hovers over the image.