How to Insert an Image in HTML

Adding photos to your website or social media profiles is a great way to beautify your profile. The HTML code for inserting images is very simple, often the first lesson for HTML beginners.

Table of Contents

Insert photos

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/59/Insert-Images-with-HTML-Step-1-Version-10.jpg/v4-728px-Insert-Images- with-HTML-Step-1-Version-10.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/5/59/Insert-Images-with-HTML-Step-1- Version-10.jpg/v4-728px-Insert-Images-with-HTML-Step-1-Version-10.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Upload photos to the internet. There are many free photo hosting services like Picasa Web Albums, Imgur, Flickr or Photobucket. Please read the terms carefully. Some services will reduce the quality of the image or take it down when there are too many people viewing it (because this uses the bandwidth of the server).

Some hosting blog services allow you to upload images using the blog’s admin tools.
If you use a paid web host, upload photos to your site using an FTP service. Create an “images” folder to save files scientifically. ^{[1] X Research Source}
If you want to use an image from another website, you’ll need to get permission from the creator. If they agree, you can download the photo to your computer, then upload it to a photo hosting service.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/40/Insert-Images-with-HTML-Step-2-Version-8.jpg/v4-728px-Insert-Images- with-HTML-Step-2-Version-8.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/4/40/Insert-Images-with-HTML-Step-2- Version-8.jpg/v4-728px-Insert-Images-with-HTML-Step-2-Version-8.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open the HTML file. Opens the HTML document where the web image is displayed.

If you want to insert an image into the forum, you can type it directly in the post. Many forums use a custom system instead of HTML. Ask other forum users if you don’t know how.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/c7/Insert-Images-with-HTML-Step-3-Version-8.jpg/v4-728px-Insert-Images- with-HTML-Step-3-Version-8.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/c/c7/Insert-Images-with-HTML-Step-3- Version-8.jpg/v4-728px-Insert-Images-with-HTML-Step-3-Version-8.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Start with the img tag. Find the location to insert the image in the HTML paragraph. Type <img> tag here. This is a blank tag, i.e. it will stand alone, no end tag needed. You just need to insert the picture between the two brackets.

<img>

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/d/d2/Insert-Images-with-HTML-Step-4-Version-9.jpg/v4-728px-Insert-Images- with-HTML-Step-4-Version-9.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/d/d2/Insert-Images-with-HTML-Step-4- Version-9.jpg/v4-728px-Insert-Images-with-HTML-Step-4-Version-9.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Find the URL of the photo. Go to the photo hosting website. Right click on the photo (press contrp and click on Mac) then select “Copy Image Location”. You can click “View Image” to view the image on its own page, then copy the URL from the address bar.

If you post images to the images directory on your website, link to the images using the /images/ filename path. If that doesn’t work, the image folder may be in another folder. Let’s move it back to the root directory.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/3d/Insert-Images-with-HTML-Step-5-Version-7.jpg/v4-728px-Insert-Images- with-HTML-Step-5-Version-7.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/3d/Insert-Images-with-HTML-Step-5- Version-7.jpg/v4-728px-Insert-Images-with-HTML-Step-5-Version-7.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Put the URL in the src attribute. As you probably already know, the HTML attribute is in the tag to modify it. The src attribute stands for “source” to tell web browsers where to look for images. Type src=” ” and paste the image URL in quotes. Here is an example:

<img src=”http://www.exampleimagehost.com/my-cute-dog.jpg”>

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/26/Insert-Images-with-HTML-Step-6-Version-6.jpg/v4-728px-Insert-Images- with-HTML-Step-6-Version-6.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/2/26/Insert-Images-with-HTML-Step-6- Version-6.jpg/v4-728px-Insert-Images-with-HTML-Step-6-Version-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add alt attribute. Technically, HTML has all the elements to display images, but adding the alt attribute would be better. This property tells the web browser what text to display if the image fails to load. More importantly, this property helps search engines identify the image content and allows screen readers to describe the content to the visually impaired. ^{[2] X Research Source} Follow the example below, changing the text in quotation marks:

<img src=”http://www.exampleimagehost.com/my-cute-dog.jpg” alt=”my dog is eating tangerines”>
If the image is not important to the content of the page, add the alt attribute without text (alt=””). ^{[3] X Research Sources}

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/7e/Insert-Images-with-HTML-Step-7-Version-5.jpg/v4-728px-Insert-Images- with-HTML-Step-7-Version-5.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/7/7e/Insert-Images-with-HTML-Step-7- Version-5.jpg/v4-728px-Insert-Images-with-HTML-Step-7-Version-5.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Save changes. Save the HTML file to the website. Go to the edited page or reload the opened page. You will see the image appear. If the photo is the wrong size or you are not satisfied for some reason, read the next section.

Adjust options

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/06/Insert-Images-with-HTML-Step-8-Version-6.jpg/v4-728px-Insert-Images- with-HTML-Step-8-Version-6.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/0/06/Insert-Images-with-HTML-Step-8- Version-6.jpg/v4-728px-Insert-Images-with-HTML-Step-8-Version-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Resize the image. For best results, we recommend resizing the image with editing software, and then uploading a new version to a hosting service. Setting width and height using HTML causes the browser to shrink or expand the image, which can be inconsistent across browsers, but is rarely an error. ^{[4] X Research Source} If you want a quick and usable edit, use the following format:

<img src=”http://example.com/example.png” alt=”display this” width=200 height=200> (pixels, or use “CSS pixels” on HTML5.) ^{[5] X Source research}^{[6] X Research source}
or <img src=”http://example.com/example.png” width=100% height=10%> (Percentage of website size or percentage of HTML elements in an image.)
If you enter only one property (horizontally or vertically), the browser will adjust the rest by width:height ratio.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/68/Insert-Images-with-HTML-Step-9-Version-6.jpg/v4-728px-Insert-Images- with-HTML-Step-9-Version-6.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/6/68/Insert-Images-with-HTML-Step-9- Version-6.jpg/v4-728px-Insert-Images-with-HTML-Step-9-Version-6.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add tooltips. The title attribute can be used to add comments or information to the image. For example, you can include the author’s name here. In most cases, this text will be displayed when the visitor hovers over the image.

<img src=”http://example.com/example.png” title=”Photograph by J. Godfrey”>

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/36/Insert-Images-with-HTML-Step-10-Version-5.jpg/v4-728px-Insert-Images- with-HTML-Step-10-Version-5.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/36/Insert-Images-with-HTML-Step-10- Version-5.jpg/v4-728px-Insert-Images-with-HTML-Step-10-Version-5.jpg”,”smallWidth”:460,”smallHeight”:345,”bigWidth”:728,”bigHeight” :546,”licensing”:”<div class=”mw-parser-output”></div>”}

Create path. To turn an image into a link, insert the image into the <a></a> hyperlink tag. Here is an example:

<a href=”http://www.urloflink.com”><img src=”http://urlofimage.com/image.gif”></a>

Advice

Keep a copy of the photo on your computer in case of an accident.
Animations (GIFs) are suitable for logos or animations, while JPEGs are suitable for complex images such as photographs.
Make sure the URL contains the image format (.jpg, .gif, etc.).
In most cases, you should choose a .gif, .jpeg, .jpg or .png image format. ^{[7] X Research Sources} Other formats often do not display correctly in web browsers.

Warning

Do not “hotlink” by inserting a URL from someone else’s website. This will use the bandwidth of that website without bringing them any visitors. Besides, hotlinked images will disappear if the other hosting website goes down. If the web host detects your behavior, they can change the image displayed on your website. ^{[8] X Research Sources}

Steps

Insert photos

Adjust options

Advice

Warning

Related Posts