October 4

posted Oct 4, 2011, 1:25 PM by Peter Knowles
If you've downloaded Sumo Paint, you're ready to start manipulating images in a way that will make them usable on your web pages. 

Here's what you need to do.

Remember the images assignment you did with four versions of the same image, each one getting half as big as the one before it? If you haven't done that, you should do that before you begin here. 

If you remember doing that assignment, you're going to do the same sort of thing here, except you'll be reducing your images using Sumo Paint instead of using the HTML height and width attributes. The reason this way is preferred is that the first way you did it, the browser has to load the entire (original) image before it can reduce it. So if your original image was 600 px by 800 px, for example, it might have been a file that was KB. If the browser has to add the entire image four times, and then reduce three of them to smaller sizes, it still has to download the entire image before shrinking it. If you do the reducing in an image editing program (such as Sumo Paint), you will save the browser from having to download more than it has to, and as a result, it will load everything on the page more quickly.
Here's a comparison to make the point even clearer:

 Image Size         File size using height and width File size using an image editor
 Original (1000 x 740) 98 KB 98 KB
 Half size (500 x 370) 98 KB 49 KB
 Quarter size (250 x 185) 98 KB 24 KB
 Eighth size (125 x 93) 98 KB 12 KB   
 Total download 384 KB 173 KB 

As you can see, you save a lot of memory usage and browser speed by reducing the size of images to the size you want BEFORE creating your HTML page. 

So, here's what you need to do:

  1. OPEN your Google Document that has your code for the first assignment where you reduced image sizes. (Ex: PUPPIES!!!)
  2. RENAME it to include the word "reduced" at the beginning (Ex:  Reduced PUPPIES!!!)
  3. REMOVE the height and width tags that you put in there before, meaning you have just created a page with four copies of a very big image on it. 
  4. COPY the URL of the original image
  5. OPEN Sumo Paint. 
  6. Under FILE, select OPEN FROM URL, then Paste the URL you copied above into Sumo Paint
Now it's time to start reducing. 
  1. After your image is there, Select IMAGE > Image Size from the menubar
  2. You'll see the original image of the file, and options to reduce its size. Check the "Constrain Proportions" box, then choose 50% in both Width and Height windows. 
  3. Press OK. You should see the image has been reduced.
  4. Under FILE, choose SEND TO EMAIL, and send yourself a copy of the image you just created. Label the subject line "Half-size image" and send it.

  5. Repeat the process (50% again) and email the second image as "quarter-size image" then again, labeled as "eighth-size image". 

When you're all done, you should have three emails in your inbox, each with a slightly smaller image in it. You'll be using these images to recreate your original image page, but with a much smaller download size.

If you're finished, see if you can find the file sizes of the images you created. 

If you have extra time, play around with the original image in Sumo Paint. See if you can add layers, transform it, make it more interesting the original. (You did choose an original image that you were allowed to alter, right?  What kind of CC license was that again?)