Vector vs. Bitmap Images -- How to Get The Best Results in GoAnimate

This article explores the differences between vector and bitmap images, and how to use them effectively in GoAnimate.

A bitmap – often called “raster” or "scalar" – image is composed of a simple collection of pixels. A vector image, on the other hand, is made up of mathematical formulas. For example, a bitmap image of a circle is a set of pixels arranged to approximate a circle on the viewing screen. A vector image of a circle is an algorithm that instructs the computer which pixels to turn on to achieve the same visual results.

Why does it matter? A bitmap image will always look best when it is viewed at the same screen resolution under which it was created.   When a bitmap image is zoomed, it becomes blurry, or pixelated, because it contains the same exact number of pixels, no matter how much you zoom in or out.

For example, this circle is a bitmap image:

Here is the same image zoomed in 400%:

A vector image will scale up or down, without becoming blurry, because it doesn’t actually contain pixels at all. It is a mathematical formula that instructs the computer how to make the image at any given screen resolution. That formula yields a smooth circle, no matter how much the image is enlarged or reduced.

All GoAnimate assets are vector images. This is why they look great at all screen resolutions, and the reason they can be resized without any pixelation. If your videos only contain GoAnimate assets, they will scale beautifully across all available resolutions, which include the native GoAnimate video player and download resolutions of 360p, 720p and 1080p.

Images and videos that are uploadable to your GoAnimate library, however, are bitmaps! This means an image optimized for the video maker may be slightly pixelated when downloaded in 1080p format. Don’t worry … our advanced algorithm helps smooth bitmap images to compensate, but any bitmap image (or video) that is viewed at a resolution different from the one it was created for will be somewhat pixelated.

Examples of bitmap image and video formats:

.png (image)

.jpg (image)

.gif (image)

.mp4 (video)

.m4a (video)

Importing Vector Graphics

If you have Adobe Flash, you can create and import your own vector images and animations that will scale up or down without pixelating. The only supported file format is .swf, and it must be created using Adobe Flash.

Best Practices - Bitmap Assets

When uploading bitmap assets, create them with the intended output resolution in mind.

Suppose the following:

  • You want to download your final video in HD 1080p format (a width of 1,920 pixels and a height of 1,080 pixels)
  • You have an image that covers exactly 1/4th of that area, as measured in pixels (960 width x 540 height), and you want to include it as a prop in your video

For best results, size the image in the video maker so that it approximates 1/4th of the video maker’s area, without changing the relationship of width to height, known as the aspect ratio. A visual approximation will do well, but if you want to get more precise, follow the steps in the section below.

Calculating The Optimal Size Of Your Uploaded Bitmap Image Or Video

The area of a 1080p image, as measured in pixels, is 1,920 x 1,080 = 2,073,600 pixels.
Using our example, above, one quarter of that area is calculated by taking the product of half of each side. You can verify this by comparing the following:

Product of Half of Each Side

1,920 / 2 = 960 (width)
1,080 / 2 = 540 (height)
960 x 540 = 518,400

1/4th the Area of a 1,920 x 1,080 pixel Screen

2,073,600 / 4 = 518,400

To get the best results in your GoAnimate video, make the image as close as possible to 1/4th the area of the video maker.   While it’s important to get the image close to the optimal size, it is even more important to retain the correct proportions when resizing the image. As mentioned above, those proportions are called the aspect ratio. We mention that because the aspect ratio of a 1080p video is different from the aspect ratio of the video maker. So, get as close as possible, but don’t distort your image.

To see an example of the difference between a vector and bitmap image at different resolutions, please watch the short videos below. The images contained in the videos were optimized for a 640 x 360 screen size. Notice that both the bitmap and vector image look good a the lower resolution, but only the vector image scales to 1080p without pixelating.

Have more questions? Submit a request