How to Insert an Image Using HTML

Upload images to the internet. There are several free image hosting services like Picasa Web Albums, Imgur, Flickr, and Photobucket. Be sure to read the terms of use carefully. Some services may reduce image quality or remove images when too many people view them (as this consumes server bandwidth).

• Some blog hosting services allow you to upload images through the blog's admin tools.
• If you use a paid web server, you can upload images to your site using FTP. Create an "images" folder to store files neatly.
• If you want to use an image from another website, you need to ask the creator for permission. If they agree, you can download the image and upload it to an image hosting service.

Open the HTML file. Open the HTML document where the image will be displayed on the web.

• If you want to insert an image into a forum post, you can type it directly in the post. Many forums use custom systems instead of HTML. Ask other forum users if you are unsure how to do it.

Start with the img tag. Find the spot in the HTML where you want to insert the image. Type the tag here. This is a self-closing tag, meaning it doesn't need a closing tag. You simply insert the image between the angle brackets.

• <img>

Find the image URL. Go to the image hosting website. Right-click on the image (or hold down the control key and click on Mac), then select 'Copy Image Location.' You can click 'View Image' to open it in a separate page, then copy the URL from the address bar.

• If you uploaded the image to your website's image folder, link to the image using the path /images/imagefilename. If this doesn't work, the image folder may be inside another folder. Move it to the root folder.

Place the URL in the src attribute. As you may know, HTML attributes are used within tags to modify them. The src attribute stands for 'source' and tells the web browser where to look for the image. Type src=" " and paste the image URL inside the quotes. Here's an example:

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

Add the alt attribute. Technically, HTML can display images on its own, but it's better to include the alt attribute. This tells the web browser what text to display if the image fails to load. More importantly, this attribute helps search engines identify the content of the image and allows screen readers to describe the image to visually impaired users. Follow the example below, changing the text inside the quotes:

• <img src="http://www.exampleimagehost.com/my-cute-dog.jpg" alt="my dog eating an orange">
• If the image isn't essential to the page's content, you can add the alt attribute with no text (alt="").

Save changes. Save the HTML file to the website. Visit the edited page or reload the open page. You will see the image appear. If the image size is incorrect or if you're dissatisfied for any reason, proceed to the next section.

Change image size. For the best results, resize the image using an editing software, then upload the new version to the storage service. Set the width (horizontal) and height (vertical) using HTML. The browser will resize the image, but the effect may vary slightly between browsers, though errors are rare. To quickly adjust and ensure compatibility, use the following format:

• <img src="http://example.com/example.png" alt="display this" width=200 height=200> (pixel values or "CSS pixels" in HTML5.)
• or <img src="http://example.com/example.png" width=100% height=10%> (Website size percentage or HTML element size percentage in the image.)
• If only one attribute (width or height) is specified, the browser will adjust the other attribute proportionally based on the width:height ratio.

Add tooltips. The title attribute can be used to add comments or additional information to an image. For example, you could include the author's name here. In most cases, this text will be displayed when the user hovers their mouse over the image.

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

Create a link. To turn an image into a link, place it inside an anchor tag <a></a>. Here's an example:

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

• Always keep a backup copy of the image on your computer in case of emergencies.
• Animated images (GIFs) are best for logos or animations, while JPEGs are better suited for complex images like photographs.
• Ensure the URL contains the image format (.jpg, .gif, etc.).
• In most cases, choose the image formats .gif, .jpeg, .jpg, or .png. Other formats may not display correctly on web browsers.

• Do not "hotlink" by inserting URLs from someone else's website. This uses their bandwidth without providing them with any visitors. Furthermore, hotlinked images will disappear if the host website goes down. If the hosting site detects your actions, they might replace the image displayed on your website.