Images and Video Worksheet

Problem 1

Find an image and copy it to the 'images' folder that was included in your starter files for this course (the starter files were all put in a folder named 'web-programming'). Then add an IMG element below that displays the image. Make sure to set the alt attribute, and you may set the width attribute if you like.

7 Warlords
Problem 2

Why is it important to use small file sizes for images (image files that are small in kilobytes)?

Small image files load faster, save data, and make your website run better. This keeps users happy, improves your search engine ranking, and gives a smooth browsing experience.

Problem 3

What types of images should be saved as .jpg files, and what types of images should be saved as .png files?

Use .jpg for detailed photos with lots of colors. Use .png for images needing transparency or high quality, like logos and icons.

Problem 4

Most web browsers display images at what resolution (how many ppi)?

Most web browsers display images at a resolution of 72 pixels per inch (ppi)

Problem 5

If you want an image to have a transparent background, what type of image should it be (what file extension would you use)?

For an image with a transparent background, use the .png

Problem 6

What are responsive images?

Responsive images change size to fit different screens. This way, they look good and load fast on any device, whether it's a big computer monitor or a small phone screen.

Problem 7

Find another image and copy it to the 'images' folder. Then add an IMG element below that displays the image. Make sure to set the width and alt attributes. Turn the image into a link by nesting it within an A element. Clicking on the image should open up google.com in a new browser tab.

7 Warlords
Problem 8

Find a video on YouTube that you like, and embed it into this page.