The world of 2D computer graphics offers two systems for storing and displaying images: bitmaps (technically called raster graphics) and vector graphics.
Computer programs store bitmaps as a bunch of pixels, identified by color and position. The term Bitmap graphics doesn’t refer to just files with the Windows bitmap (.bmp) extension; it refers to all images stored in bitmap format, including .gif, .jpg, .tiff, and .png.
The good thing about bitmap graphics is that they let you create super-realistic detail with complex colors, gradients, and subtle shadings. On the downside, uncompressed bitmaps typically take up a whopping amount of disk space, and they’re not particularly scalable. For example, suppose you have a bitmap image of a car, and you tell a program to increase the size by 500 percent.
The program has to create new pixels for the bigger image, so it duplicates the pixels (colored dots) already in the image. The results aren’t always pretty. The entire image is likely to appear blurry. The curved edges may become blocky or pixelated.
Computers store vector graphics as a bunch of formulas. Compared to raster graphics, vector graphics are relatively modest in size, and they’re scalable. In other words, if you draw a tiny car and decide to scale it 500 percent, your scaled drawing will still have nice, crisp details.
The strengths and weaknesses of each format are important when you’re working with images. Bitmaps are better for photorealistic images with lots of colors and shades. Vector graphics are better for line art, charts, diagrams, and images that you’re going to scale to different sizes. Animate can import four types of graphics files—JPG, GIF, PNG, and SVG—however, there are a couple of gotchas that might surprise you.
JPG files, also known as JPEGS, are the familiar bitmap format used on the web and in many cameras. The format was developed by the Joint Photographic Experts Group, hence the acronym. JPEGs use what is known as a lossy compression technique to create smaller file sizes. Image editors that work with JPEGs usually let you choose the degree of compression. If your image will only be viewed on a screen, you can crank up the compression. If it’s headed to a photo printer and you want it poster size, you’re going to need all those pixels.
GIF files were developed by CompuServe, one of the early online services. The acronym comes from Graphic Interchange Format. GIFs’ popularity seems to be fading compared to JPEGs and PNGs, but you’ll still find them on many websites. GIFs are bitmaps stored with a lossless compression technique, but use a limited color palette. The result is that an image with big swaths of solid colors, like a company logo or a bar graph, might result in a very small file. On the other hand, a photographic image won’t compress as well and may not look as good in GIF as, say, in JPEG because of the limited number of colors. GIFs provide a couple of neat tricks. You can create animated GIFs using simple frame-by-frame animation. Programs like Adobe Fireworks and
Flash make the process fairly easy. GIFs also let you designate parts of the image as transparent. That’s great if you’re placing an irregular shape, like an animated character, over an already developed background, like a room’s interior.
PNG files were developed at a time when there were patent issues regarding GIF. Pronounced “ping,” this abbreviation stands for Portable Network Graphics. The PNG format was designed to be used on the Web (as opposed to print graphics) and to improve upon features already popular in GIFs. PNGs use a lossless compression technique, provide a bigger color palette, can display animated sequences and can include transparency within the image. PNGs are well supported among modern web browsers, but there are probably still some older browsers out there that don’t handle the format. The PNG format works well with Animate, in part because both were developed with the Web in mind. SVG files are vector-based. The name stands for Scalable Vector Graphics. That means rather than recording a pixel-by-pixel map of an image, SVG files contain formulas that describe the lines, curves, shapes, and other details of an image. All modern web browsers support the SVG format, but older browsers’ support for SVG is inconsistent.
If you resize an SVG image when you're working in Animate, it's likely to start looking pixelated—that jagged stair-step appearance that graphics get when they're enlarged. When this modified image is viewed in a browser, the pixelation shows. It's interesting to note that if you don't change the image within Animate, it resizes gracefully in a browser window, when it gets larger and smaller.