GRAPHIC FILE FORMATS

Introduction to Rasters and Vectors

Raster images are produced using pixel-based programs and are often defined by the height and width of the image in pixels by the number of bits (the amount of data) per pixels. The pixels are produced through source code which is a binary code of 1’s and 0’s. These images are made up of red, blue and green pixels. More colours can be expressed the higher the bit count in a single raster file, however this would also mean the file would be larger and would take more memory to store. Raster is more common on the internet seeing as its far smaller and takes far less space.

Raster files use bitmap to store information. Bitmap is a grid made up of a fixed number of individual pixels. Each pixel represents a single colour and when you ‘zoom out’ the pixels come together to make a full image. This is why rasters are resolution dependent. When you ‘zoom in’, the image will pixelate because the area becomes stretched to fit more that it was originally meant to.

Raster File Formats:

- JPEG

- Exif

- TIFF

- GIF

- BMP

- PNG

- PPM

- WebP

- HDR

- HEIF

- BAT

- BPG

Photoshop is a raster-based program.

Left: 100% | Middle: 400% | Right: 1600%

Due to photoshop's use of bitmap, when zoomed into, ‘Y’ becomes pixelated. Photoshop was designed to edit photos.

Vector graphics are made up of polygons and therefore never gets distorted and is endlessly scalable. The resolution on a Vector image is independent and therefore doesn’t lose resolution when zoomed into. The reason they don’t pixelate is because they don’t use a fixed grid of pixels and instead use formulas that change depending on the shape made. These images are built on lines that pass through points which are mapped out in its source code. The computer will use this code to create the lines and form the image. You will find that Vector is more often used for physical products like the labels, banner and posters where the graphics will often be enlarged.

Vector File Formats:

- EPS

- SVG

- PDG

- AI

- DXF

Illustrator is a vector-based program.

Left: 100% | Middle: 400% | Right: 1600%

As you can see, in contrary to photoshop, the ‘Y’ in Illustrator does not get pixelated. This makes it ideal for graphics and logo design.

Vector can be converted to raster but a raster can’t be converted into a vector.

How to Export

To export in both Photoshop and Illustrator, go to file, export and then export as to select your desired file format.

Lossless Vs Lossy Compression

Lossless Compression is when an image can be compressed and then uncompressed to the same standard as the original uncompressed image. Lossy Compression is when an image can be compressed but when uncompressed, isn’t the same standard as the original and having lost elements of the original image.

The most commonly used image file formats

TIFF (.tif)

TIFF which stands for ‘Tagged Imager File Format’ can be both lossless and lossy and its image storage algorithm are included in the file. It is most often used exclusively for uncompressed lossless image storage. As a result, TIFF files are quite big. Because of the amount of detail and information stored in TIFF files, photographers will manipulate and edit photos extensively in photo editing software when using this file format.

JPEG (.jpg)

JPEG stands for the ‘Joint Photography Experts Group”. The file format is compressed to store more information within a small file size. It is also a Lossy compression, meaning that it loses image data in order to cater to the smaller file size. JPEG is the most commonly used file format on the internet due to its quick loading time and photographers will often export their files into this format, especially if they wish to showcase it on the internet.

GIF (.gif)

GIF also known as ’Graphic Interchange Format’ is a lossless compression file format. No detail is lost but its file size is still not as small as a JPEG. Unfortunately, it has a limited colour range meaning that it is not suitable for photography or image prints. GIF has the added bonus of being able to be used for animation and this quality is very popular on the internet.

PNG (.png)

PNG is short for ‘Portable Network Graphics”. It is an open format and was produced in order to replace GIF which was patented which meant there were licensing fees attached. PNG has a full range of colour and improved compression and is used exclusively for web images. PNGs however has a larger files size. It is best used for images with text and line art because of its lack of miniscule detail usually found in photographic images. Company logos will often be in a PNG format.

RAW (.raw)

RAW files are lossless compression files that maintains all the data from the original image taken from your Digital Camera or DSLR. It allows for various manipulations and adjustments after the photo has already been taken which is why photographers like to take their photos in RAW. These adjustments can include exposure, contrast, clarity, hue, white balance etc. RAW is very large in size and therefore will require more storage space and more time to render and process. Not all applications support RAW files so they will need to be converted.

DNG

A Digital Negative was produced by Adobe and is a Lossless Compression file similar to RAW. DNG stores the data in a generic format and allows all Adobe applications and software to use it. It is recommended that you convert RAW files to DNG as it decreases file size significantly and makes it easier to send, upload, download etc. However, once converted, metadata will be impossible to retrieve from the image.

PDF

A Portable Document Format is a metafile format that captures and stores all the elements of a document as an image. PDF files can be created using Adobe Acrobat, Acrobat Capture and other similar products. This file type is most commonly used for magazine articles, product brochures, flyers or even books especially if you’d like to preserve the original visual and graphic look and design online.

SVG

A Scalable Vector Graphic files are lossless and are pure Extensible Markup Language (XML) which is a file extension defined by a set of rules for encoding documents in a format that is both human and machine readable. It helps characterize vector-based graphics for the web and can be animated, making it ideal for internet showcase.

BMP

A Bitmap Image File is an independent raster-based graphics image file format that stores bitmap digital images, especially on Microsoft Windows and OS/2 operating systems.

Metafiles

Metafiles are files containing data that describes, characterizes or specifies another file. Microsoft uses a metafile format named Windows Metafile Format (WMF) encompassing Graphical Device Interface (GDI) which are commands to the Windows Operating System. This results in the production of a graphic image. Some of these functions (A group of statements that perform a task) are similar to that of vector graphic statements or specifications or raster images. They can also find stored bitmap.

Another common example of a metafile is PDF which can host both raster and vector file formats. A photoshop fil can be exported into a Photoshop PDF which preserves data such as layers, notes and spot colour and can be opened to edit on photoshop CS2. PDF can support both types of files, meaning that the text in the will look far cleaner.

Photoshop

PDF

You can see that the 'Y' in photoshop is pixelated when zoomed into, in comparison to the very clean 'Y' in the PDF version. This is because photoshop has not been exported fully into a PDF yet, and is not able to entirely display the text because the program is only raster-based, whereas PDF is both raster and vector based.

VECTOR graphic file formats & applications - TRACING

Photoshop

Illustrator

Here, using the Quick Selection tool on photoshop, cropped out an image of a model and place it over a transparent background. Then I exported into a PNG and openend it in illustrator. Then went under Object>Image Trace>Make and then changed the preset to High Fidelity Photo.

As you can see, the vectorized image has not lost its resolution. Unfortunately, the tonal depth has been decreased in the process, resulting in a less realistic depiction of the photograph.