Web design projects need a lot of file input from clients. Long gone are the days when we received a logo or photo file from a client and uploaded it straight into the web site. In fact, in 20-plus years of web design, I’ve never done this, they’ve always required some amount of resizing.. Today, we need large, robust files for our workflow.

Here is a general reference for the best file types and sizes for web design:


 

What are the best file types for logo graphics?

In order, the best file types are:

  1. .AI (Adobe Illustrator)
  2. .EPS (Encapsulated Postscript)
  3. .SVG
  4. .PDF (Although PDFs can hide some unpleasant surprises)
  5. .TIF
  6. .PNG
  7. .GIF
  8. .JPG

Why is .JPG the worst for logo graphics?

Because, for logos and other flat graphics that need to look clean, they have the most trouble with compression artifacts.

What are compression artifacts?

They’re heat-wave-like ripples that can be seen near areas of light/dark contrast in the image. It’s as if your logo is being seen over the hood of an overheated car.

Look closely at this graphic to see an example:

MoreJPG

What format should my photos be in?

For photos, the best file types are, again in order:

 

  1. .TIF
  2. .PNG
  3. .JPG

We also accept .RAW, but these can involve additional work to convert them.

 

What size should the files be?

For vector files, the size doesn’t matter, which is the beautiful part about logos built in vector. We can use the same file size whether we’re creating a business card or a billboard for you.

For a bitmap file (any format except .AI, .EPS, .SVG or .PDF), you do not need to resize your photos. We will take the biggest file you can shove down the intertubes to us. If you have used Dropbox, that is our favorite way to move large files. Or you can upload them to a Basecamp project.

If you have certain photos that must be used, please be sure to indicate them by putting them in a separate folder. Otherwise, we like to review all of the photos you have available for a project, if possible.

What is the difference between bitmap and vector files?

They’re two very different ways of storing image information.

On the simplest level, bitmaps are grids of colored or transparent dots. If you blew one up, it might look something like this:

Enlarged bitmap graphic

Enlarged bitmap graphic

And this is why we cannot enlarge bitmap graphics. We have to start with a large file and work down, never up. Once resolution is lost, it can’t be regained. Blade Runner has a lot to answer for.

Vector graphics, on the other hand, are packages of mathematical representations of shapes.

The most important thing to know about them is that they can be enlarged or reduced to any dimension. If you blew one of these up, it would still look smooth and clean:

Enlarged vector graphic

Enlarged vector graphic

This is great for a logo that has lots of simple shapes. Saving a photo as a vector is generally not possible without drastically changing the way the photo looks. Here’s an example where half of a photo has been vectorized to show you what it looks like:

VectorizationExample

Right half of photo has been vectorized.

 


 

Every project has its own needs, but this should give you a good starting point. Please let us know if you have any questions. If you’re a client, get in touch via email or Basecamp.

If you’re not a client, drop us a line and we’ll get your project started!