Review
Before you move onto your quiz, work through the activity below. It will help you review the syntax and considerations necessary when using images.
Write the code to add an image with the file name "book-cover.jpg". The image is a picture of a spy novel book cover, and the image is located in the same root directory file as your index.html file. The image's original size is 300px wide by 450px high, but you want it to display at half that size.
What is a raster image? What is the main limitation of raster images?
This code is for a decorative image. How should it be changed to be more appropriate?
| <img src="image1.png" alt="a blue banner with a checkered pattern"> |
When is the PNG format best used?
You have an image of the prologue from Romeo and Juliet. Why might you consider adding the prologue as text instead of as an image?
| Your Responses | Sample Answers |
|---|---|
| <img src="book-cover.jpg" alt="the book cover of a spy novel" width="150px" height="225px"> Your answer should include the source and alt attributes and should set the new dimensions of the image. Also, if you set only one of the dimensions, that is still correct as the image would resize proportionately. |
|
| A raster image is made up of pixels, small blocks of color arranged in a grid. When a raster image's dimensions are lowered, the image can't be made larger again without the image looking pixelated. | |
| <img src="image1.png" alt=""> Decorative images should have only an empty alt attribute. Describing a purely decorative visual element complicates things for screen readers. |
|
| Images that use a lot of colors but aren't photo-realistic, and for when more complex transparency effects are needed. | |
| Images add significantly more to loading times, and if any corrections are needed to the passage, it would be much easier to edit text than the image. | |
