Learn how to master the HTML image

An HTML image is highly customizable, making it ideal for building a webpage. Use this guide to learn the basics of how to input an image onto a site.

How to correctly input an HTML image for a webpage

As you well know, an image changes the dynamic of a webpage, giving it life through a visual dynamic. In order to input an image with HTML that is optimal and accessible to all users, there are different requirements that need to be met. The first step is the img tag, <img>. This is followed by the src, which clarifies the URL of the image. For example, if you had an image of a chair saved as chair.jpg, the full HTML syntax might read: <img src=”img_chair.jpg”>.

Note – this is only a partial piece of this code. The next step is completing the alt attribute.

The alt attribute is a description of the image for users who are unable to see the image. It explains in brief detail what the image entails for vision-impaired users or people who cannot load the image on their connection. The alt code is: alt= followed by the description. For example, using the above chair.jpg image, the alt might read: alt=”Large brown chair”> So to put it all together, the entire code would read: <img src=”img_chair.jpg” alt=”Large brown chair”>.

How to change the size of an image

The above steps are the heart of the process, getting your image onto the webpage. Now come the minor tweaks and adjustments you’re allowed to make. In order to change the size of an image, you’ll need to assign a number value pertaining to the height and width of the image.

To do this, simply type width=”x” followed by height=”x”> Using our chair.jpg example, if we wanted to make the chair.jpg image 600×400, our HTML syntax would read as follows: <img src=”img_chair.jpg” alt=”Large brown chair” width=”x” height=”x”>. Notice that we now put our closing > after the end of the entire text rather than after chair”.

Finding and using images from elsewhere

Remember our src code, which gives the location of the image? Sometimes the src needs to specify subfolders for certain images. If this is the case, you’ll have to include the folder name in the src. For example, <img src=”/new folder/chair.jpg”.

In order to specify images from another server, you’ll have to use the src code to give that individual server’s address. If our chair.jpg picture was being hosted on a website called furniturepictures.com, our code might look something like this: <img src=”https://www.furniturepictures.com/new folder/chair.jpg” alt=”Large brown chair”>.

Other variations to consider

There are other ways to change the function of your image. The most common way to alter an image is to make it into a clickable hyperlink. In order to do this, you need to bracket your existing code with an <a> tag.

We’ll use our previous example of the chair image to demonstrate, making it linkable to a website called bigbigchairs:

<a href=”https://www.bigbigchairs.com”>

<img src=”img_chair.jpg” alt=”Large brown chair” width=”x” height=”x”>

</a>

Note that the only changes we made was adding the <a> tag before and after our previous code.

Now that you have a basic understanding of HTML images, give them a shot. You’ll be amazed at how nice they can complement the rest of a webpage.