Adding Images to a Web Page

Adding an image is simultaneously easy, and difficult to do. You might think, how can something be both easy, and difficult – well, it is easy to add the image itself, but it can be a challenge to master the process.

<img> Tag

Let’s start with the easy – the img tag. The image tag has a required attribute (src) and a strongly suggested attribute (alt), which is used to help those with visual impairments who are using a screen reader software. The good news is – there is no closing img tag, which keeps things simple.

The src attribute specifies what image will be used. You link to the file the same as you would an href attribute for a link. In fact, you can link to an image using either a relative, absolute, or even from an external web host. 

Suggestion: Use a subfolder under your main web page folder to store all of your images. It makes finding the files easier later on.

Note: Many web hosts will block someone trying to access one of their files from another server, as they don’t want you slowing down their servers.

The alt attribute, sometimes incorrectly called the alt tag, is used to provide a textual representation about the image. This way people who cannot see the image, such as the visually impaired, can use a screen reader, and be told about what the image is doing.

<img src="./images/person-typing.jpg" alt="person typing on a laptop computer" >

Here is a sample of what this image would look like when added to the web page.

Notice how the alt tag is not just duplicating the file name, it tries to describe what the image is about, in a short description.

While a web browser will display an image without the alt attribute, you will not be fully compliant with web accessibility standards if you do not use the alt attribute, so make sure you use it.

Hint: If the gender, age, or other physical attribute of a person isn’t important to the description, leave out that information as it doesn’t help the overall description of the image.

Adding Styles

Adding an image would seem to be fairly easy, and we’ve seen that putting in an image tag is relatively easy. However, when you insert an image into your webpage, you might assume that the text will automatically wrap around the image, however this is not the case.

By default, most browsers are going to display as an inline-block. So text doesn’t wrap around the image, instead only a line of text may appear next to the image. To change this, we need to float the image like we’ve seen before.

I generally have three styles I’ll apply to images in a website. One that is designed to float an image to the left, and it will add spacing via a margin to the right hand side of the image. Another will float the image to the right, and offer a right side margin for spacing. 

The final style will be applied to all images, and keep the image from being larger than the max width of our container so that the image never goes outside of its parent. To do this, we’ll set the max-width property.

img {
    max-width: 100%;
}
.img-left {
    float: left;
    margin-right: 15px;
}
.img-right {
    float: right;
    margin-left: 15px;
}

We won’t always use all of these classes, but it is a good way to start when creating your webpage.

There are a few other things you can do with styles to help make images look nicer and more modern. One of them involves rounding the edges of an image.

With CSS3, rounded edges are relatively easy. You create a CSS selector to apply the rounding to, and then you specify how much you want to round.

.rnd-img {
    border-radius: 10px;
}

Depending upon how much rounding you want, you can even make your image circular if you want, much like you find on a lot of social media sites. For this to work, a square image (where the height and width of the image are the same size) works best, and then set the border-radius property to 50%.

We’ve seen the hover psuedo class used with links previously. However, they can be used with other tags as well, such as the img tag. Sometimes we’ll use it to give the user feedback that an image can be clicked on, even if it’s not a link, or to help highlight the current element.

An example of this would be if you had a series of images which were only 80% opaque. You might increase this to 100% when the user moves their mouse over the image.

img {
    opacity: 0.8;
}
img:hover {
    opacity: 1;
}

Of course with CSS, you can modify any property. Having a border that changes color, or rounding of the edges can all make for a good change to bring an image to the user’s attention.

Adding Images to a Web Page was originally found on Access 2 Learn