- File Types 101 -
Vectors Images & Raster Images (bitmap)
Vector images are created by a series of mathematical statements which places lines and shapes in 2D or 3D, while raster images uses grids of pixels to create a picture. A vector image can easily be identified by the edges- it will always appear even and smooth, no matter how much you zoom in or out. This type of image is also frequently smaller than a typical raster image. Unlike a raster image, vector images cannot be photographs, but are instead usually graphic designs or high quality illustrations. For raster images, the image can be scaled down without any loss of quality. However, when enlarging the image, the quality will decrease and become blocky. The larger a raster image is, the more disk space it will take up.
What is a Pixel and Pixel Depth?
Pixels are the most basic, and smallest unit of a raster image. Every pixel is a tiny building block that works together to recreate an original image. Each pixel carries a different logical address and is capable of projecting millions of different colours. While learning about pixels, you may come across pixel depth. Pixel depth, also known as colour depth or bit depth, serves as a regulator for the number of colours that are displayed on the screen.
File Types
There are many kinds of file types, but just to make it short, these are the more common ones:
JPG/JPEG
(joint photographic experts group) .jpg or .jpeg The most familiar file type out of them all, JPEGs are a compressed format that are ideal for sharing online or for web graphics because of the access to thousands of colours, as well as other features. However, JPEGS are a lossy compression file type. Sections of the image used in this format can appear to be blocky, meaning it's not the greatest choice to use for editing.
|
|
EPS
(encapsulated postscript) .eps This PostScript file type is typically used to move graphics images from a graphics application to another. Inside this file is a PostScript code where you can find information about the stored vector image awaiting transfer.
|
PNG
(portable network graphics) .png Well-known among graphic designers, this file format is famous for its ability to create great detail within solid colours. PNGs, just like the GIF format, have a lossless compression. It also shares the JPEG's characteristic of having the ability to support 24-bit colour.
|
BMP
(bitmap image file) .bmp A file format that originated from Windows, BMPs has each pixel of an imaged stored with colour data. BMPs won't compress the file, leaving a sharp, high-quality look. However, the better quality the graphics are, the larger the file size becomes. Due to the increased file sizes, images in BMP format are better used for printing rather than sharing online.
|
RAW
(not an abbreviation for anything) .raw Just as the name implies, this file is considered raw. RAW files are lossless and no changes have been made at all. These particular files cannot be edited or viewed on an online browser without being converted first.
|
PSD
(photoshop format) .psd Created for Adobe Photoshop, PSD files are useful for its easy-to-modify layers. This file allows a clean transfer with all the layers still intact. After finishing editing your beautiful PSD file, it can then be exported as another image formats, such as .jpeg, .png, and more.
|
PDF
(portable document format) A document produced by PDF applications, this file format is popular for its function to save documents or publications and make it easy to view on various platforms.
|
AI
(adobe illustrator artwork) .ai A file format used by Adobe illustrator, this file type is for vector images created by this program. Typically used for logos and prints.
|
DNG
(digital negative) .dng This RAW file type is used for saving uncompressed digital images. Like a RAW file, they are lossless, however, they are significantly smaller than typical RAW files. Being in DNG format allows the file to be easily accessed by most editing software.
|
Compression
Is the file lossy or lossless? 🤔
Lossy
Data is lost as the file is reduced or compressed. When uncompressed, parts of the original data are gone and unable to recover.
|
Lossless
All the data stored in the file remains there after the file is compressed, meaning the original data can be restored when uncompressed.
|
Colour Modes
Adding colour to your image is a spectacular thing as it creates a more realistic look. However, there is a catch to the amount of colour you add to an image: the more colour you use, the bigger the file size gets.
Greyscale
When the hue and saturation of an image are equivalent to zero, it is a grayscale image. Basically, the different shades of grey with no colour, ranging from the wonderous, bright white to the notorious, dark black.
|
Monochrome
Using the various tones, but the same hue, of one singular colour.
|
What is Resolution?
What is an Alpha Channel?
A term that sounds intimidating but isn't, an Alpha Channel is a colour component that determines the opacity of a colour. Its typical use is alpha blending and alpha compositing.
A huge thanks for my sources, couldn't have taught myself without them:
- https://designshack.net/articles/layouts/vector-vs-raster-what-do-i-use/
- https://www.techopedia.com/definition/24012/pixel
- https://www.computerhope.com/jargon/c/colordep.htm
- https://www.lightroompresets.com/blogs/pretty-presets-blog/87839108-common-file-type-abbreviations-definitions
- https://techterms.com/
- https://whatis.techtarget.com/definition/TIFF-Tag-Image-File-Format
- https://www.pcmag.com/encyclopedia/term/42703/eps
- https://www.guidingtech.com/7729/difference-between-jpg-png-gif-bmp-image-formats/
- https://fileinfo.com/
- https://whatis.techtarget.com/definition/lossless-and-lossy-compression
- https://blog.online-convert.com/the-differences-between-lossless-and-lossy-compression/
- https://whatis.techtarget.com/definition/RGB-red-green-and-blue
- https://whatis.techtarget.com/definition/CMYK-cyan-magenta-yellow-key
- https://whatis.techtarget.com/definition/grayscale
- https://www.w3schools.com/colors/colors_monochromatic.asp
- https://www.techopedia.com/definition/2743/resolution
- https://whatis.techtarget.com/definition/resolution
- https://www.techopedia.com/definition/1945/alpha-channel
( I used a ton of sources. )