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.

A drawing of a tree
Problem 2

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

its important to use small file sizes for images so when a users is trying to display an image a smaller size loads quicker than a larger file. The loading speed of the page would improve as well as increase the speed of creating backups. Smaller images also use less bandwidth.
Problem 3

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

Picutres or complex images that need a lot of colors or have a lot of details should use the .jpg file type. As this file type keeps the details and saves spaces with the file size. As for the .png file type, it should be used for images with transparent backgrounds. While it can be used with pictures, the .png type would be larger than the .jpg. In short, the .png should be used for things like graphics or logos, while the .jpg should be used for pictures/photos.
Problem 4

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

The standard resolution for web images is 72ppi.
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)?

.png should be for images with a transparnet background.
Problem 6

What are responsive images?

A responsive image, is an image that can be used on a website to display on the page without becoming too small or too large depending on the device viewing them. The image could be said to adapt to the device viewing them depend on the screen resolution and size.
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.

A pumpking with a crown
Problem 8

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