To add an image to your web page, you will need to use the image tag:

<img src="/pathToImage/imageName.jpg" />

If my image is named sunshine.jpg and is in the same folder as my web page, it would look like this:

<img src="sunshine.jpg" >

If my image is in a folder called ‘images’ which is also in the same folder as my web page, it would look like this:

<img src="images/sunshine.jpg" />

If I want to link to an image that’s located on another website, I need to put in the entire URL or address to the file like this:

<img src="https://cindycullen.com/images/sunshine.jpg" />

I can give my image a title like this:

<img src="sunshine.jpg" title="Sunshine" />

The title attribute can help your website in the search engines if the title is one of the keywords with which you are trying to rank well. It may also be used as the tooltip.  A tootip is the little box that pops up when you move your mouse over the image.  Let your mouse cursor rest on the image above and you should see the tooltip.

You should also give your image an ‘alt’ attribute.

<img src="sunshine.jpg" title="Sunshine" alt="Sunshine" />

This is used with screen readers for the visually impaired and can also be helpful with the search engines in the same way as the title tag.

You can also give your images a width if you don’t like the original size of the image, like this:

<img src="sunshine.jpg" title="Sunshine" alt="Sunshine" width="100px" />

If you only give the width and not a height, the image will be scaled and keep the correct proportions. You could use the height in addition or instead of the width. Using both together could stretch or compress your image if the width and height you use are not to scale with the original image. You can use px for pixels or you can use a percentage in the width and height attributes.

2 thoughts on “How to Add an Image to Your Web Page”

  1. Also, the image that I am using is a PNG. Would that affect the code ( I have aradley tried replacing jpg eith png )?I am using a child theme of twenty eleven by the way

Leave a Comment

Your email address will not be published. Required fields are marked *