Web_Dev_Grad

For many images on your website, you may wish to use stock photos or images that you have come across on the internet. In my case, I have either used personal images that I have the rights to or have sourced some images from free stock photo websites. It is best to credit the photographers if you use other people's work. The websites that I have used most to populate my sites with images have been Pexels and Stockvault.

After downloading your images, it is good to have them in a web friendly format. Some image formats have large file sizes and can take a long time to load, creating a frustrating experience for your users. So unless you intend to recreate the internet experience of the early 2000s, you should convert your images into web friendly formats such as .webp. For this, I have found that Cloud Convert works wonderfully.

Image elements are self-closing and generally follow the form of:

<img src="filename.webp" alt="image description" width="200" height="200"> 

• src="filename.webp" defines the source of the image; where to get it from. If it is saved in your project, this would be the file path of the image. If it is stored online on some image sharing website such as Imgur, you would need to put the url for the direct link here.
• alt="description" is the written description of the image. This serves 2 purposes. Firstly if, for any reason, the image fails to load, this text will be displayed instead so that the user can read what the image would have been. Secondly, this is used by screen readers to describe the image to users with visual impairments, allowing you to create a truly accessible experience for your users.
• width="200" height="200" specifies the height and width of your image. This is best done through linking with an external styling sheet so can be mostly ignored.

Unlike the <img> element, the <video></video> element is not self closing. A general video element might look like:

<video src="url.mp4" width="320" height="240" controls autoplay loop>Text to be displayed if video cannot be loaded</video>

• src="url.mp4" describes the source of the video in the same way that src in the image element would.
• width="320" height="240" describe the size of the video window, but is best done through linking with an external styling sheet so can be mostly ignored.
• controls allows your video to have the general controls that we would expect including play/pause, volume, and full screen mode.
• autoplay makes your video autoplay when the page loads. This generally provides a poor user experience, however may have some niche use cases. Just don't include this attribute to make it not autoplay.
• loop makes your video start from the beginning when it reaches the end. Again, this may have some niche use cases.
• The description of the video goes between the opening and closing video tags. This is picked up by screen readers and will also show if the video cannot be loaded.

Since the closure of myspace, audio on your website is generally considered a poor user experience, especially if it is set to play automatically. However, there may be some instances where you would need to include some audio and in these instances you can use the <audio></audio> element.

The syntax for this is an <audio></audio> element with children or a child of self closing <source> element(s).

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support this audio.
</audio>

• The controls attribute, like in the video element, allows the controls of the audio play to be accessible to your users.
• Since not all browsers support all audio types, you can provide multiple audio files so that you can be sure at least one will work. These have a src attribute like images, linking to the location of the audio file and a type attribute that specifies the audio filetype.
• The description under the sources is what is displayed if the browser cannot display the audio. This can be a message, an image or even a link.