Despite what nearly every crime-solving television show would lead you to believe, it’s not possible to zoom in on a photo or video and enhance the image to be clearer. But why is this, and are there exceptions? It depends on how the image is created and there are exceptions! 

There are two options for creating digital images:

• Raster-based images

• Vector-based images

Raster

The majority of images the average person encounters are raster-based, which means they’re based upon pixels (tiny squares) of color. The image is a grid of squares with color assigned. If you’ve ever zoomed in on an image and found it blurry to look at (or pixelated), that means it’s raster-based. Common examples include photographs and video footage.

Due to the nature of how these graphics are built, you cannot enlarge them or zoom in without a loss of quality. There are tricks to help circumvent this, of course. Because they’re not viewed close up, billboard graphics are frequently printed at a lower resolution because drivers on the road won’t notice. Additionally, photo editing software such as Adobe Photoshop have special algorithms to help minimize pixelation, but nothing can stop it.

As an example, look at this picture of the dog. You can clearly see the texture detail of its fur, the fabric on its bed, the plants around it, and the grain of the wood floor.

Now, look at this second image. It was created by cropping in on the dog, and then changing the image size to match the dimensions of the original. They’re the exact same size and while you can still see texture details, the quality has significantly downgraded. Photoshop was able to do a decent job scaling and smoothing, but it’s clearly not at the same quality grade as the original.

Common file types for raster images include:

• JPG

• PNG

• GIF

Note: Any type of image or graphic saved to these formats will be raster. If it started as a vector graphic, the file format will convert it to raster during the exporting process. The nature of these file formats is that they convert their contents to raster.

Vector

Did you ever ask a math instructor for a real-world example of a principle you were learning? In the case of slope (y=mx+b) and similar graphing-related equations, they’re used to create vector-based graphics. These graphics are created using mathematical equations. All elements are created in proportion to one another using equations that scale. As a result, they’re able to grow in size without losing quality. The most common uses for vector graphics are logo design and illustrations.

Now consider this illustration. It’s a vector file; no matter how much you zoom in on it, the quality always remains crisp and clear. If this image was your logo, you could increase its size to fit on a large area such as a storefront facade, vehicle wrap, or sports venue signage without concern that it would be blurry. Viewers would see a crisp, clean representation of your brand in a manner that gives them confidence.

Common file types for vector graphics include:

• SVG

• EPS

• PDF

Note: These file types retain the original nature of the artwork in question. A vector graphic saved into one of these formats will remain vector, but a raster image saved as them will remain rasterized. These formats don’t convert the creation basis of the artwork.

Why does this matter?

When you understand the material you’re working with, you can then better understand how to properly use it as well as troubleshoot more effectively when there are unanticipated results.

Within the FileMaker databases we maintain, we aim to utilize SVG graphics as much as possible for a variety of reasons:

1. If the size or use case ever needs to change, they’ll already be prepped.

2. Nothing special or additional needs to happen for them to have a transparent background.

3. Due to their mathematical nature, they’re a considerably smaller file compared to identical outputs in PNG, JPEG, and other formats. This works to prevent database bloat.

Obviously, using an SVG or other vector-based graphic isn’t possible 100% of the time. Two easy areas for implementation, however, are button icons and client logos. They’re prime examples of when vector artwork would be best. Not sure how to create a FileMaker-compatible SVG? Check out our previous blog post that details how!

PK Information is a FileMaker-certified development agency serving the Tampa Bay, Miami Lakes, and Knoxville regions. We believe that software should work the way you do, with business priorities first and technology second.

LEARN MORE

Would you like to learn more about best practices for using images and graphics within FileMaker? We’d love to discuss the possibilities with you! Please complete this form and we’ll connect shortly.