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.

Problem 2

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

Load Fast: Small images open quick, so website goes faster.
Use Less Data: They don't up a lot of internet data, good for people with limits.

Problem 3

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

.jpg for: Photographs, Web Images.
.png for: Graphics and Logos, Screenshots.

Problem 4

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

Most web browsers show images at 72 pixels per inch (ppi). This is normal for web images because it keeps a good mix of quality and size. Some fancy screens can show better detail, but 72 ppi is what most websites use.

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)?

you should use a .png file.

Problem 6

What are responsive images?

Responsive images are pictures that change size based on the screen or device. They look good on phones, tablets, and computers.
Size Changes: They get bigger or smaller to fit the screen, so no weird cuts or stretching.
Load Faster: Smaller images show up on mobile, saving data and loading quicker.

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.

Problem 8

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