Adding Images in CSS

We scan the internet for entertaining and educational stuff, which we often locate as plain text. HTML offers methods to enhance this simple text, including inserting rich media (pictures, audio files, and movies) and inline frames (material from another website).

Websites have always supported incorporating photos, music files, movies, and inline frames. Inline frames and pictures have typically had decent browser support. Furthermore, even if adding movies and audio files to a website has been possible for a long, the procedure has always been a bit difficult. Thankfully, this procedure has improved and become simpler with support straight from HTML.

These days, we may utilise photos, music, video, and inline frames without restriction because they work with many major browsers.

Adding Images

Images are added to a page using the inline element. The element is empty or self-contained, meaning it exists as a single tag and does not enclose any other content. A src property and value that identify the image's source must be supplied for the element to function. A URL, usually pointing to the server where a website is hosted, is the value of the src property.

The alt (alternative text) element, which describes an image's contents, should be combined with the src attribute. Search engines and assistive technology use the alt property value to help communicate an image's purpose. The alt text will be shown in its stead if the image is unavailable.

The missing image has been replaced with the alternative text, "A black, brown, and white dog wearing a kerchief."

Accepted Picture Formats

There are several file formats for images, and various browsers may accept (or not support) different formats. Images in GIF, JPG, and PNG formats are generally the most widely accepted online formats. These days, jpg and png are the most used file types. For speedier load times, the jpeg format offers high-quality photos with lots of colours at a reasonable file size. Images with low colour counts or transparencies work well in the PNG format. JPG pictures often represent photographs, whereas PNG images represent icons and background patterns.

Sizing Images

The size of an image is crucial because it tells the browser how big the picture should be even before the page opens, allowing the browser to reserve space and render the page more quickly. Images may be sized in a few different ways to make them fit properly on a website. One way is to use the width and height properties within the HTML element.

CSS's width and height attributes may also be used to resize pictures. The CSS properties will be utilised first when using CSS properties in addition to HTML attributes.

When one of the dimensions is specified, the other dimension will automatically change to preserve the image's aspect ratio. For instance, we may set the height of an image to 200 pixels, and the width will change to match if we want the picture to be 200 pixels tall but aren't as worried about how broad it is. Adjusting an image's width and height will also function, although doing so can damage the image's aspect ratio.

While identifying an image's original size with the width and height elements directly in HTML adds some semantic value, managing several pictures that must all be the same size may be challenging. In this case, resizing the photos with CSS is standard procedure.

Positioning Images

There are several methods we might employ to arrange photographs on a webpage. Images are, by default, positioned as inline-level components, but you can use CSS to adjust their positions. Specifically, you can use the float, display, and box model properties which include padding, border, and margin to change the locations of your images.

Inline Positioning Images

The element is an inline-level element by default. When an image is added to a website without any styles applied, it will be positioned in the same line as the surrounding content. It can also result in significant vertical gaps inside the line when an image appears since the height of the line will be adjusted to match the height of the image.

Gatsby is a hound mix puppy with black, brown, and white coats that enjoys getting belly rubs and screaming at fire engines. Despite napping most of the day, he is not slow to pursue any birds crossing his path.

Images for Block Positioning

When an image has the display property added to it and its value set to block, the picture becomes a block-level element by default. This allows the surrounding information to be positioned above and below the picture, making it appear on its line.

Syntax:

This section is labelled "teaser col-1-3"> <h5>Speakers</h5> <a href="speakers.html"> <img src="assets/images/home/speakers.jpg" alt="Professional Speaker"> <h3>Top-Rated Speakers</h3> </a> <p>More than twenty amazing speakers are joining us from all around the world to tell their tales.<p> </section>

Positioning Images Flush Left or Right

Showing an image as an inline-block or even an inline-block is not always desirable. The picture can be positioned to the left or right of the element it contains, with the other information wrapping around it as needed. To do this, we utilise the float property with a left or right value.

The float attribute was first designed to position pictures to the left or right of a contained element, as we remember from Lesson 5, "Positioning Content." We will use it for its intended purpose now.

A picture floating on its own is a good place to start, but everything else will line up against it. We will utilise the margin attribute to show some distance around it. We may also construct an image frame using the padding, border, and background attributes if desired.

When to Use a Background Image vs Image Element

• A web page can have pictures added using two main methods. One method is to utilise the element inside the HTML discussed here. An alternative method for adding a background picture to an element in CSS is to use the background or background-image property. Both options are functional, but they each have certain applications.
• When a picture has semantic significance, and its content is pertinent to the page's content, using the element within HTML is the better choice.
• When the picture is integrated into the page's design or user experience, the recommended choice is to utilise the background or background-image property in CSS. As a result, it has no direct bearing on the page's content.
• The element is widely used, and its addition to the HTML standard forever altered the foundation of website development.

In Practice

Let us look at our Styles Conference website and see where we can add a few photos now that we know how to add and arrange images on a page.

Let us start by enhancing our home page with a few photos. To be more precise, we will include an image advertising a couple of our pages in each teaser part.

But first, let us make a new folder called "images" inside our "assets" folder before we start writing code. Next, let us make a new " home " folder inside the "images" folder, only for photos on our home page. Three files will be added to the "home" folder: speakers.jpg, schedule.jpg, and venue.jpg. (You may download these pictures as a zip file for reference.)

Then, every teaser section in our index.html file has an element enclosing a and an element. Let us shift the element above the element and add a new element in its place. Every element will have an alt attribute value that describes the contents of each picture, and the src attribute value will match the folder structure and filename we put up.

This section is labelled "teaser col-1-3"> <h5>Speakers</h5> <a href="speakers.html"> <img src="assets/images/home/speakers.jpg" alt="Professional Speaker"> <h3>Top-Rated Speakers</h3> </a> <p>More than twenty amazing speakers are joining us from all around the world to tell their tales.<p> </section>

After adding a few photos to our home page, we must ensure they match the page layout and tidy up their styles.

Let us convert the pictures in the teaser sections to block-level elements as they are, by default, inline-level components. To ensure they don't get wider than the width of each of their columns, let's also set their maximum width to 100%. Changing this width number is crucial so our pictures can resize to fit the columns' widths.

Finally, to give the pictures some breathing room, let us slightly round the corners and add a 22-pixel bottom margin.

Our CSS will look like this when we incorporate these new styles into our current home page styles, utilising the teaser class as a qualifying selector for the elements:

Syntax:

Audio Fallbacks & Multiple Sources

Currently, the three most common audio file types are supported by different browsers: ogg, MP3, and WAV. We'll need to employ a few audio fallbacks, which will be inserted inside the opening and closing tags of a <audio> element to provide the optimum browser compatibility.

First, we will take the src property out of the <audio> element. Instead, we'll use the <source> element inside the <audio> element with a src attribute to specify a new source.

Each audio file type may be listed one after the other by using a <source> element and src property. We will utilise the type property to assist the browser in rapidly determining which audio kinds are available. A browser loads an audio file and ignores all other files when it detects the format.

All browsers might not support the <audio> element because it was first introduced in HTML5. We may offer a link to download the audio file after any <source> elements inside the <audio> element.

To guarantee that the audio player is visible in browsers that support the element, the controls Boolean property is included in the <audio> element of the preceding code. Instead of having a src property, the <audio> element encapsulates three distinct <source> components. Every <source> element has two attributes: a type property that indicates the kind of audio file and a src attribute that points to a different audio file format. If a browser cannot detect any audio file type, the anchor link for downloading the element will be shown as a last resort.

The <video> element was added to HTML5 with the <audio> element, which is quite similar.

Adding Video

In HTML5, adding audio and video is rather comparable. Instead of using the <audio> element, we utilise the <video> element. The same fallbacks and properties (source, autoplay, controls, loop, and preload) are also applicable.

If the controls Boolean property is empty, the <audio> element audio clip is not shown. Videos will show up if the control's Boolean property is left unspecified. However, viewing is somewhat challenging unless the autoplay Boolean feature is also applied. Generally speaking, unless there is a compelling reason to prevent users from being able to start, pause, or repeat the video, it is best practice to add the controls Boolean feature.

Videos take up space on the page, so it doesn't hurt to specify their dimensions. In CSS, the width and height properties are most often used for this. This makes it easier to control the size of the video and keeps it inside the page's suggested layout. Like photos, giving a size also enables the browser to generate videos more quickly and allows the appropriate amount of space required for the video to be shown.

Including a video demonstration

This video demo is hosted locally for speed reasons, but you may still study and change the code on CodePen.

Customizing Audio & Video Controls

By default, the individual browsers set the <audio> and <video> element controls. Depending on how the website is designed, there may be greater control over the media player's appearance and feel. If so, it should be possible to create a customised player. However, it will need some JavaScript to function.

Furthermore, the value of the alt property should indicate that the image is a control and needs the appropriate interaction for it to function if a customised player utilises the <img> element as a control.

Poster Attribute

The poster attribute is one more attribute that may be applied to the <video> element. With the poster feature, we may designate an image (as a URL) that will appear before the start of a movie. The Earth video poster in the example below is a screen grab from the video.

Video Fallbacks

Video fallbacks are also required, like the <audio> element. Within the <video> element, the same markup syntax is used, with several <source> components for each type of file and a fallback to plain text.

Using an embedded video from Vimeo or YouTube is an extra fallback option that might be utilised instead of a plain text fallback. These websites that hold videos let us upload them, offer a typical video player, and use an inline frame to embed the movies into a page.

HTML5 Audio & Video File Formats

The file formats needed for the <audio> and <video> components vary, as does browser support for these elements. Every browser has a recommended format for audio and video files.

A fast search will yield a plethora of possibilities. A few applications can assist in converting an audio or video file into multiple formats.

Adding Inline Frames

Embedding another HTML page inside the current page is another method of adding content to a webpage. An inline frame, or <iframe> element, is used for this. The content from the embedded HTML page is shown on the current page when the <iframe> element accepts the URL of another HTML page in the src property value. The value of the src property can be either an absolute URL for a completely external page or a relative URL to the page on which the <iframe> element appears.

Many websites embed material from external websites, including YouTube and Google Maps, onto their pages using the <iframe> element.