Seeking your help: File formats


CATHERINE LANGLEY, Communications Manager for the New Jersey Press Assn., contacted me about a week ago to ask about file formats for the web.

I told Catherine I wasn’t sure how to answer some of her questions—but I knew that posting her note on my blog would be a good shot at getting her some help.

Here’s Catherine’s note:

“Hi Ed,

As newspapers expand their publishing to other media, some of us are trying to learn new skills. But finding some of the basic information we need is frustrating.

For instance:
What are the best formats to use when saving Illustrator artwork
(a) for use on Facebook?
(b) as logos for Microsoft Outlook signatures?
(c) for websites?
For these three media:
Are there optimum document sizes?
Are there specific settings that yield better results?
What transparency settings work and which don’t?

My efforts have had very mixed results… Can you point me to resources, other than Facebook and Microsoft; I’ve not found their help to be very useful.

Thank you for any help you can give me!


How about it, folks? I’m betting someone out there has some tips for Catherine. Let’s give her the help she needs in some comments on this post. Remember, this blog is all about us helping each other—and here’s someone who’s asking for that help!


Filed under Other

2 responses to “Seeking your help: File formats

  1. David Merrill

    Catherine, for starters, I’ve got one word for you: bitmap.

    Facebook, web sites, and logos displayed in email messages are all the same in terms of image formats, because they are all rendered as web pages. (Yes, email that contains logos and other images is rendered in HTML, which is the encoding used by web browsers.)

    Graphically speaking, the web is a place of pixels, not vectors. So anything you create in Illustrator will have to be rasterized to create an image. And the color mode of the web is RGB, not CMYK.

    Currently, three image formats are supported on the web: JPEG, GIF, and PNG. These are compressed image formats, and each has its strengths and weaknesses. GIF and PNG formats support transparency: pixels in GIF images are either 100% transparent or opaque, whereas PNG allows transparency gradients. (PNG is not supported by older Microsoft browsers.) If in doubt, I’d choose JPEG.

    Image size will depend on context, but here’s a fact that will help you determine the right size. Computer monitors display their images with light-emitting pixels, right? Well, when an image is displayed in a web browser (or in an HTML email message), each pixel of the image is matched with one pixel on the monitor. So if your monitor is set to a “resolution” of 800×600, and your browser is displaying an image that is 800 pixels wide, that image will cover the entire width of the screen. If you display that same 800-pixel image on a monitor set at 1024×768, the image will only fill 80% of the screen’s width. One screen pixel for each image pixel: that’s the rule. And that will be true whether you set the image resolution at 20dpi or 600dpi.

    I hope this clears some things up for you, or at least gives you a place to start learning.

  2. Catherine Langley

    Thank you, David.

    I had fallen back on JPEGs but haven’t been happy with the way they show up on screen and as email logos. They are fuzzy… Perhaps I set the color mode incorrectly. I’ll keep experimenting … but I welcome other suggestions!
    Thanks again.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s