How to Add an Image to Your Website

Almost every website features a combination of text and images. Adding images to your web page is a pretty easy process, whether you’re coding your web page by hand or using a website builder.

Learning the right way to embed images in your web page takes only a few minutes and will ensure your images display correctly and function how you intend them to.

The Basic Structure of an Image Tag

Whether you’re clicking an “insert image” icon in your website builder like WordPress or are coding your web page html by hand, the end result is the same basic html image tag that looks like this:

The different parts of the image tag should be pretty self-explanatory.

Uploading Images to Your Server

Before you can link to an image, you first need to upload it to your server using FTP. Once you’ve uploaded the image to your server (you should probably place it in a folder called “images”) you can now embed it in your web page. Some website builders like WordPress do the uploading for you.

Embedding the Image in Your Web Page

Once you’ve uploaded an image, you can now embed it in your web page. Embed the image by adding the following html to your web page:

Note: Remember to include the “/” before the end of the tag, as this is the correct format of the html tag and tells the browser this tag is closed. People often forget this, and while it may appear correctly in the browser, it’s not right and can cause problems.

Linking the Image to a Web Page

If you know how to add hyperlinks to your web page, you can also make an image that is itself a link. This can be useful if the image is a thumbnail that links to the full-size image, or if the image is actually a button.

To do this, simply wrap the image tag inside of a link tag.

Naming Your Images

When you name your images, it’s important to correctly format your file name to ensure the image will work how you want it to. Avoid using spaces in the file name, and use only lowercase letters. For example, ps0023 Olympus 2010.JPG is much more appropriately named lucy-the-greyhound.jpg.

Not only will this ensure your image will embed properly when you add it to your page, but it will also give the image a chance at appearing in Google’s image search results.

Aligning Your Image within Your Page Content

Once you’ve added an image to your web page, you can now adjust how it aligns on the page. To do this, you will use CSS. CSS is pretty simple, and you simply need to add a style argument to your image tag as follows:

Floating an image to the side of the page

If you want your image to appear to the side of the screen with text wrapped around it, add float: left; or float: right; inside of the style parentheses.

Adding space around the image

If you want to add some space around the image so the text doesn’t touch it, add a margin to your style as follows: margin: 15px; (or whatever amount of spacing you feel is needed).

Adding a border to the image

To add a border to your image, you can specify a background color and padding. The padding will create space around the image, and the background color will appear in this space. Try this: background: #ccc; padding: 10px; (replace the background color code with whatever color your prefer).

If you want to add a thin border around the padding for additional sexiness, add this as well: border: 1px solid #666;

Now you know the right way to add images to your web page. Good luck!