Let's import a batch of photos from our hard drives so that we have something to show:
When we added the title screen, we chose one of the backgrounds from Scratch's library. This time we added our own image as a background.
Once we include the background image in our project, Scratch treats all the images the same. It doesn't matter if we use an included image, import an image, or paint our own background.
Scratch imports the popular image formats such as PNG, BMP, JPG, and GIF. You can also import animated GIFs, but it will no longer be animated. If you import the animated GIF as a sprite, only the first frame of the animation is imported. To get the remaining frames, import the animated GIF as a costume for the sprite.
Working with digital images is a topic worthy of its own book, but Scratch has some built-in image editing capabilities that we can use. Actually, we've been using Scratch's image editor in this entire chapter, and you may have observed that it has a limited feature set.
Basically, we can change colors, draw rectangles and circles, insert lines, type text, duplicate areas, resize, rotate, and flip. If we want more advanced editing capabilities, we need a more advanced editor, such as Photoshop, Fireworks, or GIMP.
The stage in Scratch measures 480 pixels wide by 360 pixels high. In graphic design, we list the width first, so an 800 x 600 image is 800 pixels wide. If we were to look at an image under extreme magnification, we would eventually see individual dots. These dots are pixels, and they contain all the information the computer needs to display the image on the screen.
Counting pixels becomes important, so we can select images that will meet our needs. If we want an image to take up the entire background, we need an image that is at least 480 x 360 pixels to ensure that we have an acceptable image quality.
The problem with using an image that is less than 480 x 360 pixels is that we need to stretch or upsize the image in order for it to fill the screen. As we increase the size of an image, the pixels are made bigger, and we will begin to see the individual pixels. This effect creates a grainy and unclear image, which is often referred to as a pixelated image.
The good news is that if we start with an image that is larger than 480 x 360, then we don't need to resize the image at all. Scratch will resize the image to the correct dimensions automatically. We don't have to worry about image pixelation when we decrease the size of an image. Bottom line, always start with a larger image and downsize if needed.
In Scratch, we have two ways to determine if our image is big enough. On one hand, you can use the simple approach. If you display the background on the stage and any portion of the stage is still visible, then it means the image is too small. This method works, but it is not very precise.
Alternatively, the Backgrounds tab displays the size in pixels below the image name, as seen in the following screenshot:
If you look closely at the screenshot, you'll see my image is 480 x 320. It's 40 pixels too short! For now, it's not a big deal. I'll leave the white background display, but I could use the Paint Editor to fill that space with a solid color if I wanted to.