You’ve grabbed the perfect screen shot or taken a photo, done a little editing, and now you need to get it out to the world. But, which image file formats do you need? In my role as a video editor, I deal with graphics, videos, and images on a daily basis and have learned a lot about which ones work best for specific situations. The topics I am going to cover are how file types differ, common web sizes, vector versus raster art, and digital versus optical zoom.
Common Image File Types
After you are done editing, you save it and you are prompted with a window that asks you what type of file would you like it saved as. TechSmith Snagit will present you with options such as .png, jpeg, .tiff, .gif or .pdf. Other more advanced image editors (such as Adobe Photoshop) offer additional formats like .psd, .psb, .bmp, .eps, .raw, to name a few. The main difference between all of these image formats comes down to two things: compression and compatibility.
Lossy vs. Lossless Compression
All of the files I mentioned previously fall into two main categories. Lossy images, which can be described as image formats that do not store a perfect copy of the original image and thus have smaller file sizes. And lossless images, which store an exact pixel-by-pixel representation of the image, but in doing so, require more space. It’s not uncommon to come across both types when you are looking at photos on the web. The most popular lossless image formats are .tiff and .png. I always recommend editing and saving your photos in a lossless format, but when it is time to export them for the web I would use a common lossy format such as .jpeg, which allows you to choose the amount of compression, and therefore the file size and quality, that you want.
Vector vs. Raster (bitmap) Images
Other common terms that you may have heard before in regards to image formats are vector art versus raster art. Raster art is made of a certain number of pixels and vector art is based on mathematical calculations. In other words, raster art cannot be scaled beyond 100% without losing quality and vector art does not use pixels and therefore is resolution-independent. If you are a Camtasia or Snagit user, you may have noticed that some callouts are in vector form, they can be scaled without losing quality. Popular vector image formats include .eps (most common), .ai, .pdf, and .svg.
A proprietary format refers to a file format created by a company, organization, or individual. These formats are typically controlled by a company and the restriction of their use is for their own benefit. This is in contrast to an open file format that can be published and used by anyone. Some examples include Photoshop’s .psd and TechSmith Snagit’s .snag file formats. It’s best to use these formats when you plan on editing the original project at a later time, since they maintain all of the original layers and editable properties. Proprietary formats usually have a larger file size and maintain full quality of the original image. Compatibility with web services and third party image editors are where these formats fall short.
In my role as a video producer and motion graphic artist, I almost always am dealing with a bunch of different image formats. All colored image formats hold values for red, green and blue channels that make up the entire color spectrum, but certain formats offer the ability to retain an additional layer of transparency or “alpha channel” that is built into the file. I included a comparison below (the checkerboard symbolizes a transparent background) that hopefully helps you understand what I mean.
The main benefit is that the format allows you to add graphics on top of other graphics without having a “white box” around it. The most popular image format that holds an alpha channel is the .png format.
Common Web Image Sizes
The size of the images you are posting to the web can have an effect on how those images are viewed. Most photo sharing sites like Facebook and Flickr will accept higher resolution photos and convert them to a format that works well on their platforms. But if you want your photos to load quickly, for your website for instance, I would recommend finding a positive balance between file size (mb, kb) and dimensions (pixels). If your file size is too large, your photos won’t load very quickly and your visitors will lose their patience, plus search engines like Google will not hold your site in high regard. But if your dimensions are too small, you risk compromising the quality. Here is a chart below that shows common screen resolutions that should help you get started.
Optical Zoom vs. Digital Zoom
The last topic I want to cover is optical versus digital zoom. When I say these terms I am referring to using a point and shoot camera to take pictures where the subject is being enlarged. Optical zoom means that the camera is using “optics,” or a lens, to bring the subjects closer to the camera. Digital zoom means that you are actually scaling the photo. You are taking a portion of the image and enlarging it, thus faking the optical zoom look which results in a scaled version of the original. That’s why if you are using a phone to take pictures, it’s always better to physically move the camera forward or back to fill up the frame because they have fixed lenses. Optical zoom is always better, and I do not recommend using zoom on your phone if you want crisp, sharp photos.
I hoped this helped shed some light on image formats and helped you understand some common terms around them. Remember, having a solid base understanding of how digital images work will go a long way in helping you produce better photos for the web!