Adding images to a webpage is easy. Make sure you have your images uploaded to the internet, and that you have a file ready to add the images to.

Simple Image Placement

Woo, picture time! Do not forget to upload your images to the internet first, so you have a URL you can put into your image tag. img src is short for “image source”. The image tag, unlike other tags, is not ended with </command>.

<img src="IMAGE URL HERE">

That code will simply add the image to the page, wherever you stick the code. If you placed the code directly after some text, that is how it would appear.

This can often make things out of alignment, so it’s best to put a few <br> after the sentence, or start a new paragraph.

Note: If the image you are adding is on the same domain, eg. your website is holeycrow.com, and you have an image at holeycrow.com/photoofme.jpg, you can simply put photoofme.jpg as the image URL. There is no need to type out the entire URL.

If you are placing your images in folders, you need to include the folder name, eg. photos/photoofme.jpg.

When you are linking an image from another website on the internet, you must include http:// in front of the address, otherwise the server will assume that the image in on your website. Be careful when taking the direct link of an image, because many websites do not allow this as it is taking their bandwidth, which costs them money. They may also have preventative measures at hand, so if you happen to direct link the image, you may end up with an ugly or dead image instead.

Resizing Images

Simply by adding width and height attributes, you can resize an image to your liking without having to do it manually.

<img src="photoofme.jpg" height="360" width="250">

Obviously height and width, you know those. The number in the quotation marks will be the height or width in pixels. It helps to know the dimensions of the original image, so you know how much bigger or smaller you want to make it.

Alternative Text

Now look at this code:

<img src="IMAGE URL HERE" alt="I'm wearing sunnies!">

The alt attribute indicates what text to be displayed if the image cannot be displayed (eg. it’s dead, a wrong URL or something). Also, when a viewer is not able to view the image, such as a blind person using a screen reader, they will be given an accurate description of the image when you provide this alternative text.

This attribute makes the image more meaningful, so whatever image you have, try to make an appropriate description.

In the browser Internet Explorer, when you hover your mouse over the image with the alt attribute, you will see a little “tooltip” showing the alternative text. This does not work in Mozilla Firefox and other browsers, so title="alternative text here" should be added to the image tag to allow this to work in those browsers. Browser compatibility is important so it is a good idea to include title as well as alt.