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:

<img src=”” title=”The image title” alt=”Alternative text” />

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

The src specifies the source of your image and should be the address of the image itself.

The title is optional and can include a title explaining the purpose of the image.

The alt is not optional and must be included to help someone with poor eyesight use a screen reader to interpret what the image shows (for example, if the picture is of your dog, it should include alt=”picture of our greyhound dog, Lucy”.

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:

<img src=”” title=”Image title” alt=”Alternative text” />

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:

<img src=”the-image.jpg” style=”” title=”title” alt=”alt text” />

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!

About The Author

Website Help Author Zachary Coyne Zachary Coyne is a freelance website designer and developer in Tucson, Arizona. Zach has been designing, developing, fixing and updating websites for the better part of a decade. He enjoys helping people learn how to fix and update their websites, and offers one on one website help by the hour.

Post a Comment

Your email is never published nor shared. Required fields are marked *