How to Add Images to Websites

Adding images to a website will add detail and a bit of flare to your pages. Many visitors want to visually see what they are searching for and what your website pages are trying to explain. A good image will offer your visitors more information and a better experience.So, how do you add images to your website? The process is fairly simple, and all you need to learn is one simple HTML tag. This tag is the image tag and it looks like this: <img src=image-name.jpg>. If you wan to add an image to a website, you need to tell the browser where the image is, and where it should be displayed. The <img src> tag does just that.Read on to learn how to add an image to your website.

Difficulty: Easy

Instructions

Things You'll Need:

• Computer
• Basic knowledge of HTML
• A digital image
• Website
• FTP connection

How to Add an Image to a Website

1. Upload your image to your web server using your FTP client in a directory called "images". Then copy down the image name and location. You will need to include this location in the image tag. If you put all your images in a directory called images, the image location will be "images/image-name.jpg".

2. Insert the HTML tag <img src="#"> where you want the image to appear. The <img src> tag tells the browser that it needs to display an image.

3. In order to make your browser "go and get" the image, and display it in the web page, you need to enter the location of the image, so the browser can find it. So, enter the image location in the <img src="#"> tag. If your image is called "my-first-html-image.jpg" and it is located in the images directory on your web server, you would insert this location in the HTML tag. It would read <img src="/images/my-first-html-image.jpg">.

4. Add the border tag "border=1" inside the <img src> tag, if you want a border, and then enter alternate text, inside the tag. This is the text that displays on your visitor's screen as the image is loading. If you have an image of a car, you could add "alt=new car picture", or something to that effect. That is how to add an image to your website.

Tips & Warnings

• Position your image in a place where it will not interfere with the arrangement of your HTML page.
• Adding alternative text is a good way to increase your SEO.
• If you do not want a border around your image, insert the border="0" tag inside the <img src=#> tag.
• Adding "../" before the directory name (in this case "images") will make the browser go back one directory, and then to the images directory, if the web page you are placing the image in, is in another directory. The tag will look like, <img src="../images/my-first-html-image.jpg">.
• Always use smaller images, because they load faster. Large images will only slow down your page load speeds.
• Placing images in a web page can change the layout of the page. Use images that fit with your page size.
• Using copyrighted images on your website is illegal. You must get permission, or pay royalties for all copyrighted images.

Resources

• A good tutorial on adding images to a website
• Find images for your website on Google
• You can purchase stock photos to improve your website at Shutterstock.com