How to Embed Media Files on Webpages

So far, we've only been dealing with textual elements. In practice, you can make your webpage more colorful by embedding media files such as images, videos, and more.

Images in HTML

Let's start with the <img> element, which embeds images on your webpage. Assuming you have a file structure like this:

text

.
├── images
│   └── image.png
└── index.html

To embed the image file, go to your index.html, and add an <img> tag.

html

<img src="/images/image.png" alt="This is an image" />

The src attribute specifies the path to the image file. You can use either relative or absolute addresses here, but absolute addresses are highly recommended to avoid confusion.

You can also link to a remote image file hosted on a different server.

html

<img
  src="https://images.unsplash.com/photo-1706014887612-ae5ca8cbb86e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgwNTYyNTF8&ixlib=rb-4.0.3&q=85"
  alt="This is an image" />

The alt attribute specifies alternative text to display when the image fails to load.

html

<img src="/images/image.png" alt="This is an image" />

The text should describe the content of the image and should never be neglected. Just in case the browser doesn't support the image type, the image file no longer exists, or the user needs to use a screen reader.

The lack of alternative text will have a negative impact on your SEO score.

Specify image size

When running your website in a local environment, the embedded images will load almost instantly.

However, in a production environment, the image file will take some time to be transmitted, which means the textual content will be loaded before the image.

This will cause a significant layout shift since the images usually take up a large space, pushing the textual content down, which will lead to a poor user experience.

Instead, you should specify the image size so that the browser reserves enough space.

When the image is loaded, it will fill the reserved space and not impact the overall layout of the webpage.

html

<img src=". . ." alt="This is an image" width="500" height="500" />

Videos and audios

The video and audio files can be embedded in a similar manner. For videos, you must use the <video> element and also specify the src attribute.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
  BigBuckBunny
</video>

You may add the controls attribute to display the control buttons.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls>
  BigBuckBunny
</video>

Just as with images, it is best to specify a proper size so the browser knows how much space to reserve.

html

<video
  src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  controls
  width="500">
  BigBuckBunny
</video>

Audio embedding works similarly:

html

<audio src=". . ." controls>Audio file</audio>

Embedding webpages

Embedding webpages inside another webpage. This sounds strange, but it is actually very commonly used.

As an example, assuming you have two webpages:

text

.
├── embed.html
└── index.html

And you need to place embed.html inside index.html, this is what you can do:

embed.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 
  <body>
    <p>This is an embed.</p>
  </body>
</html>

index.html

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
 
  <body>
    <iframe src="/embed.html" frameborder="1"></

Like any other embeds, it is best to specify a width and height for your <iframe>.

html

<iframe src="/embed.html" frameborder="1" width="500"></iframe>