Course List >> HTML5 and CSS3 >> Basic HTML Page Structure >> 4: Working with Images, Video and Other Media
Scroll up or hover over the breadcrumbs to view the navigation bar

Working with Images, Videos and Other Media

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.

Points to Ponder

  • 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...)

Your Assignment

  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
  4. 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.

Additional Resources

This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150