Working with Images, Video and Other Media (v1)

Working with Images, Video and Other Media (v1)

Introduction

Images and other media are an essential part of providing a good user experience and they are ubiquitous on websites today. They are also your biggest, clunkiest set of assets and can ruin your page load times if you’re not careful. When your site is slow, the easiest way to get it running faster is to optimize your image sizes and filetypes.

There is also a big difference between each of the image filetypes, so pay attention to the use cases for each. Remember, the trade-offs are usually image size vs quality (though sometimes you want animation or clear backgrounds too), so figure out the differences between gif and jpg and bmp and png and svg.

Learning Objectives

  • What are common attributes of image tags?
  • How do you load a smaller version of an image?
  • How do you get an image to fill up an element?
  • How do you save load times by using appropriately sized images?
  • When should you store images externally vs on your server?
  • What are the main types of image files and how are they different?
  • Which file types let you use animation?
  • Which file types let you use transparent colors?
  • Which file types are best for photos? Graphics?
  • Which file type lets you scale an image as big as you want without affecting file size (and why)?
  • What’s the difference between raster and vector images?
  • How do you add video to your page? (please don’t autoplay…)
  • How do you add audio to your page? (please don’t autoplay…)

Study

  1. Read Shay Howe on Images and Media (includes CSS)

  2. Read about the Differences between image types (see first answer) from SO

  3. Watch this YouTube video about adding video to your page:

  1. Glance over Raster vs Vector images explained simply by YouTheDesigner.com. The pictures are broken in the article, but here is a short YouTube video illustrating the difference:

Don’t worry if you don’t absorb it all — you’ll have time to pick it up later.

  1. Read and learn all about File Paths in HTML.

Additional Resources

UPDATED: 23.10.2020