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.
So, let's search for coffee.
There are a ton of coffee pictures here. I am going to grab one.
You can download it for free.
The image comes in different sizes. Small, medium, and original size, which is large.
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.
And then rename it to coffee.
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.
<!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>
We set the source to:
<img src="Images/coffee.jpg" alt="">
Here is how it looks on VS Code:
<!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>
For a one-on-one coaching, click here
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
<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.
<img src="fdImages/coffee.jpg" alt="A coffee mug on a table">
This is how it looks on VS Code:
<!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>
Back to the browser.
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:
<!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>
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.
<!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>
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.
<style>
img {
width: 200px;
height: 200px;
}
</style>
This is how it looks on VS Code:
<!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>
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:
<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!
Top comments (0)