All language subtitles for 20 - Images.en

- Images, can you imagine a web with no images?

Images are everywhere.

The web is a web of text and images.

To put an image on a webpage we use the image element.

It's written as IMG.

And then there are four attributes we want to include

on every image element.

The source attribute, shortened to SRC.

The alt attribute, ALT.

And the width and height attributes.

Every image should have all four.

The source attribute is what tells the browser

which image file to load.

So let me paste the URL to our image into the source.

And you can see, the image is loading.

This URL happens to be an absolute URL

to the CDN on CodePen is storing it's images

for these demos.

It might seem that we're done and that's all we need,

but we're not done yet.

We also need an ALT attribute.

This acts as a substitute for the image

whenever the image can't be seen.

People who are blind, for example,

may use a screen reader that reads

the ALT text aloud to them.

This is what they experience of this image,

so let's make it interesting.

Shiny black dog looking pensive.

We don't need to say a photo of A.

That's overly wordy.

It's understood that this is an image or a photo.

We don't want to use dozens of words

to write everything about this photo,

we want to write about what's most important.

Why are we putting this image on the site?

What matters about it?

Our text can be funny or poetic.

It doesn't have to be dry.

If there's nothing for people to know about the image,

then we can leave the alt text blank.

Here's an example of when that might be the case.

In this header,

the name of the company is wrapped in an h1

and the company logo is an image.

So look at the alt text B,

maybe we could say happy dog.

It is a drawing and a happy dog.

But the name of the company is Happy Dog Daycare,

hearing happy dog, happy dog, daycare

isn't really a better experience.

We'll include the alt attribute.

So it's clear we thought about the alt text,

and then we'll leave it blank.

It'll be skipped over and nothing will be spoken aloud.

If we leave off the alt attribute instead,

there's a chance that the file name

for the image will get read aloud.

So let's not do that.

Next we need to let the browser know how big the image is

in pixels.

This image is 400 pixels wide and 300 pixels tall.

If we open it in something like Photoshop,

we can see that that's actually how big the photo is.

So I'll add that information to the image element

and the width and height attributes.

Now we don't include a unit on these numbers,

we just put the number.

It's understood to mean pixels, actual pixels.

It doesn't matter which comes first,

the height or the width.

In fact,

the order of attributes in an HTML element never matters,

we can put them in whatever order we want.

So why are we doing this?

The image has already loaded and it looks just fine.

It doesn't seem to like typing the width

and height did anything.

Well, once the file is already loaded and on the page,

the width and height attributes don't do anything.

The browser figured out how big

to display the image by downloading it,

looking at the file and its characteristics,

and using that to calculate the layout.

The problem is that if the browser has

to get the size information out of the file,

then it can't calculate this part

of the layout until after the image has downloaded.

If instead we tell the browser how big each image is,

then it knows immediately,

and that gives the browser a split second head start

in calculating the layout.

Have you ever started reading an article on the web

and it keeps jumping around as images load,

moving everything as you're trying to read?

Well, including the width and height attributes

on your images will fix that.

So that's the image element with the source, alt, width

and height attributes.