Media formats overview in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main purpose of using different media formats on the web?

Different media formats help deliver images, audio, and video efficiently and clearly across various devices and browsers.

beginner

Name a common image format that supports transparency and is widely used on the web.

PNG (Portable Network Graphics) supports transparency and is commonly used for images on websites.

beginner

Which video format is widely supported by modern browsers and offers good compression?

MP4 (using H.264 codec) is widely supported and balances quality with file size for web videos.

intermediate

What is the difference between lossy and lossless media formats?

Lossy formats reduce file size by removing some data, which may lower quality. Lossless formats keep all data, preserving original quality but with larger files.

intermediate

Why is it important to provide multiple media formats for audio or video on a website?

Different browsers support different formats, so providing multiple formats ensures all users can play the media without issues.

Which image format is best for photographs on the web?

A GIF

B JPEG

C SVG

D BMP

JPEG compresses photos well, balancing quality and file size, making it ideal for photographs.

Which audio format is most commonly supported by web browsers?

A WAV

B OGG

C FLAC

D MP3

MP3 is widely supported across browsers and devices for audio playback.

What does 'lossless' mean in media formats?

A No data is lost during compression

B File size is very small

C Quality is reduced to save space

D Only images are supported

Lossless means the media keeps all original data, so quality stays the same after compression.

Which video format is NOT commonly supported by all browsers?

A MP4

B WebM

C AVI

D OGG Theora

AVI is an older format and not widely supported in browsers for direct playback.

Why use SVG images on websites?

A They are vector-based and scale without losing quality

B They are pixel-based and lose quality when scaled

C They only support black and white colors

D They are only for audio files

SVG images are vector graphics, so they scale smoothly without losing sharpness.

Explain why it is important to choose the right media format for images, audio, and video on a website.

Think about how different devices and internet speeds affect media playback.

List common media formats for images, audio, and video and describe one key feature of each.

Focus on what makes each format useful on the web.