Raster vs Vector
Raster graphics are digital images made
of rectangular pixels, or squares of color.
The file size and quality depend on the
number of bits per pixel.
Vector graphics are based on shapes,
lines, and control points, and are based
on mathematical expressions rather
than individual pixels.
This allows vector graphics to be
resized with minimal effects on file size
and image clarity.
PNG is a modern file format that is replacing GIF files for
display on web pages and other online applications.
PNG is great for high-quality images because it offers more
options that GIF, allows transparency for 24-bit RGB
images, uses lossless compression, and doesn’t leave JPG
JPG or JPEG is another commonly used file
format for online images. Many digital cameras
also store and export photos as JPEG files.
It is recognized by all web browsers and multiple
operating systems and is good for photos when
you need a small quality size and don’t mind some
loss of quality. The more compression, the greater
the loss of quality & clarity.
GIF is another of the 3 most commonly used
image file formats on the internet. It is popular
because it compresses images two ways, creating
small file sizes, and because it allows animations.
Most of the moving/blinking images that gave
1990s websites their distinctly cheesy look were
GIF is best for animations, diagrams, logos,
cartoons, and graphics with relatively few colors.
BMP, or Bitmap is the standard Windows file format for
images, and was one of the first image formats. It creates
large, uncompressed files, but they have high quality & rich
colors in their original size & work well in the MS Windows
BMP files are not popular online because the files are large
and do not scale or resize well.
TIFF files were created for desktop publishing, work well
with graphic processing programs and various forms of
printing, and are popular among graphic designers,
publishers, and some photographers.
TIFF images are very high-quality, because they retain all
color and data information, but their large file size make
them impractical for online use or simple graphics.
SVG / XML
Scalable Vector Graphics (SVG) is a vector
image format that can support both
animation and interactivity.
It is supported by all modern major browsers
to some degree, making it useful online.
A specialized type of the format, Tiny SVG,
is recommended for mobile pages/apps and
other small-screen displays.
PSD, AI, PSP, & CPT
PSD (Adobe Photoshop), AI (Adobe Illustrator), PSP (Paint
Shop Pro), & CPT (Corel Photo-Paint) are all proprietary
formats that are meant to be used by their specific
They are useful if you anticipate needing to edit or change
the file again in the future, as they save layers and other
data, but can only be viewed by the same program in which
they were created.