How to Embed Images(in HTML)
Tags: html, webdev, beginners, programming
Published: 2023-10-10 08:36:53

Now, let's talk about embedding images in a bit more detail.

For this lesson, I am going to grab an image from `unsplash.com` which is where we can find a lot of beautiful and freely-available images.

![Unsplash Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gd2j7syq538w5x56ashz.png 'Unsplash Home Page')

So, let's search for coffee.

![Searching for the word coffee on the Unsplash search bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzj4y8vq6o9arkckul96.png 'Searching for the word coffee on the Unsplash search bar')

There are a ton of coffee pictures here. I am going to grab one.

![Downloading a coffee picture from Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whkx8498ccfc7jhnkiui.png 'Downloading a coffee picture from Unsplash')

You can download it for free.

The image comes in different sizes. Small, medium, and original size, which is large.

![The different sizes the image comes in](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv1rt8axlhgape7tm85n.png 'The different sizes the image comes in')

For now, we are going to grab this image in the small size.

Now, let's download it.

I am going to drag and drop it to the images folder.

![Dragged-and-dropped the image on the images folder on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oblqw48i6y4yhqaqz9ij.png 'Dragged-and-dropped the image on the images folder on VS Code')

And then rename it to coffee.

![Renaming the image to coffee on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yb9mz1whqdz0lte68ja.png 'Renaming the image to coffee on VS Code')

You want to give it a descriptive name. This is a search engine optimization tip. When we provide descriptive names for our images, search engines can better understand and index our pages.

Now, let's add an image element.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <img src="" alt="">
    </body>
</html>
```

![Added an empty image element in index.html on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1524ccb59trscy03q222.png 'Added an empty image element in index.html on VS Code')

We set the source to:

```html
<img src="Images/coffee.jpg" alt="">
```

Here is how it looks on VS Code:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <img src="Images/coffee.jpg" alt="">
    </body>
</html>
```

![Added the image source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5mvhxx09nvnvugwfpor.png 'Added the image source')

For a one-on-one coaching, [click here](https://karlgusta.gumroad.com/l/svqgep)

Now, what about the `alt` attribute? Well, I briefly mentioned that we use this attribute to provide textual description of the image. It is not compulsory but it is highly recommended for a number of reasons.

The first reason is to make our page accessible to visually impaired people. Some people need to use a screen reader to read the webpage out to them. So, with this alternative text, we can tell them what we are showing on the page.

That means, we should write a good meaningful description like `A coffee mug on a table`

```html
<img src="images/coffee.jpg" alt="A coffee mug on a table">
```

Don't write something like `Image` or `Image one`. That is pointless.

Now, the second benefit of providing an alternative text is that it helps search engines read this text and understand what we are providing here.

Another benefit is that if this image cannot be loaded for some reason, the alternative text is shown.

Let me show you what I mean.

Now I am going to add a typo here.

```html
<img src="fdImages/coffee.jpg" alt="A coffee mug on a table">
```

This is how it looks on VS Code:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <img src="fdImages/coffee.jpg" alt="A coffee mug on a table">
    </body>
</html>
```

![The image element with a typo in the source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uizlkwcg3pymwdfsd2lt.png 'The image element with a typo in the source')

Back to the browser.

![The browser page not showing the image. However it shows the alternative text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho2spmg70q97u99ngir7.png 'The browser page not showing the image. However it shows the alternative text')

Look, the image is not loaded, but we see the alternative text. This can also happen if there is a network connectivity issue. If the user gets disconnected, they can still see the alternative text.

So, let's remove the typo.

```<img src="images/coffee.jpg" alt="A coffee mug on a table">```

This is how it looks on VS Code:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <img src="Images/coffee.jpg" alt="A coffee mug on a table">
    </body>
</html>
```

![Removed the typo from the images source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67b2s3ppv8ju0zs19a49.png 'Removed the typo from the images source')

Now, let's talk about resizing images.

As I told you before, we can use CSS to resize our images.

Here in the head section, let's add a style element and apply a rule to our image.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
        <style>
            img {
            
            }
        </style>
    </head>
    <body>
        <img src="Images/coffee.jpg" alt="A coffee mug on a table">
    </body>
</html>
```

![Style tag with an empty img rule on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czrdc7q1i3wqye0soh5p.png 'Style tag with an empty img rule on VS Code')

Now, this rule is applied to all images on the page. This is probably not something we would want to do in a real world scenario.

In a real world scenario, you want to apply a class to this element, and then define rules for that class.

Let's give this image some styling.

```css
<style>
    img {
        width: 200px;
        height: 200px;
    }
</style>
```

This is how it looks on VS Code:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
        <style>
            img {
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <img src="Images/coffee.jpg" alt="A coffee mug on a table">
    </body>
</html>
```

![The image rule with the width and height styling on VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fqty1lsmd3nwsszurd4.png 'The image rule with the width and height styling on VS Code')

Now, there is a tiny problem in our image: it's kind of squashed. The reason is that we are dealing with a rectangular image, but we are converting it to a square image.

So, how can we solve this problem? Well, we have a property in CSS called `Object Fit`. It looks like this:

```css
<style>
    img {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
</style>
```

We can use `cover` so that the object covers its containing box.

What is a containing box? Conceptually, there is a box around every HTML document. We don't see this box, but the browser uses that box to figure out how that page should be displayed.

Happy Coding!