- To put an image on a webpage we use the image element.
It's written as img.
And then there are four attributes we wanna 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 me an absolute URL to the CDN
where CodePen is storing its 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.
It's overly wordy.
It's understood that this is an image or a photo.
We don't wanna use dozens of words
to write everything about this photo.
We wanna write about what's most important.
Why are we putting this image on the site?
What matters about it?
Alt 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 what could the alt text be?
Maybe we could say happy dog.
It is a drawing of a happy dog,
but the name of the company is Happy Dog Daycare.
Hearing Happy Dog Daycare isn't really a better experience.
We'll include the alt attribute
so it's clear we've 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 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.
Sometimes, we wanna display
a big beautiful high resolution image
for people with big screens
and then shrink it way down
for people on phones on small screens.
CSS can do this, one image file can be shown at any size
but there's a problem.
A big high resolution image contains millions of pixels
and all that data can make the file size pretty big
which takes a lot of time to download
on a slow network connection
and can use up people's data plans
and in some markets cost them a lot of money.
We don't wanna deliver unneeded high resolution data
to small screens.
Instead, maybe we should just make
all of our images much, much smaller.
Physically smaller, less color data,
fewer pixels, more compressed.
That will work well for a smaller screen.
But then if we send that file to everybody,
people with big desktop monitors
won't get to see a large glorious photo.
They'll get a low quality photo blown up really big
or our web designs are limited
to keeping every image physically really small.
So what can we do?
Well, we can use the power of HTML
to deliver different image files to different size screens.
We can make several different files
and list them as a set of options in our HTML
and let the browser decide which image to download.
It can do so in coordination with the operating system
while taking the device hardware capabilities
and the network speed into account as well.
Let's first start with the basic code
for loading an image on the page.
I have an image element with a source attribute
that points to an image file
with the alt text and the width and the height,
just like we talked about
when I first introduced the image element.
You can see here that I wrote 480
in the big white text on the image itself.
So it's obvious which image has loaded when.
Now, this image is 480 pixels wide
and it will look good when it's displayed at 480 pixels
or smaller on some devices.
More and more screen these days, however are not 1X screens.
The retina screens, high density, DPI, super retina,
ultra fancy billions of whatever the latest name is
for these amazing screens.
Basically, there are a bunch of screens out there
with a pixel density is 2X, 3X, 4X,
where more data can be displayed by the screen.
Right now, my older computer has a 1X screen.
My newer computer has a 2X screen.
I think my phone has a 3X screen
and I'm not really sure what the rest of my devices are.
I just know that I want photos to look good.
The simplest way to support these different screens
is to create multiple copies of our image
in different resolutions and then tell the browser that
those copies are available.
The device can then decide what it wants to do.
The browser will look at the screen density,
the network connection, the user settings
and decide which image to use.
Even if someone has a high resolution screen
the browser might decide to download
a lower resolution image.
I've created four copies of this photo
at 480, 960, 1440 and 1920 pixels wide.
Let me duplicate this basic HTML for displaying an image
so we can change the second one and compare the results.
We're gonna still write the code for displaying the image
in a normal way.
This is good for older browsers.
We need the source attribute
and we'll put our 1X version of the image here.
We need the alt text just like before
and the width and the height.
It will definitely still improve in performance, keep that.
It's okay that the pixel numbers won't always be accurate.
The aspect ratio is what's important here
and 480 by 360 calculates to a four by three aspect ratio.
All of these photos are four by three.
Now let's add a source set attribute.
Inside of it we'll list the images
that we are offering the browser as choices.
It's a common separated list with the URL to a file
the space, the resolution like 2X, 3X, 4X, 1.5X
whatever, a comma, and the next one.
Now the browser will swap out one version of this image
for another based on what it thinks is best.
(upbeat music)