Vector, Raster, JPG, EPS, PNG – what’s the difference?

Vector, Raster, JPG, EPS, PNG – what’s the difference?

If you’re confused over the difference between the many image file types, you’re not alone. When starting off a project, one of the first things we request from the client is a vector file of their logo. However, that request is often met with blank stares or responses like “can’t you just pull the logo from my site?”. As a marketer, understanding the importance and role of different image file types is essential to ensuring your brand is properly represented and to better communicate with designers, developers and printers.

Download our Image & File Types Cheat Sheet.

Download it, print it and save for future reference.

What is a vector? What is Raster?

We can start making sense of the issue by clarifying the difference between the two major image types – raster and vector.

vector-vs-rasterRaster images
use many colored pixels or individual building blocks to form a complete image. JPEGs, GIFs and PNGs are common raster image types. Almost all of the photos found on the web and in print catalogs are raster images.

Because raster images are constructed using a fixed number of colored pixels, they can’t be dramatically resized without compromising their resolution. When stretched to fit a space they weren’t designed to fill, their pixels become visibly grainy and the image distorts. This is why altered photos may appear pixilated or low resolution. Therefore, it is important that you save raster files at precisely the dimensions needed to eliminate possible complications.

Vector images, alternatively, allow for more flexibility. Constructed using mathematical formulas rather than individual colored blocks, vector file types such as EPS, AI and PDF* are excellent for creating graphics that frequently require resizing. Your company logo and brand graphics should be created as a vector and saved as a master file so you can use it with smaller items such as your business card and letterhead, but also on larger surfaces, such as your corporate jet. When necessary, always create a JPG or PNG for use on the web from this master vector file. Just be sure to save the new raster file in the exact dimensions needed.

*A PDF is generally a vector file. However, depending how a PDF is originally created, it can be either a vector or a raster file.  Whether you opt to flatten the layers of your file or choose to retain each one will determine the image type.

High Resolution or Low Resolution?

web-print-dpi-ppiTo determine whether your raster images are a suitable resolution for a specific application, you need to check their pixel density. Units of measurement such as dots per inch (DPI) or pixels per inch (PPI) refer to the number of pixels in one inch of the image. These measurements become important when you attempt to use raster images in specific places, such as on the web or in print publications.

The web, for instance, displays 72dpi (72 dots or pixels per inch) – a relatively low pixel density. Raster images with a low DPI like 72dpi look nice and crisp on the web. But this same low DPI image may not be suitable for printing on a brochure or packaging. To correctly print an image, it should be at least 300dpi, a much higher pixel density than the web displays. Resizing a low DPI image pulled from the web to fit the dimensions of your print project won’t work because the same finite number of pixels only get bigger and begin to distort. For example, let’s say you want to print your logo at 2″x3″ on a brochure. If have a 72dpi jpg of your logo and it’s 2-inches by 3-inches, it will need to be “stretched” to more than 3 times the size to get it up to 300dpi. That 72dpi logo may look great on your computer monitor, but when it prints at 300dpi it will look pixilated. Instead you should use a vector version of your logo (.EPS or .AI) or create a raster (JPG) with the exact dimensions desired and at 300dpi.

Different image file extension types and the best use for each

JPG
JPG (or JPEG) is a raster image that is often used for photographs on the web. JPGs can be optimized, when saving them out of photoshop, to find the perfect balance of small file size and high quality. On the web, you want your images files to be as small as they can be so your site loads quickly, but large enough to still appear crisp and not pixilated. A JPG can’t have a transparent background so they are always in the shape of a rectangle or square with a solid background.

Best use = rectangle or square photos and photographs on your website.

PNG
PNG is another raster image type. For the general marketer, the main difference to understand between a PNG and JPG is that a PNG can have a transparent background and is generally larger and higher quality. Therefore a PNG is ideal for saving logo files for websites because they can be placed over a colored background.

Best use = logos, icons and other images where a transparent background is preferred.

GIF
A GIF is another raster image type. A GIF is formed from up to 256 colors from the RBG colorspace. The fewer colors and shades contained in an image, the smaller the file size. Therefore a GIF is ideal for images that use just a few solid colors and don’t have gradients or natural shades. You wouldn’t want to use a GIF for a photograph.

Best use = simple web graphics such as web buttons, charts and icons.

TIF
A TIF (or TIFF) is a large raster file. It has no loss in quality and therefore is primarily used for images used in printing. On the web, because of load time, you generally want to use smaller images such as JPG or PNG.

Best use = images and photographs for high quality print.

EPS
An EPS file is a vector file of a graphic, text or illustration. Because it is vector it can easily be resized to any size it needs to be. An EPS file can be reopened and edited.

Best use = master logo files and graphics and print designs.

AI
An AI file is a proprietary, vector file type created by Adobe that can only be created or edited with Adobe Illustrator. It is most commonly used for creating logos, illustrations and print layouts.

Best use = creating logos, graphics, illustrations.

Editing vector files and saving “in outlines”
Vector files such as AI and EPS can remain editable so you can open them back up in Illustrator and edit any text or other elements within the graphic. With images that contain text that are saved as a JPG, PNG or GIF, you would not be able to reopen and edit the text.

At MODassic we often create files in Illustrator and save an AI file as our master file, but then also save an EPS version, “in outlines” which is used in production and sent to print.

Screen-Shot-2013-05-16-at-12.42.31-AM

Saving in “outlines” is a term that you will hear when sending files to print. If a printer doesn’t have a font you used in your design and the vector file is not saved in outlines then when they open the file the text won’t have the desired look as it will default to a different font. Saving something with “outlines” basically means you are locking the text so that it’s no longer technically a font but instead made up of vector shapes that form your letters. This is important when sending graphics to print. Saving a file in outlines makes your text no longer editable which is why at MODassic we keep the AI file as an editable master and then save an EPS as the locked final artwork which we send to print.

Working with images can be confusing, but bearing these key facts in mind will eliminate much of the hassle and of course we’re always here to help or answer any questions.

Download our Image & File Types Cheat Sheet.


  • Jamie

    Very concise and informative.

    As a designer who works for a print shop, I find myself having to explain this stuff to customers quite often.
    I will print out your “cheat sheet” to help with this in the future.

    Thanks very much.

    – Jamie (Quality Printing – Missouri)

    • modassic

      Thanks Jamie, glad you found it helpful!

    • modassic

      Thanks Jamie, glad you found it helpful!

  • Kelly

    And I am one of those people who say ‘huh’ when asked for a vector file. So this was very helpful to me.

  • As a designer, I am constantly explaining ALL of this to people. This little cheat sheet is EXACTLY what I’ve been needing for year! Though, I would recommend putting the “Best use” part that you have in the blog above onto the file type info. All in all though, it’s a great piece! Thanks for the download!

    • Ryan Short

      Great suggestion Janie – will do!

      • Would love the new download if you change it. Well, love the current version too!

        • Ryan Short

          Hey Janie, it’s been update per your request so you can go download the new version.

          • Thanks Ryan! That is PERFECT! Will definitely be sending this to clients and giving a copy to all of our team members for their reference. Great job!

  • As a designer, I am constantly explaining ALL of this to people. This little cheat sheet is EXACTLY what I’ve been needing for year! Though, I would recommend putting the “Best use” part that you have in the blog above onto the file type info. All in all though, it’s a great piece! Thanks for the download!

    • Ryan Short

      Great suggestion Janie – will do!

      • Would love the new download if you change it. Well, love the current version too!

  • Don

    Hi everyone!

    I am working on a project and I need to get the exact dimension of the object from jpg / image file.
    Any suggestion how?

    Thanks

  • Selena

    Hello this has been very helpful. I need to send my design to a manufacturing company as they will be printing my artwork onto material. Can they still do this if I provide them a PDF version of my artwork?

    • Ryan Short

      With a PDF it just depends how that PDF was originally created and saved. If it was saved directly out of a vector program like Illustrator then it is likely that the PDF is still vector and what they need. If that’s what you have then I would start there as it’s likely what they need. In the future I would always recommend getting the .EPS file from your designer.

  • Suzanne

    Thank you! Thank you! You answered all my questions on one page! Explained simply so the novice understands. 🙂

  • Jheel

    Hello Ryan,
    I had a question. What sort of files can used for printing the business cards & letterheads. I have been provided with the pdf files from my designer.

    Please help me.

  • NINAD R JAWADE

    I want to convert 400 DPI Tiff image inti 400 dpi eps image . Please help me about its conversion?

    • Ryan Short

      Is this a logo file or illustrated graphic or is it a photograph? If it’s a logo file or illustrated graphic then you will need to recreate it from scratch in a program like illustrator or open the file in illustrator and use a “live trace” for the program to automatically redraw it for you. The success of live trace depends on how detailed the graphic is. You’ll like need to adjust the live trace settings and then manually tweak it to get it just right. If you don’t have Illustrator then you’ll want find a graphic designer who do it for you.

  • Ryan Short

    It depends on the PDF files that your designer sent. A PDF can certainly be saved as a press quality file. However, sometimes PDF’s are saved as low resolution simply as an online proof. I would double check with your designer to see if what he sent you is press quality. Also, if your artwork or background color of the design goes all the way to the edge of your card you will want to be sure that the file includes “bleed”. This means that the graphics in your file go about a 1/8 of an inch past where the edge of the card will actually be so that when the printer cuts the card you have some excess that will be trimmed off. If you graphics end at exactly the size of the card than even a minor shift in cutting will look unprofessional and leave some white around the edge.

  • Howdeo

    “*A PDF is generally a vector file. However, depending how a PDF is originally created, it can be either a vector or a raster file. Whether you opt to flatten the layers of your file or choose to retain each one will determine the image type.” ? So which one if flattened is a vector or raster file?

    • Ryan Short

      If flattened it’s generally no longer vector.

      • Howdeo

        Thanks Ryan, appreciated.

  • lal

    One question about the gif/png. You mentioned gif as “Raster image format for solid colors with no gradients” and png as “Logos and images with transparent backgrounds”. But gif’s can also have transparent backgrounds right? Is there any fundamental difference between these two types?

    • Ryan Short

      Yes, both gif & png can have transparent backgrounds. PNG’s are generally larger file size because they contain more image detail and therefore are better for things with greater detail (like a photograph or something with lots of shades and detail) or if you simply want a higher quality image. A gif is better for graphics that are simpler and have more solid colors. For example, if you have an icon that is just has two solid colors a gif would be great because you’ll get it in the smallest possible file size which is good for loading speed and you won’t suffer quality because it’s just two flat solid colors with no gradients or shades of color. Now if that icon was more of a logo or illustration and had more detail to it with lots of colors you want to use png to get the best quality.

      • lal

        Thanks.

    • 1. gif has a limited number of colors (up to 256)
      2. gif supports “animation” (more than one images can be stored in the same file as frames)

      • Ryan Short

        yep – good points!

      • lal

        That’s right. Thanks.

  • Felix

    I learned a lot from it, but I have a problem, I bought a vector file image in order to be used in a website I’m trying to create, but when I try to upload the image to my home page, I can’t, it doesn’t allow me to do it. What’s the best way?

    • Ryan Short

      You’ll need to resize it to the size you need it on the web and then save it as a jpg or png to upload

  • Andrew

    guys for all those who struggle with the quality of your images and you want it to be improved accurately, I would suggest going for the iVectorize.com online service. They are pretty good and fast. http://www.ivectorize.com

  • jerry

    what is the abreviation of jpg???

    • Ryan Short

      It stands for Joint Photographic Experts Group

  • Chelsea

    Hi, I need to create a vector file for a logo to be used for signage and so it can be rescaled by the client. I have designed the logo basics in Photoshop, am I right in thinking if I import the psd file into illustrator and do a live trace of the logo and text this will then make it a vector? When sending to a client I don’t no what I would send it as as they will be sending to a sign company etc to be rescaled. So would I send the original AI file?

    • Ryan Short

      Yes, doing a live trace in Illustrator would get you a vector version of the logo. I would send them an EPS as its a little more universal version of the vector file AI.

      • Chelsea

        Ok thanks for your help!

  • Kodjo

    Hi, Is it possible to convert a JPEG to an editable EPS file?

    • Ryan Short

      No, you can go from EPS to JPG but not the other way.

      • Miller Hay

        Yes you can do that, however you have to have special graphic design vectorization skills if you want to get a similar and high resolution image. I use http://www.ivectorize.com to do that job for me.

  • ikashi
  • Jake Stewart

    The part about 72dpi for web is demonstrably false. Most modern monitors are far denser than 72dpi and dpi settings are ignored by operating systems and web pages when rendering images.

  • Heidi Reynolds

    When the marketing department provides me with pdf images to use, how do I use them when creating my e-newsletter and for social media postings. Best I know is to convert them to jpg, but, I’m finding the online converting options are full of viruses/malware/PUP. What’s the reason the marketing dept provides these images pdf and not vector? I’m sure there is a great reason, I’d like to learn more.

  • kevin

    why cant i ever export a vector down to a small png logo for the web, say 300×150 , without the picture becoming all distorted and not crisp? I thought that was the point of vector images, to be able to scale to any dimension without distortion?

    • Ryan Short

      Hmmm… you definitely can. What software are you trying to export from? There must be something in the export steps that’s not right.

    • Raymond

      Two things:

      1 – 300×150 is really not that large to begin with. You’re going to be seeing aliasing by the nature of its size.

      2 – Your compression can be set too high, further exacerbating the appearance of pixelization.

  • Donald Smyth

    This was an excellent summary of all the confusing file types – thank you so much. Also thanks for answering the question about pdf’s differences below. Now I just need to figure out why when I’m saving my vector logo in Adobe Illustrator to a raster like jpg or png, it gives me a message saying ‘Warning: this document has a raster effects resolution of 72 dpi or less.’, even at a max-res setting….

  • Nelly

    I am about to purchase my logo i made from a website since I don’t have those fancy programs like adobe illustrator and photoshop to make my own. Although i did make my own with their program. Anyhow, I am needing a logo with a transparent background for my website. If i upgrade my file to a vector file it says i get this:

    1) Scale. Maintain a clean, crisp logo at any size.

    2) Keep Your Color. Vector files function in all color modes.

    3) Avoid design fees. Vendors charge fees to convert pixel art.

    Files include .AI, .EPS & .PDF

    Aside from the fact that barely understand that language I just want to know if i purchase this
    1) What exactly am i getting
    2) Any of those files there that says i will get good to make a transparent logo
    3) Will I need a fancy program to view my “vector file” ( i have a mac with basic programs)

    ahhhh help!!!!!

    • tom

      bitch please

  • Tom Um

    AI file may be a proprietary, vector file type created by Adobe but it is not only Adobe Illustrator.that can create AI files. Previous versions of CorelDraw do save files in AI formats as well. Thanks for the enlightening write-up overall.

  • Kip Johnson

    It should be noted that not all EPS files are vector. A raster image can be saved as an EPS. Asking a customer for an EPS does not assure you will get a vector file.

  • Thank you very much. What about bitmap ? I mean windows bitmap.

  • mitesh

    As a desiging work vector file. So this was very helpful to me.

  • Jake Resor

    Wow, this is great. Thanks so much.

  • Toni Scott

    YES! OMG thank you!

  • Infamous Onion Cutting Ninja!

    I made a logo for my grandpa to put on his car. The company turning it into an emblem said that it was indeed a vector file but it is not clean enough to turn into an emblem and that they can convert it by hand for an extra $25. My grandpa does not wanna pay extra money for an already expensive job for what it is. (just some plastic with chrome painted on) So he wants me to find out more information as to how to convert it myself so that they can turn it into an emblem and my grandpa won’t be spending extra money just for convenience. The only problem is I have no idea what they’re talking about! They are so vague but in their defense they’re talking to my grandpa so they don’t want to overwhelm him with terms like “vector files”.

    I used Adobe Illustrator CS6 and I admit as someone whose only used Adobe Photoshop CS6 I am a complete noob! So maybe somehow in making the logo it was deemed “not clean”? But I also saved it as an eps file so maybe by “convert” they mean it needs to be a different file type. I’m so lost! This is the first time I’ve done something like this so these are all new terms!
    All of these comments are from 3 years ago but if anyone is still reading these comments please help? I need experienced help!

    • GayKidFromTheBlock

      St00pid n00b, go away nerd nobody will halp u m8

      • Infamous Onion Cutting Ninja!

        Never mind, I figured it out and they said the file would work perfectly now.

      • hiba ahram

        what the fuck is wrong with you? he’s asking for help and all you did is insult him!!! you useless bastard

  • YEEZYS GIRL

    I HAVE YEEZYS TOO

    • YEEZYS GIRL

      letz d8, lul xD

  • PickleTickler

    Hey fam, lets chat

  • StriderMan

    Great explanation. I was sent a .eps file and needed to edit some of its text. I wondered why I couldn’t – now I know I need the .ai file.

  • Syah BayRon

    Finaly.. A proper Cheat Sheet.. Thx a lot guys..!

  • Marcos Rebello

    Well, I am looking for a free design program that puts out vector files for my simple line pattern designs. Because whatever I design I want it to be able to be expanded or contracted to fit any size in the future. Anyone knows such program? If so, mail me at mrebello2@gmail.com
    Thanks

    • teifeldassociates

      two examples- Libreoffice Draw, or inkscape

  • Pat Miranda

    I have RICOH and have a problem called clutching. Any ideas how to solve, or what causes this??

  • Pat Miranda

    let me explain, starts printing a few 100pgs. then plain white sheets, then picks up printing where it left off, then few 100 more or so pgs. then more white. I’m sure it is something in the file,but not sure what.

  • Mrs Langley

    Hi Guys, I have not received an email with the cheat sheet despite trying twice. Do you have any ideas on why this might be or how I could access it? Thanks.

  • kaki_vision

    I have an image that is 5616x 3744 pixels, 18.72inch x 12.48inch. It has been created at 300 pixels/inch.
    I want to print it out at 120inch x 80inch at 300pixels/inch. is it possible? is it possible if yes how can i do that?
    thenks

  • some dude.

    I was watching this good ass porn video and I ended up here, still busted a nut tho…

  • Pim Sandra

    Thank you so much! I have been struggle about business cards for so long to print with https://www.gogoprint.sg/