Skip to main content
Dungeon Thief -Level 1 Background

Choosing the Correct Format for Images of your Games

Few days ago, after all sprites for the player character, monsters and items were done. I was creating the background images for my game, and I notice how big they were. For example, the following image is the background of the first level and was originally saved in PNG, which resulted in 1.08MB. A whole megabyte is a lot for a single image for a simple web game, and it was in the resolution of 1024×768. The HD version of this image (2048×1536) had 2.54MB!

Dungeon Thief -Level 1 Background

These ridiculous file sizes are the result of a bad choice for the image format. An image format describes how the pixels of an image are represented. A format can trade the image quality to make the file size smaller (Lossy), or can save the image in the best quality but in the cost of the file size (Lossless). A format also can specify if the image will have a limited number of colors (Indexed) or it will have no limitation (Direct). Common image formats includes: BMP, GIF, JPEG, and PNG.

BMP is a Lossless format and can be Indexed or Direct. There is no compression at all in this format, resulting in very large file sizes. It is an old format and have no application nowadays.

From StackOverflow
From StackOverflow, by Monk

GIF uses a Lossless compression which preserves the image data, but it is an Indexed format used for images with less than 256 colors, impacting on the image quality. GIF also accepts transparency, but only in 100% (totally transparent) or 0% (totally opaque) levels. It is a pretty good format for simple images with limited colors, such as logos and some simple icons.

format_reference_2
From StackOverflow, by Monk

JPEG (or JPG) is a Lossy and Direct format, preserving the colors but losing image data. This combination makes the format specially useful for rich and complex images such as photographies, where losing some data are not (or barely) noticeable.

From StackOverflow
From StackOverflow, by Monk

The PNG format also uses a Lossless compression, resulting in files with much less size than BMP, and is not limited to a fixed number of colors, such as GIF, thus, resulting in high quality images. PNG accepts alpha transparency, i.e., the transparency may range from 0% to 100%. PNG was created to improve and replace the GIF format.

From StackOverflow
From StackOverflow, by Monk

Given these descriptions and examples, we can summarize:

  • JPEG for complex and detailed artworks and photographies without transparency;
  • PNG for simple images such as sprites, icons, logos, and all images that need transparency;

The first image presented here, which had 1.08MB for 1024×768 and 2.54MB for 2048×1536, converted to JPEG (and keeping a good quality) resulted in 201KB and 336KB for the 1024 and 2048 resolutions, respectively. This show the importance of knowing the different formats and choosing the right one for your images.

References:

Alan Wake

I Am a Programmer and I Don’t Know Any Artist

Alan Wake

I know a lot of good programmers that want to develop games, but don’t go forward because they don’t know any artist and lack the skills to make something beautiful. For a while, I also complained about that. I am a skilled programmer, but I ain’t an artist, what should I do?

My answer for you is: stop whining and deal with it! Yes, you don’t need the artistic skill to create a copy of Bioshock Infinite, or the wonderful atmosphere of Alan Wake. You need, most of cases, simple graphics. You may want to create a ultra beautiful game with painted sprites that even Picasso would be proud, but you probably won’t. Recognize your limitations and adjust your game to what you can do. Go for simple graphics and work hard in the gameplay and other aspects of the game.

Following, I will give some tips to create you game art. I’m not a Picasso myself, but I can handle the basics. I hope I can help you in this process.

Know Your Tools

Before starting to draw something, you need to know what tools you will use, but remember that a tool itself doesn’t do anything, you do. Personally, I like vector graphics, for this I use Inkscape, but you can use Corel Draw, Illustrator or many other tools like them. You may like pixel art or 3D models – you can use GIMP, Blender, or even MS Paint – just choose the tool you feel more comfortable with and learn the basics.

For the final touches, I use GIMP. You can use Photoshop, Z Brush or any other tool related to your style of art. Again, just pick one and go through it.

Follow Tutorials

With your tools ready, go for tutorials. There is a lot of them around the internet, a simple search can reveal several great how to’s. I recommend you follow sites and blogs with general tutorials, such the 2D Game Art For Programmers and Tutplus, also take a look on Devian Art and other artistic forums where people create a lot of tutorials.

Do it for specific things too, for example, if you want to draw a simple sword for you game, take a look on google, you will find a lot of things, e.g.:

Use References

When you have a certain skill with your tools, go for references. Search images of real things, line drawing things, clip arts, etc. You don’t have to create everything from zero. For example, if you want to draw a hand, take a picture of your own hand, search for images of hands on google or use reference such this one:

Hand Reference Sheet by Ultimate Iron Giant (http://ultimateirongiant.com)
Hand Reference Sheet by Ultimate Iron Giant (http://ultimateirongiant.com)

Learn With The Bests

When you see a game or a cartoon, pay attention to details. For example, cartoons usually have large borders, ridiculous proportions, fast movements, caricatured expressions, simple forms, poor shadows, just like the Dexter Laboratory. The Samurai Jack is other example, but now without any border, which makes it special among other Cartoon Network’s programs.

cartoons
Pay For It

If you are too lazy to learn new tools or can’t spend any time to do it, or even simply don’t want to, your solution is: pay for it! There is a lot of freelancer sites and forums where you can find artists and pay their prices.