Image Manipulation

Overview:

Being able to capture, manipulate, and save images at an optimal file size are essential skills needed for creating instructional materials in the digital age. This rather lengthy (looking) lab has three main sections in “The More You Know” section:

• Image types used on the web,
• Web-based image editing
• Taking a screen-shot on your computer

Objectives:

1. Be able to distinguish between the three most common image formats for the web, and understand when and why to use each format
2. Understand which image editing tools might be most appropriate in particular contexts, for particular tasks, and for particular types of users
3. Be able to perform basic manipulation tasks
4. Be able to save images in an appropriate format for the web
5. Be able to capture images of your screen

The More You Know:

Image types used on the web

There are three types of images most commonly used on the web:

• JPEG (pronounced “JAY-peg”)
• GIF (pronounced with either a hard or soft “G” – “jiff” or “giff”)
• PNG (pronounced “ping”)

Each of these formats compress images in different ways, decreasing the file size, but also introducing distortions.  In order to understand these side effects and when to use what format, it’s important to understand that a digital image is just a series of pixels organized in rows and columns.  If you were to zoom in on a picture you would easily be able to see this.

1.) JPEG

The format most of us are familiar with is the JPEG format, so we’ll start there. JPEG compression works best for “photo-realistic” images–images that contain millions of different colors.  Examples of photo-realistic images are shown below.  Note that they are not all “photographs”!

“Pakistan Textile Vendors” Image by Steve Evans Released under an Attribution License	“Spiral Again” Image by fdecomite Released under an Attribution License	“Petronas Twin Towers” Image by Shubert Ciencia Released under an Attribution License

When you save a picture as a JPEG, information across large groups of pixels gets averaged together and this helps reduce file size.  The more you choose to average across pixels, the smaller the file size becomes.  The easiest way to understand this is to look at an example:

This image was saved as a JPEG with the compression set at 100% quality.  File size at this level of “quality” is 62KB.	If we zoom in to 1200% we can clearly see each individual pixel that makes up the image

This version was saved at 0% quality (the absolute poorest!) and the file size has been reduced to 4KB.	However you can clearly see the sacrifice in image quality when you zoom in to 1200%.

2.) GIF

Most of have never had occasion to use GIFs since the JPEG format is so common.  However, life without GIF images would be fraught with slow downloads and disappointed eyes.  GIF compression works by limiting the palette of available colors to 256 or less–quite a contrast from the JPEG format which allows for millions of colors.  256 colors doesn’t seem like a lot, but in certain instances it is more than enough.  Two of the most common uses of GIF compression are logos and pictures of text. In these two instances the GIF format looks far superior to the JPEG of equal file size.  Take a close look at these examples:

GIF format. File size is 2.7KB	JPEG format. File size is 2.7KB		GIF format, file size is 0.2KB	JPEG format, file size is 1KB

The GIF format has two other unique features that we would point out: Transparency and Animation

The above picture of text has been inserted into a table cell with a dark blue background. Click the image to view it by itself (without the blue background)!		A series of still images can be combined and saved as an animated GIF. This example works well due to the minimal number of colors used. (amimation by DemonDeLuxe)

Now just for the sake of example, let’s take a look at what a photo-realistic image looks like when it is saved in GIF format. Remember that the GIF format is limited to 256 unique colors, while JPEGs can have millions of colors:

This is a GIF saved at maximum quality.  Compare it the first JPEG polar bear example above (not the 0% quality one).  Note the lack of strong colors.	When you zoom in to 1200% you can see the compression effects of the GIF format. Instead of averaging across large groups of pixels, the GIF format simply draws the picture with a limited number of colors.

3.) PNG

PNG is the newest of the three image types typically used on the web and was developed to improve upon and replace the GIF.  In contrast to GIF and JPEG, PNG images can be saved in a lossless or lossy format (which uses 256 colors like GIFs).  In a lossless format you do not lose image quality every time you save and re-save your image (sometimes called “generation loss”).  Note, however that a lossless (think “perfect”) file format will have a much larger file size than a lossy one (such as JPEG), so images of text or logos are typically saved in the lossy format.

What is interesting about PNGs is that they support transparency just like GIFs.  This means you can now have images with transparent parts and high quality (at the cost of a larger file size).  Remember the lovely image of blue text above?  What did you notice when you opened it in a new window without a blue background?  Pretty ugly, wasn’t it?  Since PNGs can be lossless and support millions of colors they can display transparencies without jagged edges–see the image at left.

Unfortunately, even though PNGs have been around for years, Microsoft’s Internet Explorer has only been supporting their transparency capabilities since version 7 (released in late 2006).  That means there are still millions of people browsing the web who can’t see the transparency effect, so think carefully about your audience before choosing PNG for transparency.

Let’s take another look at the logos we saved above.  We’ll now compare file size and quality between GIFs and PNGs:

Format is GIF, file size is 2.7KB	Format is PNG, file size is 2.3KB

There is absolutely no difference in quality, but the PNG has a slightly smaller file size (about 15% smaller).  You will generally find this to be the case.

So let’s sum up what we’ve learned about image formats:

Saving images for the web is always a balance between image quality and file size.  This decision process is complicated by the fact that there are three file types to choose from, but you should have enough information to make informed decisions.  Here are some general guidelines that should start to become apparent:

• JPEG: Good for photo-realistic images saved for the web
• GIF: Good for images with few colors, images of text, and simple animations
• PNG: Good for images with few colors, images of text, and will be a smaller file size than GIF.  Can also save images as a lossless PNG, but this is not always suitable for web content as the file size will be extremely large!

Web-based Photo Editing

Now that we’ve explored image formats for the web, let’s look at some of the applications that allow you to modify your images.

1. To get us started, let’s take a look at the web-based image editing app called Picnik. You don’t need to register for an account to use the site, but you can if you want.

• Begin by either uploading an image or by opening an image from the web that has a creative commons license. You can do this from Picnik’s “Library” tab.
• Explore each of the editing functions under the “Edit” tab (rotate, crop, resize, etc.)
• Next explore the “Create” tab. There are several sub-pages under this tab–be sure to explore them all:
  • Effects
  • Text
  • Shapes
  • Touch-up
  • Frames
• Finally, click on the “Save & Share” tab and take a look through the options you have there.  While you’re there:
  • Save a copy of your image to your computer using an appropriate file type
  • Try emailing a copy of your image to someone else in the class (this could be Emily or Brandon)

2. Let’s take a look at another web-based imaging app–Photoshop.com’s Online Editor (formerly known as “Photoshop Express”)

• Take a look at their Help Videos which guide you through setting up an account and editing photos.
• Explore the functions in Photoshop Express by uploading and editing a photo, just like you did with Picnik. Experiment with some of the following:
  • Remove red-eye
  • Straighten a crooked picture
  • Resize your picture
  • Add text
• Save your picture in an appropriate file format
• Add more than one picture and go to your “Gallery”.  Grab the embed code for the gallery and try adding it to either your Google, Weebly, or Dreamweaver page.
• Again, try emailing a copy of your edited photo to someone in the class

Web-based Image Creation & Editing

The tools we’ve looked at so far are great at editing images that we already have.  But what if we need to create an image from scratch?  Well, we need a different tool…  Popular desktop apps that can help us do this are Adobe Photoshop, Fireworks, or PaintShop Pro.  However, since these cost quite a bit of money we’ll be experimenting with a free, web-based tool called SUMO Paint (there are others, but this one resembles the tools set of Photoshop and is a good interface to learn).

Head over to the SUMO Paint website and click on the giant sumo to launch the app.  If you need help with any of the features, be sure to look at the SUMO help page

• Find the gradient tool and use it to give your “canvas” some color
• Experiment with various brushes and shape tools
• Add a new “layer” by clicking the “new layer” button down in the “layers” palette
• With that layer selected in the layers pallete, add text or a shape to this new layer and try moving it around

Taking a Screen Shot on PCs and MACs

Another skill you need to have is the ability to take a screen shot on your computer.  This is an essential part of creating web-based instructional materials–most of these labs have screen shots in them!

• • Instructions for Mac OSX
  • Instructions for Windows

If you are using a MAC your picture will be saved automatically.  If you are using a PC you will need to open a program like Microsoft Paint and paste in the contents of your clipboard.  You can then save your image as a GIF or JPEG image.

Your Performance Tasks:

You now have all the information needed to prepare images destined for the web.  Generally these skills include the following:

• Recognizing the strengths and weaknesses of the three popular image formats for the web
• Rotating, croping and resizing images, as well as correcting exposure and red-eye
• Adding text to an image
• Capturing an image of what is on your computer screen
• Saving any image in a file type that has the best quality/size combination

Therefore in this lab you should complete the following tasks to demonstrate your understanding:

1. Save a screen shot of a useful web page:
   • Choose a Web 2.0 website that we have not yet seen in class and take a screen shot.
   • Crop your picture to contain only the web page (no part of your web browser should be showing)
   • Annotate at least three parts of your image with clearly legible text (lot’s of tricks for making text more legible!)
   • Save your image in the best quality/file-size combination for the contents of the image (review the information above on JPEG vs. GIF vs. PNG)
   • Resize your image so that it does not exceed 500 pixels in width or height
2. Using an image or photograph of your own, perform the following corrections:
   • Resize or crop your image to 600 x 400 (can be either landscape or portrait orientation)
   • Save your image in the best quality/file-size combination
3. Using SUMO Paint (or a desktop app if you have one)
   • Create your own image from scratch.  It should be colorful
   • Resize your image so that it does not exceed 500 pixels in width or height
4. Using Photoshop.com, Flickr, Slide, etc., create a web gallery of the images you’ve created in this lab and embed it in a web page using Google Sites, Weebly, or Dreamweaver(TIP: To create a shareable gallery you will need to create at least one album and set it to be “public”)

Due Date:

All tasks for this lab must be completed by 8:00 a.m., Tuesday, July 6th.  Submit the URL of your page(s) containing your embedded picture gallery to the comments below.