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.

Picture of an English Beach, titled 'Hand Luggage Only'

Problem 2

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

So as to not disrupt the convienence of using our website, or reduce speed.

Problem 3

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

Photographs (Digital photos) should use Jpeg format to compress file size and allow faster loading into web pages -
Graphic images (computer generated) should use PNG format to preserve quality of the images through different
sizing, plus to use the benefit of transparent placement (transparent background feature)

Problem 4

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

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

.png extension would be used

Problem 6

What are responsive images?

A 'Responsive' Image refers to the property of an image being able to resize itself to fit different screen (hardware)
or window sizes.

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.