Web Design - Test Site

Period 7 - Fall 2014

The three pictures below look the same:  however, they are not at all the same (other than the content.)

Before you take this test, go to the Website listed below on your Smart Phone or Tablet.  Then, open it up on your computer in the lab:

http://www.speedtest.net/

Here's their splash screen: Click the "Begin Test" icon on the page in your browser. You will get a sense of how fast your Internet connection is.

Speedtest Splash Page

How fast is your Internet connection?  How fast is the class'?

Object Lesson:  Why You Should Optimize your pictures.

Now, look at the three images below.  How are they the same?  How are they different?

Page 1:  Non-optimized picture 3,888 x 2592 pixels
4.36 Megabytes		 Faaita Full Size
Page 2:  Moderately optimized picture 800 x 533 pixels
508 KB		 Faaita Medium Size
Page 3:  Extremely optimized picture

200 x 133 pixels
64 KB

Faaita Small

Click each of the images above, and time how long each image takes to load:  first on your smartphone or device,

For the images on this page, can you tell the difference in resolution (without looking at the size of the file or its dimensions)?  Why not?

 

Page 1:  Optimized picture 200 x 133 pixels
37 KB		 Frosh Students Before the DLS-CHS Mixer
Page 2:  Optimized picture, cropped 200 x 133 pixels
38 KB (!)		 Frosh Students Before the DLS-CHS Mixer, Cropped Photo
Page 3:  Poorly proportioned picture - No more cookies for you guys!

393 x 133 pixels
38 KB

(Fat) Frosh Students Before the DLS-CHS Mixer
Page 3:  Poorly proportioned pictures - Eat a fourth serving, boys!

200 x 133 pixels
(38 KB) and 5184 x 3456 pixels (11.8 MB)

 (Skinny) Frosh Students Before the DLS-CHS MixerUn-optimized picture, but still out of proportion!

Proportions are also important.  Note the original size of the picture (5184 x 3456 pixels).  Note the optimized picture size (200 x 133 pixels).  If you did not have access to a program to resize your images, how could you get a proportional picture?