February 11, 2007

Sandy’s Great Graphic Tips: Selecting File Types

Sandy wrote this at 5:04 pm

Which graphic file type is best? It depends . . .

A lot of people wonder what the difference is between file types. Here’s a quick description of three common types. To learn more, follow the links for examples and detailed explanations.

.jpg or .jpeg = Joint Photographers Experts Group

  • Superior for photographs, computer game screenshots, blends or gradients (including metallics)
  • Allows compression options (removes information to make the file smaller)
  • Can be used as an image map (single image with clickable areas)
  • Does not support transparency
  • Supports millions of colors

.gif = Graphics Interchange Format

  • Superior for simple shapes, line art, diagrams, or flat colors (think cartoons, icons, logos, buttons)
  • Supports animation
  • Supported by most browsers
  • Allows transparent backgrounds (for round or irregular shapes)
  • Can be used as an image map
  • Supports 256 colors maximum

.png = Portable Network Graphics

  • Designed to improve/replace .gif file but does not support animation
  • Supports transparency
  • Preserves sharp edges
  • Not all browsers support it but it’s gaining in popularity
  • Supports RGB or greyscale (does not support CMYK for print)

How do you know if you have the right file format?

If it’s too grainy, too fuzzy, or the file size is too large, you might want to review the descriptions above or check out Pat Kalbaugh’s GIF vs JPG page at The Sirius Web. Experiment a little - save it as a different file type and see what happens.

See you next time!

–Sandy, Purple Wren

Related articles:
Great Graphic Tips: Why Use Graphics?
Great Graphic Find: Pixel Ruler
Great Graphic Find: FavIcon from Pics
Great Graphic Find: SnagIt


Filed under Design, Successful Blog, Tips |



C'mon. Let's talk!

4 Comments to “Sandy’s Great Graphic Tips: Selecting File Types”

  1. February 12th, 2007 at 5:50 am
    Thilak said

    I’ll stick with jpeg and PNG. Other formats don’t like me!

  2. February 13th, 2007 at 4:03 am
    TechZ said

    I use them all, PNG looks the best, but you have to be careful that in IE6, it won’t render as a transparency, for that be sure to use GIF’s.

    :)

  3. February 13th, 2007 at 9:54 am
    Sandra Renshaw said

    Hi TechZ,

    Thanks for the comment. That’s great to know. I tend to use Firefox and sometimes forget to check out IE.

    Sandy

  4. March 11th, 2007 at 9:28 am
    Sandy’s Great Graphic Tip: Re-sizing Graphics in an Editor - Liz Strauss at Successful Blog - Thinking, writing, business ideas . . . You’re only a stranger once. said

    [...] Related articles: Great Graphic Tips: Selecting File Types Great Graphic Tips: Why Use Graphics? Great Graphic Find: Pixel Ruler [...]

Name (required)

Email (required)

Website

C'mon Let's Talk!