Part of Lesson Plan: Working with Images
Activity Overview / Details
When students walk in have the following displayed:
Explain
that the image was so large only part of it could be displayed and
you will need the students to load the image in order to reveal
what it is. Divide the room into 2 halves and assigned each
half one of these links. Post the links were students can
easily access them online. Tell students that at the count of 3
they are to click the link. Count to three and have students all
click the link.
Image 1: - Note, image 1 is a very large file.
Image 1: - Note, image 1 is a very large file.
Image
2
Students that click Image 1 will discover that it takes a very long time for the image to load, because of it’s size. Students who click Image 2 will see almost no delay.
As you wait for students in the first group to have their images load, explain that they have just experienced what happens when web designers use images that are too large.
Issue 1- the image obscures the page content, making it difficult to view the page, like the piece of bun they saw when they came into the classroom.
Issue 2- images that are 2 large take a very long time to load. If people have to wait for web pages to load they may become frustrate or leave the page
The focus of the lesson for the day will be adding correctly sized images to web pages using html coding.
Students that click Image 1 will discover that it takes a very long time for the image to load, because of it’s size. Students who click Image 2 will see almost no delay.
As you wait for students in the first group to have their images load, explain that they have just experienced what happens when web designers use images that are too large.
Issue 1- the image obscures the page content, making it difficult to view the page, like the piece of bun they saw when they came into the classroom.
Issue 2- images that are 2 large take a very long time to load. If people have to wait for web pages to load they may become frustrate or leave the page
The focus of the lesson for the day will be adding correctly sized images to web pages using html coding.
Materials / Resource
Hamburger Bun Image
[
View Image
]
[
Download Original
]
Resized Hamburger Image
[
View Image
]
[
Download Original
]
Large Image
[
View Image
]
[
Download Original
]




