Understanding common graphic file formats for the web
1.
2. Graphic Image File. Indexed color file, for raster (pixmap) data
only. Primarily for synthetic, somewhat flat images such as
logos, diagrams, navigation buttons, etc.
Technically GIF and its LZW compression algorithm are
―lossless,‖ but since it supports indexed color only (8-bit or less),
you often have to permanently throw away image data prior to
(or in the process of) exporting your master file as a GIF. Don’t
be confused by Photoshop’s Save for Web options for GIF, where
you’ll see a ―lossy‖ checkbox: that just rearranges the pixel
patterns slightly, prior to exporting the GIF, to enhance the
compression. GIF being a ―lossless‖ format means that, unlike
with JPEGs (a lossy format), you could possibly open a GIF
repeatedly, edit it, and re-save it back out again without
necessarily degrading it. That’s not ideal, unless you really know
what you’re doing. It’s generally best to go back to the master
file — often a PSD — for editing, and then re-export the GIF.
3. GIF is my best Web option for images with
flat, solid colors — the sort of images one
normally create in vector drawing
programs such as Illustrator. Of course I
love to put my Illustrator images on the
Web in their original vector form, but for
the most part that is not possible (but see
SVG lower down in this table). So I export
our vectors to raster formats like GIF or
PNG for the Web.
4. JPEG
Joint Photographic
Experts Group.
Compressed, lossy
file format, for raster
(pixmap) data only.
Mostly for phototype images on the
Web. Can hold RGB
data; many
compression levels
and other options
available.
Also be careful not to edit
JPEG files if at all possible;
go back to the original
master file (PSD, TIFF, or
whatever) for editing and
then re-export a new JPEG
with your changes. JPEG
compression always
involves data loss and
degradation; editing JPEGs
is just corrupting the
corruption — it’s
degrading!
5. I have to be careful not to edit JPEG
files if at all possible; go back to the
original master file (PSD, TIFF, or
whatever) for editing and then reexport a new JPEG with my changes.
JPEG compression always involves
data loss and degradation; editing
JPEGs is just corrupting the corruption
— it’s degrading!
6.
Portable Network Graphics. The newest
of the three major Web graphics file
formats, with more features than GIF or
JPEG.
PNG’s use is growing slowly over time,
especially as newer browsers come into
play. It’s already a reasonable
replacement for many GIFs (but not for
animated GIFs); but for photo-type
images, JPEG will usually be more
efficient.
7. Lossless compression which means I could use it as an
editable format, although I probably should not in most
cases.
Multi-bit transparency map (alpha channel), even for
photo-type images.
Metadata for color management (gamma and ICC
color profile), although this is something of a tease since
most browsers do not support those things.
Can hold either RGB data (like a JPEG) or indexedcolor data (like a GIF) — but not CMYK, since that is
designed for the Web, not for print.
8. Scalable Vector Graphics. Attempt to introduce a
standard vector format for the Web. Wouldn't you love
to put flat-color or other simple graphics (like logos and
diagrams) online in compact, scalable vector form? The
W3C has approved this Adobe-sponsored XML
derivative. Not really usable yet in most real-world
projects, because browser support is still spotty — but
improving. The only Web vector format widely used at
present is to embed images in Flash, but that’s not really
a substitute for SVG (you wouldn’t create a Flash file
just to hold a non-animated scalable logo, for example).
9. Using SVG would not be a suitable option for me at
this time because browser support is spotty.
10. PostScript is a page-description language
that some programs can generate and some
printers (the expensive kind) can print
from. A .ps is a simple text file that results
when you tell a program to send its
PostScript instructions to a file on your
hard drive instead of to a printer; it’s
therefore called a ―print to disk file.‖ (It’s
also sometimes called a ―pure PostScript
file‖ or a ―PostScript dump.‖)
11. There are basically three things I can do with a
.ps file: send it to a printer which should then
print the original page, not the PostScript text
convert it to PDF via Acrobat Distiller or if I had
a PostScript programmer edit it directly in a text
editor. I am not a PostScript programmer
but, being rather geeky for a creative type, I
would have to be able to make some
simple, useful changes within .ps files on
occasion. As with any programming code, I have
to be careful one tiny mistake and the whole
thing may not work.
12. Encapsulated PostScript. A useful but flaky
extension of the basic PostScript file
Encapsulated PostScript. EPS is essentially a
PostScript file in an ―envelope.‖ It usually —
but not always — includes a rasterized
preview in TIFF or PICT, plus some
metadata. EPS was originally the native
format of Illustrator, back in the primordial
days of PostScript..
13. Pros: can contain clipping path, true font
data, various kinds of metadata; widely
accepted.
Cons: previews optional & nonstandard;
sometimes contains insufficient data but
you wouldn’t know because the preview
can be misleading; file format has evolved
so is nonstandard; may only print properly
to PostScript printers; can be flaky at times.
14.
Adobe
Illustrator's
proprietary file
format — closely
related to, but
not the same as,
EPS.
The Adobe Illustrator
program’s proprietary
format originally was EPS.
Illustrator’s current .ai
format is essentially an
extension of that original
EPS format, broadened to
accommodate Illustrator’s
newer capabilities. A few
other programs may
support .ai files, but it’s a
moving target as
Illustrator evolves. Most
other programs stick to
the original, more generic
form (EPS).
15. AI has about the same as EPS , so the Pros and Cons are
about the same
Pros: can contain clipping path, true font data, various
kinds of metadata; widely accepted.
Cons: previews optional & nonstandard; sometimes
contains insufficient data but you wouldn’t know
because the preview can be misleading; file format has
evolved so is nonstandard; may only print properly to
PostScript printers; can be flaky at times.
16.
Portable Document Format, also known as ―Adobe
Acrobat format. Adobe has been slowly moving
towards PDF as a universal file format (especially
within its own product line), but it’s not clear
whether it will ever replace most proprietary and
generic graphic file formats.
You might like to visit Adobe’s PDF Tech Center
online.
Still to come: discussion of prepress variants of PDF
with more specific specs:
PDF/X-1a
PDF/X-3
17. Cons: Content formatted for Print – A PDF file is usually
formatted to the size of a printed page like A4 or Letter,
not to the size of a screen. This makes it difficult to read
online as the user needs to spend more time scrolling
through the content as they read. Most PDF files have
been converted from a document format and as such, are
long and boring to read in an online environment.
Pros: Protecting Intellectual Property – If you have a
portion of content that you do not want copied by
visitors, then PDF is the way to go. This format also
enables the creator to insert information that stays with
the content so readers always know exactly where it
came from.
18. PSD stands for ―Photoshop document.‖ It’s
an application-specific proprietary
format, but because of Photoshop’s
dominant position in the pixel-editing
world, PSD has become something of a
quasi-standard. A number of other
programs, even some that don’t come from
Adobe, support PSD as an additional file
format — but usually as read-only or for
import/export purposes, not as their true
19. Pros: Changes are a lot faster (including changes to
colors, and to some extent to fonts). When you're laying
the page out as HTML, you're showing the client
something a lot closer to what the final product will
look like. They can see the effects of a liquid layout by
changing the size of the window.
Cons: Not all visual designers can create a mockup in
HTML. It will have to be a two person task. An HTML
person and a Photoshop person.
20. A newer (and basically unrelated) meaning of ―raw‖ —
more formally called Camera Raw — has become very
common with the rise of digital photography. Some
midrange, and all high-end, digital cameras have the
ability to save images with no lossy compression (as
opposed to the JPEGs that are more common as a digital
camera format). Essentially, they’re saving the full
information that their sensors capture. Camera Raw
isn’t really a file format in the conventional sense
because each brand of camera structures the data
differently, and expects you to read the data (or transfer
it to your computer), and perhaps edit it as well, using
their own software. I suspect the lock-in is intentional,
and of course it’s bad for consumers.
21. Pro: Raw files contain the full, unaltered information as
taken off the sensor, while in RGB (TIFF or JPEG) ones
this information is already converted, for better or
worse, using the current camera settings. Performing
that conversion on a PC, you can use more powerful
and/or most up-to-date software, possibly better than
the camera firmware.
Cons: With raw files you need to do the conversion
before you can edit, print, or even view your images; an
extra step.
22. Tagged Image File Format. Raster only. Most widely used
format for photos in prepress world (although EPS is also
used for this purpose). Cross-platform.
There are many variations of TIFF — in fact, it’s really a
whole family of file formats — and you can’t assume that a
program that “supports TIFF” will understand all of them.
Variations include compressed (lossless LZW, or other
methods) vs. uncompressed; RGB vs. CMYK; 24 bit vs. 48
bit; and a variety of TIFF-based alternative file formats,
such as TIFF IT (widely used by ad agencies). TIFF is really
designed for use by professional graphic designers.
Although the format itself is relatively trouble-free, the
numerous variations are likely to confuse nonprofessionals trying to match individual TIFFs to the
programs and processes that support them.
23. Pros: most reliable, widespread format for raster data.
Can hold almost any resolution, color scheme, etc. I like
this format because it’s uncomplicated and (unlike EPS)
rarely causes trouble.
Cons: can’t hold vector data; large, and sometimes slow
to print; Mac and PC have slightly different flavors
(although most Mac apps support both); many
nonstandard ―improved‖ versions floating around.
24. Common but Windows-only raster
format. BMP is very common in the
Windows world, but is not crossplatform. It’s not supported by
professional prepress processes or
by Web browsers, and so is only
appropriate for internal use within
the local Windows environment.
25. Pros: Bitmap files may be easily created from existing pixel
data stored in an array in memory. Retrieving pixel data
stored in a bitmap file may often be accomplished by using a
set of coordinates that allows the data to be conceptualized
as a grid. Pixel values may be modified individually or as
large groups by altering a palette if present. Bitmap files may
translate well to dot-format output devices such as CRTs and
printers.
Cons: They can be very large, particularly if the image
contains a large number of colors. Data compression can
shrink the size of pixel data, but the data must be expanded
before it can be used, and this can slow down the reading
and rendering process considerably. Also, the more complex
a bitmap image (large number of colors and minute detail),
the less efficient the compression process will be.
26. Unlike JPEGs, GIFs, and BMP images, vector
graphics are not made up of a grid of pixels.
Instead, vector graphics are comprised of paths,
which are defined by a start and end point, along
with other points, curves, and angles along the
way. A path can be a line, a square, a triangle, or
a curvy shape. These paths can be used to create
simple drawings or complex diagrams. Paths are
even used to define the characters of specific
typefaces.
27. Pros: Vector files are useful for storing images composed of
line-based elements such as lines and polygons, or those that
can be decomposed into simple geometrical objects, such as
text. More sophisticated formats can also store 3D objects
such as polyhedrons and wire-frame models. Vector data can
be easily scaled and otherwise manipulated to accommodate
the resolution of a spectrum of output devices.
Cons: Vector files cannot easily be used to store extremely
complex images, such as some photographs, where color
information is paramount and may vary on a pixel-by-pixel
basis. The appearance of vector images can vary
considerably depending upon the application interpreting
the image. Factors include the rendering application's
compatibility with the creator application and the
sophistication of its toolkit of geometric primitives and
drawing operations.
28. Most images you see on your computer screen
are raster graphics. Pictures found on the Web
and photos you import from your digital camera
are raster graphics. They are made up of grid of
pixels, commonly referred to as a bitmap. The
larger the image, the more disk space the image
file will take up. For example, a 640 x 480 image
requires information to be stored for 307,200
pixels, while a 3072 x 2048 image (from a 6.3
Megapixel digital camera) needs to store
information for a whopping 6,291,456 pixels.
29. Pros: The geographic location of each cell is implied by
its position in the cell matrix. Accordingly, other than an
origin point, e.g. bottom left corner, no geographic
coordinates are stored. Due to the nature of the data
storage technique data analysis is usually easy to
program and quick to perform.
Cons: The cell size determines the resolution at which
the data is represented. It is especially difficult to
adequately represent linear features depending on the
cell resolution. Accordingly, network linkages are
difficult to establish.