- Websites with text only can be effective, but there may come a point when you decide that you want to include images in a page. In this video, we'll go through a few things. you need to keep in mind including the file format, how to embed inline images and how to hyperlink to images. There are loads of different file formats, but not all browsers support them. To keep this video as relevant as possible, I advise you either use GIFs, JPEGs, PNGs, WebP's, and SVGs as your format of choice, because nearly all browsers support them. While all three of these formats allow you to have still images on your page, GIFs have a unique feature which allows you to create short looping sequences. While GIF might look like a short video, it's actually more like a flip book sequence of still images played in rapid succession, which then look like a video. Okay, so those are the file formats you should be using. How do you go about actually inserting an image into a page? There are two main ways you can do this using either inline or hyperlinked images. When you use an inline image, you're actually inserting the image directly into the page. The image will need to be included within the file structure of the website and the tags within the page will point directly to it. When you hyperlink to an image on the other hand, the image could actually be anywhere and doesn't need to sit in the file structure of the website. Let's take a look at how you can add an inline image into a page. So here's a pretty standard page with a head, a title, and some body text. Let's add in a line break too just to give the image some space with a br tag. Now, I'll open a image element with the image tag like this and use the src attribute with a relative URL, which in this case is a scroll GIF. Great, now to make sure the GIF is accessible and can be processed by a screen reader, for instance, I need to add another attribute called the alt attribute. I can do this by simply adding in alt equals and then the name of the image, which of course is scroll and then close the tag. Let's say you want to add a hyperlink to an image. This is relatively simple to do actually. All you need to do is nest the image element inside the anchor elements in the same place that the text you would normally hyperlink would be. If that sounds confusing, don't worry about it. Let's take a look at the code. So first up some intro text, maybe something like select the link to return to the QA home page. And then I'll follow this up by opening an anchor element and add my href. Let's use QAs website as an example for now. So this will look like this, right? Now, where you would normally add the text, you would want to hyperlink. All you need to do is add the image instead. So let's use QA's logo for this. First, I'll open an image tag, then use the src attribute to point to an image. This would be an absolute or a relative link, but I'll use a relative URL for now, which may be, will be qalogo.jpeg. Of course, I want to include some alt text and this will look like this. And that's it for this one. As you can see, adding inline images into a page really isn't tough and you can use either relative or absolute URLs to do it. You can also embed hyperlinks into images if you want to, which can be really useful from a user perspective as well.