Add an image to your website

To embed an image on your website, use the <img> tag.

This tag is an empty element, just like the line break <br>. There is no start tag or end tag. All image information is stored within one tag!

[Example]

There are many image formats out there, and all of them should work on websites. The most commonly used are PNG, JPG and GIF, but WEBP exists too, among others. Try not to use bulky outdated formats such as BMP, though.

The "image URL" section refers to the location of the image relative to your HTML file. For a refresher, click here.

Explanation of each part

img src="image URL" specifies what image to use

Please enter your image URL using a relative path. You can also use an absolute path (from the root of your folder), but this might give you trouble when working offline!

[Example]

alt="alternative text" is what shows if the image can't load

If your image isn't loading, or someone is accessing your website through a text-only browser, or they're using text-to-speech on your webpage (for example if they're blind), what should be written instead of the image?

This is also good for SEO, because robots can't see images. (Well, they can, but search robots aren't likely to have complicate image recognition algorithms...)

However, since it's only a description of the image, please don't make extremely long descriptions. That defeats the purpose. For images with no relevance to the page's content, such as decorative images, please use blank alt text, alt="", so that nothing clogs up the page. Many use blank alt text for dividers too, but I like to use alt="***" for my dividers.

Keep in mind when inserting images