If you’re a business owner… chances are, you aren’t a graphic designer as well, but in this golden age of smart phones, and even smart watches, having a blurry, pixelated logo that looks like it was photographed using a russet potato, shouts “I’m not concerned about how I’m perceived!” And if you’re not concerned about your image, clients may conclude that you’re not concerned about the rest of your business either.
But fear not! With just a smidgen of knowledge, and a dash of planning you can avoid this fate!
If you’re deciding on a new logo or updating the logo you have,
click the link to read our blog post-
“Why You Should Hire a Professional Designer to Make Your Logo”
How to provide the correct file type of your logo to people who need it!
Nine times out of ten, your logo will be the most requested asset, and even though you may amass a virtual trunk load of files (ranging from PNGs, to JPEGs, to PDFs), each has their place, as far as who’s requesting them, and what they’ll use them for.
Before emailing your file, make sure to ask what file type is preferred. Many online businesses have adapted to accept JPEGs, PNGs, and Adobe PDFs. If that’s the case please jump to the titled section “Choosing a file size and resolution for a printed resource”, that section delves a bit more into how to ensure that your file is the right size and resolution for the job.
If say, it’s a graphic designer, or any other professional in the print or media biz, most likely they’ll have access to a graphic design program that will allow them to open certain files (known as vector files) that the average user cannot. Having a vector file on hand will streamline the submission process, because you’ll be able to avoid having to worry about display and file size. In that case (and if your designer supplied you with one), there are a few formats to choose from.
(Click here for a Quick Reference Guide to different graphic file types!)
Common vector files include EPS, SVG, and AI (which stands for Adobe Illustrator). Adobe PDFs can work too, but only if they’ve been created in Adobe Illustrator and properly vectored by a professional designer. A vector file is scalable to any size (so you won’t have to guess what size and resolution they’ll need), and will typically be small enough to email. However, most vector files will need a graphic design program to open them.
An EPS file typically needs a professional graphics program to even view it, whereas an SVG can be viewed in a web browser.
There is much debate as to the pros and cons of each of these file formats. The EPS has been the standard for print graphics for years, and typically preferred when supplying a vector graphic to a printer. The SVG is more web friendly, as its text graphics can be read by web crawlers (bots that scour the internet for data sought by search engines).
Both files will typically be created by a designer in Adobe Illustrator. Unlike a JPG (Jpeg) or a PNG, both an EPS and a SVG will ask whoever opens it, “how big would you like me?” This is because they are based on vector information rather than pixel information, think of a vector as a blueprint of a house, and a pixel as single brick of that building.
To reiterate, an EPS, SVG, AI, and sometimes a PDF (if built correctly), can be enlarged to any size from business card to billboard, though they are typically converted into another file type for their final form.
Next up, JPEGs, PNGs, and PDFs, oh my!
Jpegs, the go-to familiar file for the average user, are pixel based, a fixed size, and are incapable of having a blank background, which can be a problem if they are a shape other than a rectangle, and their destination isn’t a white background. So, unless you’re trying to signal a surrender, you’re going to want a file that has a transparent background.
A pixel is an actual object, a thing, and as Alice in Wonderland can attest, objects don’t respond well to unbridled growth spurts. Vector files though, much like blueprints, are a set of instructions, and changing the measurements in a blueprint doesn’t bother the blueprint one bit (assuming that your blueprint has feelings).
The next best thing to use if you don’t have an EPS or SVG, will be a PNG. Why? Because a PNG can have a transparent background, and having a transparent background is key for having a professional image in a myriad of applications, including, and most importantly, in your website’s header (the top of the page). PNGs can also be opened by a web browser.
Lastly Adobe PDFs, a format that’s becoming more mainstream every day for a near infinite amount of uses, will happily often prompt a user for a desired size like an EPS or a SVG, but it’s not always a sure bet. Sometimes it will have a transparent background, sometimes not, it all depends on how a designer created it. Typically, in order to have a scalable PDF, it will have needed to have been created in a vector program such as Illustrator, Adobe Photoshop can create PDFs, but they will not be scalable.
Special Note: Companies that produce billboards have graphics programs that will allow them to blow up images that aren’t vectored, that being said, there are still limits to the magic, and most people don’t have access to those programs.
Choosing a file size and resolution for a printed resource.
OK then, worst case scenario, you don’t have any sort of vector file, but you do have some JPEGs, BMPs, PNGs, and someone has requested a logo for printing. If the only logo you have is the one you scraped off the top corner of your webpage, you’re out of luck, full stop, because after being enlarged, its pixelation is going to stand out like a blurry sore thumb against the other crisp elements in the design. There is really nothing you can do short of giving a designer that image, and instruct them to create it from scratch in professional design program, a good rule of thumb is that an image on your monitor will be at least THREE TIMES SMALLER when printed.The main difference between image resolutions on a monitor vs. a printed image is that an image on a monitor has 72ppi (pixels per inch) resolution, whereas a printed image has typically 300 pixels per inch. (Each pixel being much smaller in a print medium, so there are more pixels per inch.)
Imagine a pixel as a single brick or block; if you have a resolution of 72ppi, you have 72 pixels per inch, and if you have an image with a resolution of 300ppi,
you guessed it, you have 300 pixels per inch.
A printed 72ppi image will appear blocky and pixelated because those blocks are bigger per inch, whereas a 300 ppi (pixels per inch) image has blocks small enough that the eye can’t differentiate between them.
If you upload an inch wide 300ppi image to the web, where everything you see can only be displayed at 72 ppi, your one inch 300 ppi image will now be rendered more than three times that size!
And if you try to print what appears to be on your website, a one inch logo, after printing you’ll have a logo better suited for ants, because it will now be three times smaller if printed at 300ppi (considered standard printing resolution) or extremely pixelated if enlarged and printed at its original web resolution 72ppi.
BMP (Bitmap) – Usually thought of (and incorrectly so) as a dumbed down version of a jpeg (mainly because they were utilized way back when most computers were running Windows 95), it’s a raster file (composed of pixels), and capable of displaying up to 4 BILLION colors, but the file sizes are typically larger because the file isn’t compressed like a JPEG is when saved. It can not have a transparent background.
EPS (Encapsulated PostScript) – If properly made by a designer in Adobe illustrator, can be resized to nearly any size, and if the designer is worth their salt, it should also have a transparent background. It can NOT be viewed in a web browser. EPS files are typically opened by designers and saved to a rasterized (unchanging) sized file such as a PNG.
GIF (Graphics Interchange Format) – Typically lower quality allowing for only 256 colors, a much smaller file size, because in addition to having fewer colors, it’s also compressed, but despite all of its shortcomings GIFs have been fighting to stay relevant; their modern selling point? They’re capable of displaying animation or video, and are quite popular on social media sites for that reason, although MP4 video files used in conjunction with the HTML5 coding language are gunning to replace them.
JPG (or JPEG/Joint Photographic Experts Group) – Probably the most illustrious file on the web, capable of displaying upwards of 16 million colors. It can NOT have a transparent background. JPEGS have their issues though, images are compressed slightly (termed “lossy” compression) when saved as a JPEG, and is prone to artifacts and pixilation if saved repeatedly, or enlarged improperly.
PDF (Portable Document Format) – This increasingly recognizable acronym encompasses a wide range of uses in business and design, but depending on how the creator made the file, it may or may not prompt a design program to ask how large the new user would like it. It IS capable of having a transparent background, and is typically the file of choice when submitting a final project file to a professional printer for press printing. It has an abundance of other capabilities, probably enough for a separate blog post.
PNG (Portable Networks Graphic) – Like a JPEG, it’s also capable of displaying 16 million colors, but, most importantly, it IS capable of having a transparent background, designers will most often turn an EPS into a properly sized PNG or SVG for use in other applications, such as a logo on a website’s header.
SVG (Scalable Vector Graphic) – Also a vector based graphic, invented by Adobe and Macromedia. It arrived on the scene after the EPS, so it’s a bit more web friendly than the EPS, meaning its internal components such as text can be read by web crawlers (there is much debate if it assists with SEO or not), and the file can be opened and viewed in a web browser. There is a compressed version of the SVG called the SVGZ, but hasn’t been able to catch the wave of popular usage.
Note: EPS files are thought to better for print applications whereas SVG are better served for the web, although there is considerable debate about this as well.
We hope this post might shed some light on the mysteries of file types and resolution, if you have any questions, feel free to call or contact us directly, we’d love to help you learn more!