Step 2- Resizing Images Online :: Curriculum

Web Page Design Model

Units:

Step 2- Resizing Images Online

Part of Lesson Plan: Working with Images

Activity Overview / Details

Remind students that on the web the larger the image size, the longer it will take the web page to load. For users who have slower connections, this matters a lot. For people with faster connections it is still frustrating.

In addition, many people are still using screens that best accommodate web pages that are 800 x 600 pixels. This means your pictures should be smaller than that, particularly if you want to have something other than an image on your page. Today students will be resizing images to a width of no greater than 300 pixels.

Direct the students to do the following:

Go to the site www.picnik.com to resize images and click Get Started Now!
Once Picnik loads, click the “Library” tab and select “Get from Computer” (notice you all the other ways you can get photos? That will be important later!)
Upload your image to Picnik
Once your image has uploaded, click the Edit tab and select RESIZE.
Enter in the size you want for your new image. Make sure “Keep Proportions” box is checked. Select 300px for width and Picnik will calculate the height. Click ok.
Click the Save and Share tab, and then give your image a different name. You might want to add 250 to the end of the file name (example: waterfall250) to help keep track of which image to use on your site. We will use .jpg as our file extension because we are adding an image to our site and want the quality to be good and load times fast, so jpg is a good compromise. You can trust picnik to choose the right settings.
Click and save the image in your web design folder.