IMAGE FIL E T YP ES

EXPL AINED
A Basic Overview & 101 Understanding
of Image File Formats & Extensions
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 ones should I use???
--------------------

This e-book will give you a basic understanding and overview of image
and graphic file types, formats and extensions. And more importantly
how to use them whether you’re a graphic/web designer or 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 in this e-book, we’ll focus on graphic
and image related file types that we all knowingly (or unknowingly) use
often on a daily basis.

The way I wish someone would’ve explained this to me when I got

started is like this - graphic & image files are either one of two file types:

1) WEB (Bitmap or “Raster” files)

2) PRINT (Vector files)

All files 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.

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 2

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 below 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
below and aren’t confined to a certain width or height like web files.

BITMAP VS VECTOR

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 are “bitmap” or “raster”
programs while Adobe Illustrator, In Design and some text editing
software are “vector” based programs.

How I learned this the hard way? Back when I was in a band and
designed our t-shirts and merchandise, I created a design for our banner
in photoshop, sent it in to get printed and when we went to pick it up,
the letters and typography that were now blown up to 8ft wide were
completely pixelated, distorted and blurry. We spent several hundred
dollars on a banner that looked terrible and nearly unreadable because I
didn’t understand the difference between web vs print files.

So with that said...let’s have some fun and get into web vs print files.

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 3

1) Web Files
Small, optimized for web and fast loading but are set to 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 a vector web file that can be scaled without losing quality.

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.

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 4

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 high 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.

There are more print file extensions but these are the most common
that I tend to work with that you should be familiar with.

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 5

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.

How I learned this the hard way?

Bringing you back again to the band days, I began designing t-shirts
for other bands and organizations as well and I designed a whole set of
shirt designs (in Photoshop in RGB color) that looked amazing online
then when printed, looked completely different. The colors were off...
reds were orange, purples were pink, etc and the client, who paid me
and spent thousands of dollars on printing the shirts was, to say the
least, furious and confused. As was I because I unknowingly designed

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 6

them in Photoshop in the RGB web color mode. So while they looked
great online, turned out completely different when printed.

If you’re a designer, make sure your color mode is set correctly.

Resolution - One very important aspect to know about, not necessarily

for the laymen but definitely for the designer, 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. Currently, my main
iMac is a 2011 so the resolution is much lower than my 2016 Macbook
pro. So when I look at a design on my Macbook, I often have to zoom in
to get it to fill my screen where as it’s already large on my iMac.

You’ll want to be sure to “Optimize” high resolutions images and “Save

Them for Web” before either putting them on a website or attaching
them to an email. (Free optimization tool listed in the resources below)

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 7

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 def width.
When I’m building websites, I never like images to exceed that 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 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 (mega bytes) 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.

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 8

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 via email.

Again, be sure to “Optimize” your images and “Save Them for Web”
before sending, attaching or doing anything with them online. A
reminder that a free optimizing tool is listed in the resources below.

Wrapping Up:
In closing, one question you might have is “why would you ever create
a bitmap file if it distorts & pixelates???” Well, if you’re working on a
website or with online graphics, generally your designs can be built
much smaller and in the web color modes while if you’re creating, say
a logo, that needs to look good on a website but also scaled big as a
design on a billboard, then you’ll want to build that as a vector file. And
with web files are being smaller, they don’t take up as much room on
your computer.

Bitmap programs like photoshop do have additional advantages as

they’re generally much more flexible and power when it comes to image
editing, advanced graphics, etc, but I tend to do most all my designing
in a vector program like Adobe Illustrator because those designs can be
scaled and used for print if needed. One big thing to remember is that
vector files can easily be saved down as web files for digital uses but
bitmap files can’t be saved as vector or scaled up.

Well I hope this overview on file types has helped you understand the
biggest difference between file types and more importantly how to use
them moving forward. Below are some final takeaways and resources.

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 9

Takeaways:
• 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.

Resources:
• Free Image Optimizing/Resizing Tool - ImageResize.org
• How to Optimize Images for Web (for designers) - JoshHall.co
• How to Optimize Images for Web (for non-designers) - JoshHall.co

View the full post with the video and additional resources at:
• Joshhall.co/image-file-types-explained

To view my courses and other resources,

head over to MY WEBSITE

To view my tutorials, vlogs and videos,

subscribe to MY YOUTUBE

To connect with me directly, like and follow

me on MY FACEBOOK

IMAGE FILE TYPES EXPLAINED | JOSHHALL.co 10