Blog

09 Jan
0
There are dozens of different photo types out there and picking the right one is critical. Let’s learn the basics about images, their categories, and uses.

What are the differences between jpg, png, and other image file types?

By Wood and Company In Design

Picture this: Your business is sponsoring an organization who needs your logo for their website. But, when you give it to them, your logo has an ugly white box around it. Has this ever happened to you? And why does this happen? Are you using the right type of image?

There are many image file types out there and picking the right one is critical. The wrong photo type can make your image and/or company look bad, and can also waste a lot of your time, as you’re stuck re-working the images. So let’s learn the basics about image categories and uses.

There are two general types of images: raster and vector

Raster images are based off a grid of individual pixels of color, which make up a bigger image. These are the types of images that appear to be blurry when enlarged, because their pixels can be seen. The pixels appear because they have literally been stretched beyond their original size. In other words, raster photos are resolution-dependent.

Vector images, on the other hand, are mathematical based, and they use lines and shapes that have been designated a color and location. Think of this as a formula that calculates your design, so when you go to re-size it, the same formula will just re-calculate the design and render the image properly without pixilation.

That’s not the be-all, end-all though. There are many types of raster images (such as .bmp, .png, .gif, .tif, .psd) and many types of vector images (.ai, eps, .svg, some .pdf). You’ve probably seen at least one of those file types before and wondered exactly what it meant. Some image file types are used for print and others for online, so let’s look into some of the most common types:

Raster file types

jpg image file type

These images are of higher quality than jpg files and have transparent qualities while not sacrificing any of the overall image condition. This file type can handle detailed images, like photographs, and compress well, but it’s still a raster image so you need to watch out when you’re resizing it. That being said, the image can produce very high quality web images, but at the cost of a huge-file size, and can slow down your webpage, so this image is used sparingly for your best digital best files.

Gifs are primarily used in web design because of their ability to be animated, their transparencies, and their low file size. For this reason, gifs are mostly reserved for web animations, cartoons, very simple logos, clip art, and some simple diagrams.

Tif images are best used for print. The file can save and compress without losing any information, which is wonderful but causes for a huge file that’s too big for web-design. That’s okay though, because the file format is always print-ready and can even support layers. Logos and line art are often in tiff form.

Vector file types

This is the native format of an Adobe Illustrator image. Even though this image is very widespread and portable, it’s best for internal use and not for a client. This file is great for printing.

This format uses formulas and numbers to create the illustration for the image, which means it’s great for re-sizing the image. It’s super compatible and portable for graphics software, but keep in mind that because it is loaded into a design program, those who you share it to can manipulate and edit the product (so probably best to just share with your designer, printer, or client). The image best for printing, and must be converted to a png, jpg, or gif when used for the web, though that’s not really its main purpose. EPS files are good to use when the original format of the file is unknown.

Other file types

PDF’s can be raster or vector images. The file is basically rendered as it’s created, so it’s good for sharing digital and print distribution. Often you’ll see it’s not an image or file directly on the site, but it’s a downloadable file (most likely a brochure or pamphlet) that’s good for the audience to preview and print.

Use the right file type

Overall, vector files are best for text, logos, signage, and some illustrations, but can’t handle photographic images. Most vector images would have to be converted to a raster file for use online. An exception is SVG (Scalable Vector Graphics) files. These files use a text-based formula to create a vector image, and are used exclusively online. Raster images are used in print and online, and need to have the correct resolution (pixel density) for the size at which they are being used. Most printed materials should have 300 pixels per inch, but online images generally need 72 pixels per inch.

Converting file types

What if I want to convert my file types, you ask? Well, generally speaking, raster images can’t be converted to vector images. They need to be completely recreated in vector graphic software. Vector images can be converted to raster images by simply saving as the non-vector file type. There should be no difference in appearance if you’re not enlarging the raster version of the image. (Tip: Save it as a separate raster file because once converted into pixels the vector information is lost).

Can I increase the image quality of a raster image by increasing the resolution? No. If you increase the resolution of an image, it just breaks the original pixels into smaller pixels. The appearance will be the same. There are some Photoshop filters that can help with this, but generally speaking, you can reduce raster images, but enlarging them is a bad idea. Unless you’re looking for a fuzzy, pixelated photo, then go for it!

That’s a wrap

So did you get all of that? It was a lot, I know. There are so many different image file types that it can be hard to keep them straight. And each is best for a different purpose, so there is no one correct file type to use for everything. However, whatever images you use, make sure to follow proper channels when working with images that don’t belong to you.

Tags > , , , , , , , , , ,