Let’s face it, there’s a ton of image file formats out there, and unless you are a graphic designer, you’re probably confused as to what all those file extensions mean. You’re also probably curious why your web developer or ad agency are asking you for specific file types for your different digital assets. In this video, our website consultant, Brent Haeseker, speaks with Derek Heron, one of our designers, in order to help you learn about these file formats.
Full Transcription:
Brent Haeseker: [00:00:04] Hi I’m Brent Haeseker, Web site consultant with NetSource Technologies. And today I am here with Derek Heron one of our designers here at NetSource. I brought Derek here to join me in a discussion on image file types, because whenever we’ve got a new project that we’re doing for a customer one of the first things that we’re going to ask them is “Do you have the image files for your logo and photos that you want used on the website.” So image files are really important for us because we want to make sure we’re getting the correct ones for the final output for the website and have it look as good as it can.
Brent Haeseker: [00:00:50] So before we get started on that, I’m going to introduce Derek and let him just tell you a little bit about himself and what he does here at NetSource Technologies.
Derek Heron: [00:00:58] Hi, I’m Derek, I’m a graphic designer here. I handle web design and I also handle any of the print design as well. I’ve been doing graphic design work for the past 15 years throughout the print and web industry so I have a vast knowledge of both sides of the equation.
Brent Haeseker: [00:01:19] Okay great. What I’m going to do is have you tell us a little bit about the difference between production files and rendered files and before you actually start out, I’ve got a handy dandy little chart here – isn’t this cool.
Brent Haeseker: [00:01:35] These are the files that we’re going to be talking about here. So we’ve got our image files across the top here. We’ve got JPEG, we’ve got AI file, we’ve got EPS, TIFF, and PSD. These are the production files that we might typically ask of you if you have those. And the other files you might be familiar with are JPEG, GIF, PNG PDF and occasionally, although it’s very rare, you might see SVG or Web-P. So go ahead tell about these files and how they differ and what they need to know about.
Derek Heron: [00:02:14] Sure. We’ll start with the production files. The production files will basically be the program that you’re using to create your file, whether it be your logo or whether it be an image. Your digital camera – Most digital cameras will save your image in JPEG or you can also have the option of saving the file and Raw. Raw gives you more information that can be used to edit the photo, once you get into a program such as Photoshop – which is the PSD file that we showed just a second ago. Photoshop file is a raster based program which means it uses pixels to create your image.
Derek Heron: [00:02:51] So, whatever you start out with is going to be your highest quality. When you open up your document and you start that out – whether it be from your image or from your camera or if you’re just starting a blank document and adding text or graphics to it – that resolution is set right there as a DPI. Print resolution would be 300 DPI. Web revolution would be 72 DPI. Print is using a lot more dots per inch to create that file whereas the screen (of a website) is using less DPI, which is why you can get away with a lower DPI on web font and images and stuff.
Derek Heron: [00:03:31] With the raster program you’re going to get, at best, whatever the file size that you start with. As I said earlier that’s going to be the biggest you’re going to get. If you ever try to enlarge that file from your starting point you’re going to lose quality. If you go down you’re OK, but if you go up you’re going to lose quality.
Derek Heron: [00:03:52] There’s another program for different files which is Illustrator. There’s other programs that work the same way such as CorelDraw. They’re using a vector based program. What vector is, is it creates your image. It doesn’t actually do photographs. You can put a photograph into a vector program; however, it’s going to stay as a raster pixel image. The vector, what it does, is it actually uses a mathematical equation to create your image. So if you have a logo and you’ve created it in a vector art, no matter how big you blow that up you’re never going to lose resolution. You could put it the size of a building – if it’s vector graphics it’s just using that mathematical equation to recreate that at a larger size.
Brent Haeseker: [00:04:36] So those vector images that he’s talking about, that’s something that you want to have – like your logo. Then if you’ve got a copy of that file that a developer has created for you then you can use that when a web developer asked for that logo – you can give them that file and he can do what he needs with it. If you’re getting a billboard done and you need it gigantic, you know 10 feet wide or whatever, you can give it to the billboard company and they can blow it up to that proper size, and it’s always going to look the best it can, because it’s in a format that can expand back and forth however it needs to.
Derek Heron: [00:05:11] And on the chart that we showed earlier the AI file is the Adobe Illustrator program. Also on that list that he had earlier was the EPS. EPS’s can hold vector images but you can also put raster images into it. So from our standpoint sometimes when we get an EPS it’s not necessarily a vector file, but EPS will hold vector files and PDF’s as well.
Brent Haeseker: [00:05:36] Right. So there is some crossover but really the most common format for, say a logo, that you’re going to want it from is, I’m going to guess, an AI file or EPS?
Derek Heron: [00:05:45] Yes, the the good thing about the PDF and the EPS is when you export the file from Adobe Illustrator. When you go to that your PDF settings and your EPS settings you can do what’s called converting the text to outlines. Because if you send me an AI file and you put your font in there and you didn’t convert that font to an outline then I get that AI file, if I don’t have that font on my computer then it’s going to substitute it with whatever font is on my computer. So then your logo is going to change. But when you’re exporting as EPS and PDF there’s actually options in the export to convert all text to outlines and then that way we never have to worry about a text issue.
Brent Haeseker: [00:06:34] It’s really kind of a finished file that you can then work with as you need it.
Derek Heron: [00:06:38] Correct.
Brent Haeseker: [00:06:38] Okay so EPS and PDF are two good file formats to have your logo in a vector format. As for other images and things like that on your site I’m going to guess a JPEG is most likely what you’re going to want to use? And you probably have noticed the JPEG is both a production file and it is also a final rendered file. You’re probably familiar JPEG’s, they’re are all over the Internet. How come a JPEG is also a production file and a rendered file? (We’re) requesting JPEG file but then sometimes (a client) gives us a JPEG file, and we say “That’s not the right kind of JPEG”. Tell us a little more about that.
Derek Heron: [00:07:23] A JPEG can hold a lot of information but it is also a compressed file. It can hold millions of colors, like a photograph, (which) has millions of colors. So, if you have a JPEG shot with your digital camera with a large mega-pixel you could have that photo as a very large file. You can also take that photo as a JPEG and size it down to the size of a penny and then you’ve lost a lot of your resolution. (Well), not necessarily your resolution, as you can have a very fine printed image as a JPEG if it is saved right at the penny size. But sometimes if you compress that file that size then it’s not really usable for the web.
Brent Haeseker: [00:08:08] Right. So, you take a JPEG, your original (file), and then compress it down smaller – now it’s a smaller file. And then we get that smaller file and we want to use it bigger on the website. Now all of a sudden that pixelation happens. So that’s why with JPEG, we are always going to ask for the highest resolution or the original version of the JPEG file as it comes from a camera.
Derek Heron: [00:08:32] Right. Yes. The more resolution we have the better off we are, because we can always go smaller. Going larger is when you start to have issues.
Brent Haeseker: [00:08:41] Right, exactly. So I guess to summarize so far, your logos EPS or PDF format is going to be good?
Derek Heron: [00:08:47] logo’s can be created in Illustrator. You can also create logos in Photoshop. However, like I said before, whatever size you’re starting with that’s going to be your max size.
Brent Haeseker: [00:09:00] So if you start on an image this big on your computer screen and you want to be on a billboard, it’s probably gonna look pretty crummy.
Derek Heron: [00:09:06] Yes.
Brent Haeseker: [00:09:08] OK. So let’s see what other questions I might have here for you. This is a good question we get a lot. People say “well can’t you just scan my logo,” for example, “off my business card”. Tell us a little bit about that and why that is such a terrible idea.
Derek Heron: [00:09:28] There are multiple reasons why that is. Every scanner is going to interpret color differently. And you’re going to get a color shift right off the bat with the scanner. So, what’s going to happen is you’re going to have… First of all, let’s take a step back on this. When your card is printed it is printed using a process called CMYK, or it could be Pantone colors. It’s actually using Inks. Inks show color differently than your monitors, your RGB. So, first of all you’ve created your logo and you’re looking in on your computer screen. Well when you’ve printed it you’ve already had a color change. You can work with different ways to get that to really look like what you’re seeing on your computer. But now what happens is now we’ve taken this CMYK and I’m going to scan it in and convert back to RGB for the computer, and we’re going to get a color shift.
Derek Heron: [00:10:25] Also, the scanner is going to pick up all the little dots that are used to create that image when it’s being printed. Especially if it’s a commercial press. If you ever get like a big magnifying glass and look at something that’s been commercially printed it’s all little dots next to each other to create that image. So when you scan it in, the scanner is going to read all those dots and you’re going to actually see that dot pattern on your logo.
Brent Haeseker: [00:10:51] Right. You’re also going to see all the dust and everything else of paper or the texture of the paper which comes through especially on a business card.
Brent Haeseker: [00:10:58] Of course you’re scanning from a very small logo and a business card to which again following that principle we talked about earlier, whatever the smallest you start with, if you try to blow that up, it’s going to look terrible. Even if you had it on a larger piece of paper like this, still it’s getting downgraded.
Derek Heron: [00:11:16] You’re getting downgraded image and there’s just a lot of things that you can run into and it also will slow down the process as well.
Brent Haeseker: [00:11:25] Right. Now a lot of times too, when when we ask for an image file from a customer for their logo or different things like that. A lot of times they’ll say we don’t know what you’re talking about. We don’t have a copy of our logo but obviously somebody to because they’ve got business cards printed up, they’ve got letterhead, they might have a sign for their business. They’ve got it somewhere. So this is basically saying “Hey make sure whoever has your logo that you get a copy of that.” So a lot of times when we’re talking to a customer, we’ll help them track down their logo and their digital files and then tell them “Hey it’s a good idea to keep a backup copy because really that’s one of your business assets.”
Derek Heron: [00:12:13] That’s right it is. What’s going to happen is if you need to get something even outside of web if you need some business cards printed. Hey your printer went out of business. If your printer is holding that file, and that printer goes out of business and you didn’t get that file before then it’s gone. So you need to keep a copy yourself on your computer and also on a cloud device such as Dropbox so that you have multiple access points to that file.
Brent Haeseker: [00:12:41] Right yeah there’s so many different services out there because you don’t just want to keep it on your local computer because your local computer crashes then your logo is gone. With all the different services that are out there now there’s really no excuse not to have it out there somewhere in the cloud. Like you said Dropbox is a great service. Evernote, Google has got their online drive. You’ve got Microsoft. Everybody has them.
Derek Heron: [00:13:05] And you have those companies that back up your whole computer.
Brent Haeseker: [00:13:07] Exactly so. I mean there’s tons of these companies out there. So make sure you have a backup. Yeah, and also if you’re not comfortable with having it out there in the cloud, which really everyone does now, but you can still save it on a CD or DVD or put it in a bank safety deposit box. Just don’t forget that you have it because that’s the other thing is people will have a copy of their digital files but they just won’t remember where they put it. But anyway definitely have a back up. If we’re ever producing because we do logo development too, That’s something that we do provide.We Provide a backup of all your digital files to you. We provide that on a CD so you do have a copy of that.
Derek Heron: [00:13:50] And the different formats: the production and rendered files.
Brent Haeseker: [00:13:54] Exactly. So you would have the original production file that somebody else could be able to do something with if another developer or sign company or something like that needed do some tweaks they would have those original files but you’d also have all the other files you need for output to different services you might need it for. Anything else that you feel the need to go over?
Derek Heron: [00:14:13] We kind of went over the production files, but we really didn’t get too much into the rendered files.The rendered files are on one bottom row here. These are the type of files that you will actually see being used on your Web site. There’s a couple different ones and each one has its own benefits. We already went over the JPEG. Like I said earlier JPEGs can hold millions of colors they’re great for photographs. JPEGs do not have transparency. So if you’ve ever seen some sites or with your site, if you have your logo up on the top and there’s a colored background, sometimes you’ll see that white box around it. Well that’s because there’s no transparency in that file. There’s multiple file formats that don’t hold transparencies and do hold transparencies but JPEGs do not hold transparencies. So therefore if you’re using a JPEG it needs to be the full photo or it has to have a white background behind it. Or you can try to color match the files as well. But that can get a little tricky.
Brent Haeseker: [00:15:14] Sometimes if you been on Web sites and you might see like a little box around the logo. That’s a different color from the background. That’s probably because it was a JPEG, and they were trying to just plop it on there and it didn’t have the transparency to match.
Derek Heron: [00:15:28] The thing is that some people’s monitors will show those slightly different. So it might look good on your monitor but someone else’s monitor might see that differently.
Brent Haeseker: [00:15:35] Because the contrast settings on the monitor will bring in and out different colors differently.
Brent Haeseker: [00:15:41] The next one is the GIF. It’s a debate. People say whatever. I’ve always called a GIF because Jif is a peanut butter and it’s with a J. So I call it a GIF but I think more commonly GIF is probably what most people use.
Derek Heron: [00:15:55] And I think the creator calls it GIF. The creator who actually made the file format, but He’s wrong, I’m going to go GIF.Now GIFs are a little different. They only hold 256 colors. So you’re not going to get the high quality crisp photograph out of GIF, but they do hold one bit transparencies. And what that means is you can choose one color in the file to be transparent. So the White background you can choose that to be transparent. So they do work well for logos especially logos that are nice clean shapes. If you get a little organic shape you can get some pixilation around the edge because they’re only using 256 colors. You’re not going to get that smooth transition but if you’re logo’s an oval you can use it. They are nice and clean and they’re a little bit smaller file size as well. They do hold animation though.
Brent Haeseker: [00:16:50] So what that’s also good for is animated cat videos.
Derek Heron: [00:16:53] Right. Animated cat videos. Great format for the GIF. So that is one nice aspect of that file. The PNG, this one. This is a nice little file, I love this file because it holds full transparencies, full Alpha channels all the way from zero to 100 percent. You can choose how much you want to be transparent of the image, put radiant transparencies over these and they will show on your website properly. They will hold all the millions. There’s actually two versions of the PNG. There is the millions of colors and there’s also 256. But they work great for logos. Because we can then use your logo and put any background image we need behind it. Any color field or whatever it’s going to look clean it’s going to look crisp it’s going to look nice. PNGs are not as destructive. JPEGs will compress your image so if you have a file and you save that as a JPEG. If you open it up again, make some changes save it as a JPEG. You’re losing compression each time. It’s like making a photocopy: each time you do it, it’s going to get worse. Now you can open the file and close the file. It’s not going to compress but if you make a change you save and save it. You’re compressing that file and each time you do that you lose bits and pieces of information in the file. PNG is not that way.You can make changes, resave, you’re not going to lose that. So that’s why I like PNGs. And you’ll see a lot of logos on the sites on the actual finished production site when you go look at that if you were to right click and save that image. It’s most likely going to be a PNG.
Brent Haeseker: [00:18:28] Right. PNG has kind of I think kind of cut into the market share you can say of JPEGs over the last ten or so years I guess.
Derek Heron: [00:18:36] Yes they have. They do tend to be a little bit larger file size so especially if you have like a little image gallery with a bunch of images you probably want to use the JPEG because you can get them smaller. You can compress those down for the Web and get your pages to load faster as opposed to having all your photos as PNGs. So there are benefits of both.
Brent Haeseker: [00:19:00] And then we’ve got of course our friend the PDF.
Derek Heron: [00:19:03] The PDF great for documents. The good thing about a PDF is whatever I see on my screen is most likely what you’re going to see on your screen. It’s a very compatible file. So if you have a document say you have a warranty guide for your website. It lists all your warranty features or whatever you can put all of your stuff in there. People are going to open up and they’re going to see it just the way you see it. So they’re good for those type of documents.
Brent Haeseker: [00:19:29] Any time you have a document that you want to put online that you want people to be able to print it off. PDF is always a good choice. All right and then the crazy other ones like SVG and WebP which really I don’t see hardly at all. The SVG occasionally.
Derek Heron: [00:19:47] The SVG is a nice file. It’s actually an XML based file. It kind of works like the vector but in a computer sense. It will resize online and you’re not going to lose any of your resolution. And you can take that file. It actually makes the code for the file using the little mathematical situation again type of thing. And we do it a lot for icons especially on our RV dealers when we have the flat icons a lot of times we’ll use the SPG because they’re actually searchable by Google like it will read all the information in that icon. So it has its benefits they’ll always stay clean and crisp. If you’re viewing them on whatever size we decide to make your site or whatever or if you’re viewing them from different screen sizes they’re going to look nice and clean and crisp.
Brent Haeseker: [00:20:38] And then the WebP, That’s like a Google file?
Derek Heron: [00:20:41] Yeah. It hasn’t really caught on but it also makes it difficult for trying to transfer because they appear nicely on the Web. But actually having other programs that we would use to open them and edit them. We have to take that file and we have to transfer it into another file type before we can actually use it edit it. But it’s something Google is trying to do to be Google and make stuff better. Eventually it might actually catch on and work but it’s still in it’s early phases right.
Brent Haeseker: [00:21:19] Right. OK. So we won’t worry too much about that one just yet. All right. Anything else?
Derek Heron: [00:21:24] I think that covered a lot of information today.
Brent Haeseker: [00:21:27] We did so since we did cover a lot information again just to summarize: if you’ve got a logo, make sure you’ve got that in a good vector format.
Derek Heron: [00:21:41] What some logos don’t really handle like if you have a photograph in your logo you’re not going to be able to really put that vector certain parts of it can be a vector but then the photograph is not going to be a vector. In those situations if you are using a photograph in your logo. You want to create that is as high a resolution as you can to start with. But for the most part logos will be vectored.
Brent Haeseker: [00:22:00] Right 95 plus p ercent of the time you’re going to have vector format for your logo and you want to have that in probably an EPS or a PDF version. And if you also can get the original file like the AI file if it was done in Adobe Illustrator of that file and have a copy of that. Keep that copy. You can have it in your computer but also make sure you keep it off site like in the cloud somewhere on the CD that’s kept off site and treat that as a digital asset for your company really it’s an asset for your company so make sure you always have a version of that file that you can use for whatever types of advertising that you’re doing whether it’s with a web design company like us or anyone else. And then any photography that you’re doing make sure you’ve got it in a high quality JPEG format. You know the higher the better. And anyody who’s doing any web design work for you or any kind of graphic work for you putting together brochures for magazine ads or anything else like print work they’re always going to be asking for that really high quality JPEG.
Derek Heron: [00:23:11] And the good thing about if you have the high quality it can be used for everything. If you’re sitting there if you got one file that this be my web file this is going to be my print file then you’re going to have a bunch of files that then you’re at the store. But if you just send us or whoever the high resolution then we can make the adjustments.
Brent Haeseker: [00:23:31] And then when you’re doing a web site. We talked about the different different rendered file formats out there. GIF is going to work good for a logo in a lot of cases and animations. JPEGS are going to work well of course for any photography. PNGs are also going to work good for logos and occasionally for photography. Then PDF for anything that you want to be able to put on your website that you want to make printable for people or keep it in a similar format. And I think that probably covers the majority of what we are kind of talking about. So again don’t make a designer scan something off a piece of paper. Because they’re never going to get good quality off of that always make sure you’ve got digital files of all of your stuff.
Derek Heron: [00:24:24] And one thing that I did remember we get requests a lot of times “Hey my logo is already on my Web site. Can you use that?” Well sometimes yes sometimes no. It all depends on how it was put on your original website. Especially now days with the new response websites. We’re looking to use a lot larger logo files than some of the older Web sites. So if you have an older Web site that logo might be too small to use. It might be embedded in a background image. Then we would have to try to cut it out of the background image and then you might see some of that going through your new site. So if the logo is already on your site it might be able to be used for your new site but it would be better if we started with the high resolution file because then we can make it the optimal size needed for your new site.
Brent Haeseker: [00:25:15] Exactly. Good point. So yeah with your current site, it might be in a different file format. It might be a JPEG that has a fade behind it where they were trying to match another graphic on the site. Now we get that image file from you that we are expected to use on your Web site to put on it. Now we’re using a completely different background color. Now we’ve got that fade on there. We’ve got to take it out. And it can look a lot cleaner and better if we start from the original crisp and clear.
Derek Heron: [00:25:46] You’re going to get a better product if you start with the high resolution.
Brent Haeseker: [00:25:48] Exactly. Exactly. So production files are the original files that we can work from. And then create those rendered files that we then put on your Web site the production files is always what we’re going to work from the rendered files or the final output that we then use for your site. But any time we need to make changes or do something new we always want to go back to those original production files start with those fresh files. Sounds good. Sounds good. All right great. Hey thanks so much for watching. And stay tuned for other videos that we’re going to be doing here. And again thank you. We both thank you. Have a great day. We’ll talk to you soon. Bye.