Ever wondered why some images get distorted when zoomed in and some stay the same? Why photos have different image file format? Why are they needed and why can’t a single format work for all images?
If you are one of those who like to question everything, we have the answers you are looking for. After reading this article you will get a pretty good know-how about popular and new image formats. Which to use where when and how plus why they were created, strength and weakness and all-important things. So, what are we waiting for let’s start with the ABCs
How Does Format Create a Difference in Image Appearance?
Images saved in different file formats may look alike when previewed but, this is not the reality. There’s an indefinable variance that your eyes may not perceive but it does make a difference depending on what you plan to do with that image file.
Each format has a specific purpose and they serve better than the other. Therefore, you need to understand that every image format is designed and perfected to serve a purpose. Some formats are designed to store details, some are optimized to save valuable disk space and make compress file size to the maximum possible. Some image file formats are used to save photographs, while some are appropriate to save vector graphics.
Now, that we have brief idea about image format, it’s time to understand them in detail.
Image files that you mostly come across, can be broadly categorized in two types namely Raster and Vector.
Raster Vs Vector
One of the major differences between raster and vector images depends on how you want to resize the image.
Raster images are made up of a set of pixels. A pixel is a dot with color information. Meaning when zoom in the image pixels will stretch and quality of the image will be lost. Raster images are resolution dependent meaning they have a fixed size, they are typically used for photographs, digital artwork and graphics. To create raster photos Adobe Photoshop is used as it is easy to create, design, edit and add effect to these images.
Vector Photos are made up of geometrical shapes defined by mathematical equation. Unlike raster images, vector images are resolution independent meaning they don’t lose quality when stretched. These images are used for logos, icons and digital illustrations. Adobe Illustrator is used to create vector images.
Raster Vs Vector
| Raster (Bitmap) | Vector |
| Pixel based. | Uses mathematical calculation to form shapes. |
| Best for editing photos and creating continuous tone images with soft color blends. | Best for creating logos, drawing and illustrations, architectural and technical drawings. For images to be used on physical products. |
| Images have a fixed size. | Can be resized without losing image quality. |
| Large dimensions and details mean large file size. | Large dimension vector graphic yet small file size. |
| Difficult to print raster images using limited spot colors. | Resolution Independent meaning can be printed at any size/resolution. |
| Raster images aren’t compatible with all processes. | Compatible with mostly all the processes, few incompatible vector arts can be easily rasterized. |
| Conversion of complex images into vector images is time consuming. | Easy to convert into raster. Number of colors can be increased or decreased as per the requirement and printing budget. |
| The common image formats include: jpeg, gif, png, tif, bmp, psd, eps and pdfs | Common vector graphic file format includes: ai, cdr, svg and eps & pdfs |
| Common raster images creating editing tool: Adobe Photoshop, Paint, GIMP | Common vector drawing programs: Adobe Illustrator, CorelDraw, Inkscape (free) |
| Vector is not the best format for continuous tone images with blends of color or to edit photos. |
What’s the appropriate size of Raster Image to be printed
The size and quality of the image depends on 2 things:
- Pixel dimension of the image
- Pixel resolution: pixels per inch (ppi) meaning how many pixels per inch are required by a specific printer. Higher the pixels higher is the resolution.
Different printers have different resolution requirement therefore, you need to maintain the resolution.
On an average the resolution requirement are as follows:
- Paper printing require a minimum of 300 ppi
- Shirt printing require a minimum of 240 ppi
- Large printing requirement depends on the distance from which the billboard/sign will be viewed. It can be as low as 20 and can be more than 200 ppi
Can pixel dimension and resolution of a raster image be enlarged?
As explained above, raster image has a certain amount of pixel within each inch of the image for example, a 200 ppi image has 200 pixels per inch. When a high-resolution image is required it should be created or scanned at that same size or larger it is to be printed, e.g. if you need to print an image that requires 200 ppi and is 3 inches wide you need to create it or scan it with minimum of 600 pixels (3 inches * 200 ppi).
So that the image doesn’t drops its quality because each image is created at a certain dimension and increasing its size will degrade image quality. However, photo editing software solve the problem as pixels are added automatically to the image that is edited. Low resolution images cannot be stretched as they lose their quality easily.
How to calculate the size of raster image for printing?
To decide the appropriate size for printing a raster image multiply resolution required (ppi) by the area to be printed.
For example: If a printer needs 200 ppi and the area for which the image is printed is 8 inches wide multiply 200 pixels x 8 inches = 1600 meaning you image must be at least 1600 pixels wide.
How to calculate the best dimensions for good quality printing?
To determine, we will divide the pixel dimension of the image by the resolution required by the printer.
For example: if image 1200 pixels wide and printer requires 200 ppi (1200 ÷ 200) = 6 inches wide is the size at which the image can be printed.
Now that we have an idea about the basic file formats we need to understand why are they further classified and what makes them the way they are.
Raster images can be saved in two primary color models: CMYK and RGB
CMYK is a combination of four colors that are used to print an image. They stand for cyan, magenta, yellow and key (black). Files saved in this format are used for physical printing.
RGB is combines three colors of light that makes other colors. It stands for red, green and blue. File saved in RGB are commonly used for digital media like web, smartphones and film.
What is image compression and why is it needed?
Image compression means decreasing the file size to store more data and to save valuable disk space. It is required to minimize the file size in bytes without losing the image quality.
Raster file images uses two type of compression techniques depending upon how the image will be used. They are:
- Lossless image format as the name suggests stores the original image data allowing to restore image to its original state even if it is compressed. The common image formats that fall under this category are: GIF, PNG, TIFF, SVG
- Lossy image format compresses the image to nearly what it looks like but it reduces it quality. Like it may reduce the amount of colors used in your image or any may delete some data that is considered unnecessary after image analysis. The common image formats that fall under this category are: JPEG, TIFF (can be compressed to it)
To sum up we can say, lossy files are smaller in size and thus are used where image size and download speed is important. Plus, the usage of raster and vector image format depends on the image usage. As images are used differently same formats won’t serve the purpose. Sometimes we want to print images whereas sometimes the focus is on saving space and viewing them online. This all categorizes the image formats differently.
We hope by now you have understood why do you see difference in photos when enlarged. However, some questions like why are their different file extensions and which to use where are left unanswered. We will be answering them in the next part. Meanwhile you can check the comparison chart below that will give you detailed insight about different extensions.