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)?
Larger files take much longer to load on websites and devices and can be worsened depending on the internet connection. Smaller file sizes lead to faster loading times and a smoother 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?
Large image files should be saved as a .jpg file, as it makes large photo files smaller. This means it occupies less storage space and leads to faster loading times.
If you are looking for high-quality photos, an image should be saved as a .png file. Even after compression/decompression, the quality of the image will remain high and crystal clear. It also allows for creating background effects and overlays, as well as transparent backgrounds to layer images.
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
Problem 6
What are responsive images?
Responsive images are images that are designed to adjust their size and resolution based on the size of the screen (for example, on a computer monitor or mobile device). If the browser window is shrunk to half the size of the screen by the user, the image will adjust accordingly to the size of the shrunken window.
This can be completed by using the width attribute and using a percentage (instead of the amount of pixels.)
Example: width="25%"
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.
