JPG, PNG, PDF, EPS, GIF, AI, SVG, PSD oh my…
There are so many image file types but what the heck is the difference and which one should I use???
This post will give you a basic understanding and overview of image and graphic file types, formats, and extensions. And more importantly how to use them even if you’re just attaching images to an email or sending a logo file or design to a printer. It may not be a sexy topic, but it’s important!
First off, there are a lot of file types out there. Some formatted for documents, spreadsheets, and text programs; others formatted for code, computer systems, etc but here, we’ll focus on graphic and image related file types that we all knowingly (or unknowingly) use often on a daily basis.
To put it simply – graphic & image files are either one of two file types:
- WEB (Bitmap or “Raster” files)
- PRINT (Vector files)
All file types, whether JPG, PNG, PDF, EPS, etc. will be either a web or print file and there’s a big difference between the two. We’re going to cover web files vs print files and I’ll briefly explain the most popular extensions within each file type. We’ll also expand on the most important aspects of each type including color space, resolution, and size which we’ll go into more detail below.
In short, Web Files are bitmap files (also known as “raster”) that are built within a certain set of pixels. These look great until scaled or expanded as they pixelate and blur as the image above shows.
Print Files are known as “vector” files which can be expanded and scaled up without losing quality. Vector designs are built within mathematical lines instead of pixels so they remain sharp as shown above and aren’t confined to a certain width or height like web files.
Ever had a picture or design that looked great on the web but looked terrible when it was blown up or printed? That’s exactly what happened. Important to know is that some programs like Adobe Photoshop and many image editing/web editing software (that almost anyone can use) are “bitmap” or “raster” programs while Adobe Illustrator, In Design, and some text editing software (that mostly graphic designers and digital illustrators use) are “vector” based programs.
So with that said…let’s have some fun and get into web vs print files.
1) Web Files
Small, optimized for web, and fast loading but are set to a certain size and will pixelate if scaled.
File Type: Bitmap (or Raster)
Color Space: RGB (red, green, blue)
Resolution: 72dpi (dots per inch)
Size: Generally smaller than 1920px and in KB (kilobytes)
Popular Web File Types:
JPEG - Joint Photographic Experts Group
Most common image file type. Can be saved to be very small for web or high res for print.
PNG - Portable Network Graphics
These can have a transparent background. Ideal for web but not for print.
GIF - Graphics Interchange Format
These are the animated web files often seen on sites and shared on social media or messaging apps.
SVG - Scalable Vector Graphics
This is actually a file that can be scaled without losing quality on the web. So it’s kind of a vector/web file.
PSD - Photoshop File
These should be exported as a jpg or png before going online.
There are more web extensions (ex: TIFF & BMP) but these are the most common that I tend to work with that you should be familiar with.
2) Print Files
Built to be scaled & expanded without losing quality. Great for print but often large files that load slow on web and are too big for emails.
File Type: Vector
Color Space: CMYK (cyan, magenta, yellow, black)
Resolution: 150 – 300dpi (dots per inch)
Size: Often 3000px-4000px wide or higher and several MB (mega bytes)
Popular Print File Types:
PDF - Portable Document Format
Most popular file type for printed documents that can be created or saved as a web or print file.
EPS - Encapsulated Postscript
Great for logos and embroidering. Often one or two color files.
AI - Adobe Illustrator file
Can be used for printing but should generally be exported as a PDF or EPS before printing. Can also be saved as a jpg or png.
INDD - Adobe Indesign file
Most common as multi-page documents for print and can be saved down as a web PDF or Document.
RAW - Raw image format from a camera
Popular extension when images are downloaded from cameras.
Color Space, Resolution, & Size
Now let’s cover the other important aspects mentioned above in a little more detail.
Color Space – Most people don’t know that web files and print files have different color spaces. Web files are built in an RGB (red, green, blue) color space which is much larger and vibrant than print files which are formatted in CMYK (cyan, magenta, yellow, black).
The main reason is because colors on computers, phones, and screens have light behind them which elevates the colors while printed colors on mediums like business cards, flyers, t-shirts, or banners are a mix of the colors listed above. And when colors are printed on paper or fabric, they darken and spread which is why if you’ve ever seen a picture, image, or design look great online but when printed it looks completely different, chances are it was created in a web color mode but printed in CMYK.
Resolution – One very important aspect to know about, not necessarily for the laymen but for the web design process in general, is resolution. This is also known as DPI (dots per inch) and in short, tells the file how many colors can be placed in a file per inch. Commonly, web files should be set and built with a DPI/resolution of 72 while print files can be built at between 150-300. That’s also why an image set at 500px wide at 72 dpi will be significantly smaller than the same image set at 500px but is 300 dpi.
Lower resolutions are great for web as they load faster and aren’t as big while bigger resolutions are great for print as they’re larger and print out much more clearly when scaled and expanded.
You’ll also see this with older vs newer computers. A 2011 iMac for example, has a much lower resolution than a 2019 Macbook Pro. So when a design is looked at on the iMac, it’ll look much bigger at 100% opposed to the Macbook Pro where 100% will look much smaller since the resolution is so much higher.
If you’re tech-savvy and decide to add pics to your site after it’s designed you’ll want to be sure to “optimize” high-resolution images and choose to option to “Save for Web” before either putting them on a website or even attaching them to an email. (Free optimization tool listed in the resources below.) Otherwise, I will need to optimize them before being able to properly use them on your site.
Size (Pixels & Bytes) – Finally, we’re going to look at size which is similar to resolution. Size isn’t as important for vector files because as you now know, vector files can be scaled and expanded without losing quality but it’s VERY important for web files because when a design or image is set to a certain size, if you blow it up or expand it even just a little, it will pixelate and lose quality.
For the most part, web images and designs don’t need to be much bigger than 1920px wide, which is a pretty standard high definition width. Print designs and images, on the other hand, may sometimes get up to between 3000 or 5000 pixels.
When you take pictures on your phone or with a digital camera, for example, the raw or jpg files are very big. Sometimes thousands of pixels wide and high. And the same with stock photography sites. Many times when you purchase a stock photo, it’ll be massive with an actual file size of several MB (megabytes) which is the other piece to the equation with size.
Computer images and file sizes are measured in KB (kilobytes), MB (megabytes), GB (gigabytes), or TB (terabytes). There are lower and higher sizes as well but these four are the most common that you’ll see. Web files should ALWAYS be as small as possible in KB’s and with printed designs and high res images, you’ll often see those in MB’s.
So for example, if you take a picture with your digital camera and download it to put on your website, it could be 4000px wide and 6.5MB big. That is a huge file that will slow your webpage down dramatically and needs to be optimized before putting it online or sending it via email.
Again, this is why it’s important to “optimize” your images and choose the option to “Save for Web” before sending, attaching, or doing anything with them online. A reminder that a free optimizing tool is listed in the resources below if you will be uploading images to your site at any time. Otherwise, I will be doing it.
- Make sure your logo is designed as a vector file. (remember vector files can be saved as bitmap/raster file types like JPG, PNG, etc but they can’t be saved as vector)
- Any images taken from a camera or downloaded from a stock site are going to be huge and need to be optimized for web BEFORE going on a website or attached to an email.
- When attaching images or sending files, look at the file type, size and resolution to see if it needs to be optimized before sending.
- Don’t send a small jpg logo to a printer as it’s a web file that will pixelate and distort. Send the PDF, EPS or AI vector file.
- Different Types of Image Files – Hubspot
- Choosing the Right Image File Type for Your Site – Elegant Themes
You can also Google “image resizing or optimization tools” and you’ll get a plethora of options.