- [Instructor] In HTML, an image
is a so-called replaced element.
That means the image doesn't actually live
in the HTML documents.
Instead, we place an image element in the document,
and then we refer to the location where that image exists.
In this case, it sits under a folder called assets,
and the file is called dog.jpeg.
What happens when this is served
up to the browser is the browser says,
okay, so there's going to be a replaced element here,
so I will cut out a hole,
and then I will place whatever's
at the other end of this source attribute in that hole.
And because I haven't specified anything
about how the browser is supposed to handle that image,
it'll just display the image in its intrinsic size.
Jumping over to the browser,
you can see right away that this looks a little bit odd.
There's clearly a picture of a dog,
but it's squished down in the right-hand corner.
So I have to scroll to the side
and then scroll down to actually see the dog.
It's very large.
It is not positioned correctly.
And although it's placed in the page,
it's not how I wanted to place it in the page.
That is because I have yet to define how the browser
is supposed to handle it,
and right now the browser is just saying,
you're pointing at a file,
I'm just giving you the file.
To solve this, we need to add some more context
to the image tag in HTML.
And we also have to add some basic CSS.
The first thing I'll do is go into my style sheet
for this document and set up a new image style,
and then say width, colon, 100%.
And height auto.
Technically, you don't need to say height auto,
'cause that is the default.
But I find in some cases
when you start messing around with images,
it's a good idea to have height auto defined
because it might be accidentally overwritten
by another style.
What happens when we set image width to 100%
is the browser will say, what is the size
of the container that holds this image element?
And then set the width of the image itself
to the size of that container.
So when I save this and go back,
you'll see the image width is now equal
to the size of the container that holds the image,
which is this gray box up here.
What you also see is the image is much taller
than the container because the image is not being confined
to the size of the container, it's just being confined
to the width of the container.
We could if we wanted to turn these on their heads
and say 100% height and then auto width.
And when you go in, you'll now see the image is scaled
to the height of the container
and then not to the width of the container.
This is useful in some rare cases,
but it's a bit of an anti-pattern
because in most cases you want to scale an image
to fit the width of the container
because you have a responsive layout.
So, I'll return this to what I had.
100% width and auto height.
That's all we need to do for CSS.
But there are a couple of more things we need to do
with a markup.
You see, when we define an image just like this,
we're basically not telling the browser anything
about the image.
There are a couple of pieces that are missing
that are vital for the image to function properly
in all circumstances.
The first one is, we need to provide an alternative text
for the image to describe what the image
is in case someone cannot see it.
Either because it's not being loaded,
or because they're using a non-imaging browser,
a text-to-speech browser, or something else.
All images must have an alt attribute,
but not all images need to have the actual text
in the alt attribute.
So I'll say alt equal,
and then here you can either leave the alt blank
if the image either has no information in it,
or if you've described the image using
a figure caption or something else,
or you can actually describe the image.
So I'll say golden retriever,
I think that's what it is.
It looks like it.
Now this alternate text will display any time
the image is not being displayed.
But that's not all, we should also tell the browser
the proportions of the image.
Now for the image element, there are two attributes
you can use, height and width,
and you can set them to the size of the image.
So like I said, in this case it's 1800 pixels
by 1800 pixels.
And you'll notice I'm not saying pixels here
because I'm not setting the actual physical size
of the image.
I am declaring the proportions of the image.
If you learned web design a while ago,
you may have learned there's no need to put
in the width and height attributes
because we now have a responsive design.
The reason why we've started doing it again
is because we can tell the browser
the proportions of the image,
so the browser will build a box
that is proportionally correct,
even before the image itself is loaded.
That's important because browsers now wants
to lazy load images,
meaning the image is not necessarily loaded right away.
And we can also control that behavior.
So if we say loading equals,
and here we can then either say nothing,
which means we'll rely
on the browser's default loading behavior.
We can say lazy, if we want the browser
to only load the image if the image
is close to the viewport when scrolling.
This is what you should probably do
for all the images on your page.
Or you can say eager if you want the image
to load right away even though it's not in the viewport.
That might be in the case of rapid scrolling
or something else where you need
to have an image loaded right away.
But for most cases, you want to set this attribute
to lazy so that the browser only loads
in the image when it needs it.
And this width and height attribute allow the browser
to cut out a hole that's proportionately correct
for the image, so that if the browser hasn't quite loaded
the image yet when the user gets to it,
at least there's a hole that fits
and you won't have this situation
of content skipping around on the page.
So now we have a complete image element.
A source attribute pointing out where the image is sitting.
An alt attribute describing the image.
A width and height attribute defining
the proportions of the image.
And finally, the loading attributes saying
whether or not we should load the image lazily.
And in styles, we have set up the default style
of width 100 and height auto,
so that the image will also be proportionally correct
when we display it.
This is the baseline for all images on the web,
and this is the baseline you should be following
any time you add new images to a website.