Dev.to

Enhancing Your Webpage with Media: Images, Videos, and More

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place. So far, we've only been dealing with text-based HTML elements, which is quite bland. 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 element, which is used to embed images into your webpage. Assuming you have a file structure like this: . ├── images │ └── image.png └── index.html To embed the image file, go to your index.html, and add an tag. 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. The alt attribute specifies the alternative text that will be displayed when the image fails to load. 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 does not exist anymore, or the user is visually impaired and 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 be loaded 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 loaded textual content down, which will lead to a bad user experience. Instead, you should specify a size for the images so that the browser will save enough space for them. When the image is loaded, it will simply fill the reserved space and not impact the overall layout of the webpage. You can use either the width or height attribute, or both. If both are specified, the browser will calculate the aspect ratio before the image is loaded. The aspect ratio will then be used to reserve enough space for the image, reducing or even preventing a layout shift when the image is loaded. ➡️ View Code Demo This may cause the image to be stretched or squished, but this problem can be solved using the object-fit property. Image link You can also turn the image into a link by placing inside like this: Vector graphics The images we discussed above are bitmap images, meaning they are made of pixels. When you zoom in on the images, they become pixelated. There is another type of image you will encounter called vector images. They are defined programmatically by paths, shapes, and so on. When you zoom in on the vector image, it will not get pixelated. In the field of web development, the standard vector image format is SVG, Scalable Vector Graphics. They are most commonly used to make icons, for instance: ➡️ View Code Demo As you can see, they look just like ordinary HTML elements with tags and attributes, and can easily be embedded into your HTML webpages. Like ordinary images, you can adjust their sizes by changing the width and height attributes. You don't need to know exactly how to make these SVGs, but if you are interested, there is a full tutorial here. Videos and audios The video and audio files can be embedded in a similar manner. For videos, you must use the element and also specify the src attribute. BigBuckBunny You may add the controls attribute to display the control buttons. BigBuckBunny Just like images, it is best to specify a proper size for your videos so that the browser knows how much space should be reserved. BigBuckBunny ➡️ View Code Demo Audio embedding works similarly. Audio file Embedding webpages Embedding webpages inside another webpage. This sounds strange, but it is actually very commonly used. For example, the CodePen demos hosted on this site are embedded this way using the element. As an example, assuming you have two webpages. . ├── embed.html └── index.html And you need to place embed.html into multiple places of index.html, this is what you can do: embed.html Document This is an embed. index.html Document Like any other embeds, it is best to specify a width and height for your . Obsolete embedding technologies To embed other types of media files, such as PDFs, you can utilize the or element. In practice, it is unlikely that you'll ever need to do this. If you need to display a PDF, simply link to it using . Historically, and are used to embed Adobe Flash components, but today, these technologies have become obsolete, so most modern browsers are not supporting them anymore.

Mar 18, 2025 - 18:34
 0
Enhancing Your Webpage with Media: Images, Videos, and More

This post was originally published at thedevspace.io. Everything you need to master web development, all in one place.

So far, we've only been dealing with text-based HTML elements, which is quite bland. 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 element, which is used to embed images into your webpage. Assuming you have a file structure like this:

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

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

 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.


  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 the alternative text that will be displayed when the image fails to load.

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 does not exist anymore, or the user is visually impaired and 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 be loaded 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 loaded textual content down, which will lead to a bad user experience.

Instead, you should specify a size for the images so that the browser will save enough space for them. When the image is loaded, it will simply fill the reserved space and not impact the overall layout of the webpage.

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

You can use either the width or height attribute, or both. If both are specified, the browser will calculate the aspect ratio before the image is loaded. The aspect ratio will then be used to reserve enough space for the image, reducing or even preventing a layout shift when the image is loaded.

➡️ View Code Demo

This may cause the image to be stretched or squished, but this problem can be solved using the object-fit property.

Image link

You can also turn the image into a link by placing inside like this:

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

Vector graphics

The images we discussed above are bitmap images, meaning they are made of pixels. When you zoom in on the images, they become pixelated.

There is another type of image you will encounter called vector images. They are defined programmatically by paths, shapes, and so on. When you zoom in on the vector image, it will not get pixelated.

In the field of web development, the standard vector image format is SVG, Scalable Vector Graphics. They are most commonly used to make icons, for instance:

➡️ View Code Demo

As you can see, they look just like ordinary HTML elements with tags and attributes, and can easily be embedded into your HTML webpages.

Like ordinary images, you can adjust their sizes by changing the width and height attributes.

You don't need to know exactly how to make these SVGs, but if you are interested, there is a full tutorial here.

Videos and audios

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


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

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


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

Just like images, it is best to specify a proper size for your videos so that the browser knows how much space should be reserved.


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

➡️ View Code Demo

Audio embedding works similarly.

 src=". . ." controls>Audio file

Embedding webpages

Embedding webpages inside another webpage. This sounds strange, but it is actually very commonly used. For example, the CodePen demos hosted on this site are embedded this way using the

iframe

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