Understanding your branding files
There are a couple factors at play when it comes to a logo looking blurry or pixelated on a printed piece or on your website.
To start, let’s break down some technical terms, and then I’ll explain what all this designer-y lingo means.
Logo file types:
.jpg
Raster file
Used for print
300 dpi
.png
Raster file
Used for web
72 dpi
.eps, .ai or .pdf
Vector file
Used for print
.svg
Vector file
Used for web
Logo file terms:
Raster
This is a flattened file that fixes the exact number of pixels in the design
Vector
This is a file that retains the scalable pixels in the design, and thus can be manipulated by a designer in a design program
Means printing your logo on something, whether that’s a t-shirt, a brochure, a banner, or something else
Requires 300 dpi files
Web
Means using your logo on a digital format, whether that’s your website, an online ad, a video, or something else
Requires 72 dpi files
dpi
This means “dots per inch”; it is the pixel density of an image
Print - 300 dpi
Web - 72 dpi
I explained file formats even further in this blog post.
Now that we’ve got these technical terms defined, I’ll break down how they affect clarity/blurriness in your logo.
Logo file types and blurriness:
As we mentioned above, .jpg and .png files are raster—or flattened—files, meaning that at the dimensions your logo is saved at, they have a fixed number of pixels. Simply put, with these files, you cannot scale your logo up larger than the dimensions they’re saved at. So if your logo’s .jpg or .png file is saved at a very small size—say, 1 inch wide—and you try to blow it up to 10 inches wide, it will look blurry. With these flat files, the computer can’t create additional pixels when they’re scaled up. So, the pixels themselves just blow up and look blurry.
To account for this, I always save .jpg files at larger dimensions that would be typical for placing a logo on something like a poster or brochure. I save .pngs in several different dimensions so you have choices when it comes to website use.
DPI and blurriness:
This mysterious “dpi” mentioned above also comes into play. When it comes to brand files, there are two different pixel resolutions used for print or web. For anything that’s being printed, we use 300 dpi, or 300 “dots per inch.” If you’ve ever had someone ask you for your “high resolution logo,” this is what they’re referring to. Basically, the higher number of dots per inch, the higher the quality of the print.
Web, on the other hand, uses 72 dpi. As you can see, the density of the pixels for web is smaller than print. Print requires more pixels to produce a clear image. So if a web file like a .png is used for printing, it will print blurry.
Vector files:
Lastly, a designer should also always be providing you with vector file formats, which are .eps, .ai, .pdf, and/or .svg files. Vector files are not flat like .jpgs and .pngs, so they can scale up and down without becoming blurry. These files are very important for many reasons, but in the blurriness case, let’s say you needed to use your logo 8 feet wide on a banner. It’s not practical to save a huge .jpg file that’s 48 inches wide, and the file would take up so much room on your computer! In cases where you’d need to scale it up way more than normal, you would use a vector file.
A good, professional, experienced designer will always prepare you for any possible future use of your logo by making sure you have all of these file types. And a good designer will make sure they’re clearly named, organized, and explained so you understand everything once it’s delivered to you.
If you’re not sure if you have everything you need to make your branding effective, download my free Brand Health Checkup!
This guide walks through a self-analysis of your branding, website, and business foundations to identify your best next area of focus — and give you confidence in what you’re doing well!
Download the free Brand Health Checkup:
Other posts about branding:
What to do when a design client asks you to "fix" or recreate a logo they made with AI.