From the course: HTML Essential Training

Images - HTML Tutorial

From the course: HTML Essential Training

Start my 1-month free trial

Images

“

- 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.

Contents