Media elements — Content layout fundamentals

• Images
• Using multiple versions of an image
• Video and audio
  • Video files
  • Audio files

The layout is more than just placing blocks and marking up text. Designers use different media elements to make their page look more attractive, including images, audio, and video elements. This, along with a good text layout, is what makes the whole layout.

Markup developers must know the nuances of inserting various elements. This affects both the speed items are loaded, and how they're displayed on different devices. For example, there is no need to load a 1980-pixels wide image, when the screen resolution is only 768px across. The user, or rather their network, will be forced to bear the load of this image.

In this lesson, we'll look at inserting media items and how HTML helps us optimize how they're being loaded.

Images

Images are undoubtedly the most common media element a markup developer encounters. Contextual images and backgrounds are all images that need to be loaded. The image can be inserted using HTML or CSS depending on its purpose.

To insert an image with HTML, we use a special <img> tag. This is an unpaired tag whose main attributes are:

• src - the path to the image
• alt - alt text for the image

<img src="../images/hexlet.png" alt="Hexlet Logo">

The alt attribute is often forgotten by markup developers. It's usually only shown when image loading fails, so it's often filled out in any old way. Not a good look! People who use screen readers also need this to get an idea of what's in the image. If the description is “Picture 1," then visually impaired people might never understand what was there.

It's important to understand what should be in the alt attribute. Imagine that an image showing the results of a social survey didn't load. What description options could there be?

• Social survey results - that describes the image, but not what was in it. So, what were the results of the survey?
• Infographics - we've lost the idea here, what kind of infographics? If the text didn't have a headline before it, then that's not too great
• Social Survey Results. Windows is used by 30% of respondents. Linux is used by 50% of the respondents. 20% use DOS. It's a long title, but it gets the point across

Working with such descriptions is a tricky thing. It's not always possible to describe images in this way. After all, the data may come from the server and the markup developer might not be able to do anything about the alternative text. It is a good form to duplicate the information in the text next to the image. Don't rely solely on visual presentation, sometimes a couple of lines of text can help more than a beautiful and detailed image.

Images inserted with the <img> tag have an unpleasant feature in that they're not compressed to suit the device. If your image is 1280 pixels, it will be the same on any screen resolution and in any container. Even the width or height of the container doesn't play a role.

The container size in the example above is limited to 500 pixels. To make it more visible, I added thick borders. As you can see, the image itself just happily went out the borders. That's not what we want. Especially considering the large number of devices that the layout designer has to deal with.

Two properties can be used to solve this problem:

• max-width. By specifying a value of 100%, you can prevent the element from occupying a width greater than its parent.
• height. This value is often set to auto. This will maintain the correct proportions.

The result is the following CSS code, which you'll often encounter during projects:

img {
  max-width: 100%;
  height: auto;
}

If you look closely at the example, you can see a small indentation between the picture and the bottom border of the block. This is a common issue at the early stages of your career, but it is easily handled.

This effect is due to the vertical-align property, which is responsible for the vertical alignment of the element. The default value is the baseline. In future courses, you'll learn more about how exactly this alignment works. What's important to us now is the practical element and actually solving the problem. To do this, simply specify the middle value for the image's vertical-align property.

img {
  max-width: 100%;
  height: auto;

  vertical-align: middle;
}

Using multiple versions of an image

There is a special construction in HTML that allows you to use different versions of images. This is a great way to adapt images for different devices. The main advantage is that the browser will load a certain image depending on the resolution of the device. Media queries are used for this purpose.

The <picture> tag is used to specify multiple versions of the image, and it has the following structure:

<picture>
  <source media="media_query_1" srcset="image_path_1">
  <source media="media_query_2" srcset="image_path_2">
  <source media="media_query_3" srcset="image_path_3">

  <img src="hexlet-images.png" alt="Image description">
</picture>

• There must be an <img> tag inside the <picture> tag, this is the main image that will be loaded if the other options don't work
• We use the special <source> tag to contain other image options. They'll be added depending on the media request specified in the media attribute

<picture>
    <source media="(min-width: 1024px)" srcset="https://www.fillmurray.com/1280/500">
    <source media="(min-width: 700px)" srcset="https://www.fillmurray.com/700/360">

    <img src="https://www.fillmurray.com/500/360" alt="Bill Murray">
  </picture>

Go to the CodePen website and try resizing your browser window. You'll see that the image will change at some resolutions.

Video and audio

Inserting video and audio files with HTML is very similar to adding images via the <picture> tag. You need a common container and several <source> elements inside it. The main difference is the large number of additional attributes that allow you to add or remove interactive elements, and can also affect preloading.

Video files

Videos are added using the <video> tag. All video files are added inside this tag using the <source> tags. The exception to this is when there's only one video file. Then it can be added as an attribute for the <video> tag.

<video src="./video/hexlet-presentation.mp4"></video>

If the video is in more than one format, they all need to be given using <source> tags, similar to adding images.

<video>
  <source src="./video/hexlet-presentation.mp4" type="video/mp4">
  <source src="./video/hexlet-presentation.webm" type="video/webm">
  <source src="./video/hexlet-presentation.ogg" type="video/ogg">
</video>

You may notice that <source> contains the same videos, just in different formats. Why does it matter? The thing is that not every browser supports all possible video formats. Browsers are improving and widening their support for formats every year, but some older browsers still cause problems. The widest-ranging format for browsers is mp4. You don't have to worry about the browser not reading the video file if you use it. Different formats give different degrees of compression and quality. This is why you should specify more than one format. The browser itself will choose the required one.

The <video> tag has many wonderful attributes. You don't need to know all of them right now when you're just starting, but we'll have a look at the main one.

• autoplay automatically plays the video. Don't add it unless absolutely necessary. You always want to show the best of the page, suddenly playing a video will likely just annoy the user
• controls adds interactive controls, such as start, stop, and volume
• muted turns off the audio track. If the only important thing in the video is visuals, and background music is of secondary importance, then it's worth adding this attribute. If necessary, the user will turn on the sound themselves
• preload specifies whether to preload the video before interacting with it. It can take one of several values:
  1. metadata loads metadata. These include the title of the video and its length
  2. auto loads the video as soon as the page is opened. If the video is a must-see item (for example, after the end of an article), you can use auto: the video will have already been downloaded by the time the user sees a page. Be careful, don't forget to think about mobile internet users
  3. none - the video isn't loading until the user has interacted with it
• poster is a link to the image that will be used as a preview of the video

Let's add some attributes to the video and see how they work.

<video controls muted preload="none">
  <source src="big_buck_bunny.webm" type="video/webm">
  <source src="big_buck_bunny.ogv" type="video/ogg">
</video>

Audio files

The process of inserting audio files is almost the same as inserting a video file. Using the <audio> tag, you can specify either a single file or multiple files, using the nested <source> tags.

<audio src="audio.mp3" controls></audio>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
</audio>

Do it yourself

Create an HTML file inside which you place some media elements you find on your computer. Try using various attributes.