File Types

In this blog post I'm going to talk about the different file types that can be used for 2D art. The advantages and disadvantages of different types and where they are most suited. There are a lot of variables to talk about, so lets jump right in.

Properties of an image

An image on a computer screen is made up of many pixels. A pixel is a tiny coloured light that can realistically recreate an image on screen when paired with hundreds of other coloured pixels. It is the smallest controllable area of a screen, so the more pixels a screen has, the more control that can be had over the image, and the more realistically an image is recreated.

The amount of pixels a screen has is called the resolution. The current standard in the UK is generally 1080 vertical pixels and 1920 horizontal pixels. This adds up to over two million pixels on the screen. Two million controllable points of colour makes for a very sharp and detailed image. The pixels are so small in these displays that, providing the user is at an appropriate distance, they won’t be able notice any dots of colour that previous displays would have.

There are a few main types of pixel colour space. The modern standard is sRGB. This kind of colour space stores values for red, green and blue. This colour space can display all possible colour combinations made from red, blue and green. For example, if only red is on, an image will look red, but if red and green are on, it will probably look like different shades of yellow. This colour will change depending on the intensity of certain colours. For example, if the green colour is more intense than the red, the yellow will start looking like less of a pure yellow.

Another popular colour space is CMYK. However this isn’t used for pixels. It’s an adapted colour space for the different inks that need to be used to make the wide range of colours needed. CYMK stores values of cyan, magenta, yellow and black. Like RGB, these colours are mixed to create a wider availability of colours.

Compression

Image compression is the method that reduces the size of a file to save memory space or to make it easier to send over the internet.

There are two types of compression. Commonly referred to as lossy compression and lossless compression. Lossless compression is compression that does not tamper with the look of an image. PNG and TIFF file formats use lossless compression.

Lossy compression is a type of compression that could have negative impacts on the image quality. This is because it deletes information that plays a part in the look of the image. Images that use this compression technique will often still look very close to the original, but if zoomed in too far, start to look blurry. JPEG and GIF formats use lossy compression (Providing the GIF image had more than 256 colours before compression).

In this compressed image of Link from Wind Waker, you can see the effects of extreme lossy compression. The image has lost edge sharpness and and colours look faded.

Types of Digital Graphics

Raster file formats are formats that directly control a certain amount of pixels. It tells every pixel in the image exactly what colour it should be. However, unlike vector images, raster images can only display one resolution and aren’t easily scalable like vector images.

BMP

Bitmaps are very high quality image files with no compression. This makes them suboptimal for transfer over the internet. It is used mainly for Microsoft Paint and was the most popular texture file on PlayStation 1 and PlayStation 2. This was mainly due to the lack of processing power making it unable to decompress compressed image files quickly.

PNG

PNG is an image file that uses lossless compression. It’s a high quality image file with often quite high file sizes too. It’s most notable feature is its transparency options. It allows for opaque, transparent and semi-transparent images. This makes it the format of choice for 2D games. Other files like JPEG would bring with it white boxes around character sprites or textures.

GIF

GIF is a very common image file type on the internet. It has a very good compression technique, so is very useful for internet use. However it has a limit of 256 colours. This can have harsh effects on some kinds of image. A PNG or bitmap would be far more suitable for desktop wallpapers with a wide colour range. The main advantage of the GIF image format is that it allows for animations.

TIFF

Tagged image files are generally high quality images with large file sizes. It’s a very flexible file format that allows for lossy and lossless compression. It is capable of displaying raster or vector image types. It saves additional information along with the image file like layers.

JPG

JPEG is a very common image file type on the internet. This is thanks to its compression technique which can range from tame to severe. The creator of the image can set the severity of the compression, but the compression will always be lossy with this file format. This makes it very easy to transfer over the internet, but it is a lower quality than other formats. It’s perfect for display on websites.

Vector images are file types that contain mathematical information instead of pixel information. Instead of being built by an assembly of pixels, they are built from path and point information. This type of information generally doesn’t carry with it high file sizes like raster images do. It also makes image scaling far easier than raster images. This is because the paths and points remain the same regardless of resolution.

PSD

Photoshop image files are high quality images with large file sizes. They are used in the image editing software Photoshop. It can store vectors or raster images. It has a wide range of bits-per-pixel. It can go from 8 to 32bits. As it’s used in editing software, it saves a lot of additional information along with it like layers, masks and editing history. PSD files are used as base files that which other files can be made from. Photoshop users can create JPEG’s, TIFF’s, PNG’s and a lot more from this base file. This means that while the base PSD file does not use compression, it can save as other file and therefore other types of compression.

Fla

Fla files are files used with Adobe Flash. This file is similar to the Photoshop file, but instead stores additional information like animation instructions, Actionscript and even audio information. It can store both vector and raster graphics. It can store flash video games to play over the internet. It can be used as a base to save files as MP3’s and visual formats.

AI

Adobe Illustrator files are used to store vector based images made in Adobe Illustrator. Like PSD, it serves as a base that the user can use to create other files from.

All these file types (AI,FLA and PSD) are proprietary to Adobe software. This means that it would be difficult to open such files without Adobe software. This is less of a problem since the software and the file format are built for each other and wouldn’t work cohesively with other editing files/software. They are also often very large in size too. So they aren’t efficient for sending or saving in mass. This is also less of a problem since these files are only meant to be a base editing file on which other files more standard files and be made.