Web
When looking for a graphic format for Web, the two safest and mostly widely used formats are GIF (Graphics Interchange Format) and JPG (Joint Photographic Experts Group) — and Web resolution is 72dpi (dots per inch). You do not need the resolution to be any higher, as it will not help with on-screen quality. It will only add unnecessary file weight to your site, unless you are taking into consideration that someone might want to print this particular element out to their desktop printer and you want them to be able to print at a higher quality.
Always remember that Web graphics must be in RGB or Indexed color mode. If you try to place a graphic on your site that is in CMYK, you will probably just see a red “x” where the graphic should be.
GIFs are generally going to be smaller in file size and are typically used for icons, logos, small graphics, etc. They also allow for faux-transparency. I say “faux” because it isn’t using true transparency…what it will do is allow you to choose a color to “wrap” around the outline of the “transparent” image that matches as best you can the color that will sit behind the graphic (I will talk about true transparency in just a bit).
JPGs are better quality and are typically best used for photographs and images that use a broader color spectrum. GIFs only allow for up to 256 colors — a photograph typically uses many more than that and this is where JPG comes into play. *Both formats use lossy compression.
PNG (Portable Network Graphic) or “Png Not Gif,” as I’ve heard it used, unofficially.
Let’s rewind back to the transparency subject for just a moment. I would like to point out that PNG is the rapidly growing format for Web. PNG was meant to take over the GIF format as the standard. They allow for true transparency, meaning you do not define a color to use as “transparency.” It handles transparency in all facets, including opacity. The only thing to keep in mind is that as far as Internet Explorer goes, any version less that IE7 can have issues displaying correctly. There are workarounds for that, if you really need it to display in IE6 correctly, but that will be on the coding side. *PNGs allow for loss-less compression, meaning it will not degrade the image at all when saved.
Quick tip
Graphics used primarily for layout purposes or some sort of line-art converted, such as a logo, stick with GIF (or PNG, if you are comfortable with it — I am); it will help reduce unnecessary file weight to your site. If it is a higher quality image, such as a photograph or main focal image that uses many colors, stick with JPG.
Now let’s take a look at the print side of file formats for graphics. This is where resolution is important. Raster graphics (non-vector formats, such as photographs) should be at least 300dpi. They should also be in the CMYK color mode, or as spot colors, if needed for a specific color, such as a logo that you want represented as closely as possible per your branding/style guidelines or because you are printing in 1-color, 2-color or 3-color. I am going to talk briefly about the two major file formats when talking about printing — TIF and EPS.
TIF (Tagged Image Format) is the standard when sending photographs or bitmap graphics to be printed. They allow for compression or no compression — typically for print you do not want to compress. You want the quality to be as high as possible, even if that means larger file sizes.
EPS (Encapsulated Post Script) is the format you will see most commonly used for print-ready logos. These will come your way often when receiving logos because of its vector quality. Vector means that the graphic can be scaled to any size without quality degradation. Typically, these will include spot colors, CMYK colors or a combination. I would like to note here that just because it has EPS slapped onto the end of the file name does not necessarily mean it is vector-quality. It is quite possible to save a bitmap graphic as an EPS file. Be sure to note that you would like it in vector format, if at all possible. This will also allow for more easy manipulation of the graphic, if needed. An important part of vector formats is the issue of fonts. This can be frustrating at times when someone sends you their logo without the fonts. That is why it is extremely important that when requesting a vector logo that you have them send the logo with outlines/curves or include the fonts that can be loaded.
What are outlines or curves? It is a way of taking whatever live text is in the graphic that uses fonts and converts them to “shapes.” When this is done, the text cannot be altered, as it could be if it retained the true text. This will alleviate any issues you might have with fonts because, essentially, after converted to outlines/curves, there aren’t any fonts or real text (even if it looks like it).
Quick Tip
Use TIF format when dealing with bitmap graphics (non-vector), such as photographs. I would also like to note that JPGs are often sent, as well. JPGs can be high resolution and used for print production, but they are typically sent as JPG (as they are smaller in file size for emailing or transferring) and designers will convert them to TIF format for final output to the printer. Use EPS format when dealing with logos or any other graphic that you need in vector format.