HTML Code for Adding Images to Your Website

Sometimes an image is better than 1000 words. Believe it or not, images can make your website looks better. So it is a good idea to add images to your website. Here you will learn what HTML code you need for adding images to your site.

HTML code for adding images to your website

The element you need here is <img>. It is an open HTML element, which means you don’t need to close it.

When adding images to your site, you also need to let the web browser know where to find them, and let the search engines know what the images are about. To make sure the images are displayed in the way you like, you also need to specify their sizes and alignments. These are the reasons why you need to use several attributes with the <img> HTML tag.

The attribute src can help you define the pathway where the image is located.

The alt attribute should be used when you try to describe the image. By using alt text, you can make your image more search engine friendly and vision-impaired people friendly.

If you want your visitors to learn more information about the image, you can use the title attribute. The title text will be shown on the screen when your visitors use mouse to hover over the image.

To specify the size of an image, you should use “height” and “width”. But if you use CSS on your site, you’d better adjust your image size using CSS instead of HTML, because it is more convenient.

When defining how the image should be displayed relative to its surrounding text, you need to use the align attribute. But the align attribute is phased out in HTML5. In HTML5, you need to use CSS to do the task.

Tip:
You can also use <hr /> to add a line in between of two images.

To increase the performance of images on your site, you need to use images in correct format, correct size and at correct resolution. Usually we use jpeg, png and gif image format. You should save the image at the same size as it is shown on your site. To make sure your image shown properly, you have to save it at least at 72 pixels per inch resolution, because it is the resolution for most computer screens. Of course to get better effects on high definition monitors, you need higher resolution. But higher resolution means larger file and longer download time.