What image format

should I use?
JPEG!

TIFF!

EPS!

SVG!

PNG!

GIF!

BMP!

AI!

PDF!

PSD!

The Quick Answer

graphics
PNG8!

GIF!
SVG!

PNG24!
!

editing

photos
JPEG!

PSD!

Q: How big does the picture

need to be?

A: Big enough to communicate

all the important differences

Digital Images
Digital images are very often Bitmaps
Bitmaps are just one way of representing
digital images
000010
000010
000010
000010
000010
000010
100010
011100
000000
000000

Vectors
Made of mathematical lines, curves and
shapes (such as splines or bziers)
Can be scaled indefinitely without
aliasing becoming evident
Must have a fill or stroke, or both
Not rasterized until displayed
May be slower to draw than bitmaps
File formats: .eps, .ai, .svg

Vectors

Vectrex home videogame console - 1983!

Vectors

Laser cutter with plywood!

Vectors : SVG
Excellent support across HTML5 devices
Ideal for scalable graphics on different screens
Explorer 8 and lower have poor support
Text-based easily generated on the server (PHP)
Can contain references to bitmaps
Can include CSS and media queries

Vectors : SVG
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://
www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 200 200" version="1.1">
<circle cx="100" cy="100" r="80"
stroke-width = "10"
fill = "orange"
stroke = "navy"/>
</svg>

produces this:

Vectors : SVG

It's TINY
and SVGZ
is even smaller

Bitmaps and Aliasing

Bitmaps are made of small dots
called pixels (picture elements)
rasterized onto the screen
The hard pixel steps of bitmap
edges is called aliasing
Mixing aliased edges with
background pixels is called
anti-aliasing

Bitmaps and Aliasing

An aliased look can be a design choice

Indexed Color

Color Systems (Color Modes)

Indexed (uses a Color Palette) for older systems,
handheld devices,
or to save space/memory/download time
RGB (Red, Green, Blue) for screen
CMYK (Cyan, Magenta, Yellow, BlacK) for print
Lab Color (Chroma & Luma) for pro video & photo

Additive and Subtractive

Direct light is measured in intensity:
More is brighter (additive color)
RGB is the most common
Reflected light is reduced by pigment (ink/paint/dye):
More is darker (subtractive color)
CMYK is the most common

One binary digit per dot

Two possibilities for each dot

(black or white)

Two bits per dot

Example palette:
00 = white
01 = light grey
10 = dark grey
11 = black
Four possibilities for each dot
It could be black, white and two greys
or your favorite four colors

Indexed Color
Uses a small set of colors (from 2 to 256)
Color Look-Up Table (CLUT) or Palette
each color in the palette has an index
Each pixel refers to a specific index
Small, efficient files
Some devices ONLY support indexed color!
Popular file formats: png-8, gif

(Indexed Color) Bit Depths

1 bit = 2 colors

21 = 2

2 bit = 4 colors

22 = 4

3 bit = 8 colors

23 = 8

4 bit = 16 colors

24 = 16

5 bit = 32 colors

25 = 32

8 bit = 256 colors

28 = 256

High Color RGB (16 bit)

216 = (up to) 65536 colors (thousands of colours)
5 bits each of Red, Green, and Blue, 1 bit unused
or
5 bits each of Red, and Blue
6 bits of Green,
or
5 bits each of Red, Green, and Blue
1 bit for fun stuff

True Color RGB (24 bit)

224 = 16777216 colors (millions of colors)
8 bits each of Red, Green and Blue
256 levels of intensity for each primary color
Hexadecimal representation: RRGGBB

RGB + Alpha
True Color with transparency Millions+
Each pixel can have:
8 bits of Red, 8 bits of Green, 8 bits of Blue
8 bits of Alpha (256 levels of transparency)
File format: png-24 (with transparency)
Some issues with IE6 and other older browsers

Hexadecimal Values
Decimal:

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Hexadecimal:

0 1 2 3 4 5 6 7 8 9 A B C D E F 10

Or:
Letters are bigger than numbers
F is bigger than A
The bigger, the brighter

16

Hexadecimal Values
(CSS examples)

p {color:#ff0088}
h1 {color:#ccc}
h2 {color:#f}

Hexadecimal Values
Split the color code into three parts
Each part represents the intensity of a primary color
(red, green, blue)
If all three primaries have the same value, the color
is a shade of grey (could also be black or white)
Low values are darker, high values are brighter

Some RGB Hex Codes

White

FFFFFF

Light Grey

CCCCCC

Black

000000

Dark Grey

333333

Red

FF0000

Yellow

FFFF00

Green

00FF00

Cyan

00FFFF

Blue

0000FF

Magenta

FF00FF

Switching Color Mode

When switching to Indexed Color
you may lose some color data!
Many Photoshop features only work in RGB mode

The Image will be easier to

compress efficiently if
the number of colors is reduced / limited
there are fewer details / edges
there is more space, flat colors or gradients
there is less essential information
and vice versa

Lossy and Lossless

Compression can be either Lossy or Lossless
Lossless compression (e.g. PNG-24) allows the
original data to be reproduced exactly
Lossy compression (e.g. JPEG) is efficient because it
throws away data which is not needed
Recompressing in a lossy format will cause further
data loss

Color Reduction, Posterizing

and Dithering

24 bit original

3 bit (8 colors)
with dithering

3 bit (8 colors)
no dithering (posterized)

Anti-Aliasing
Simple transparency (gif, png-8)
Pixels are mixed with background
when the image is created
Simple
transparency with
pure white matte
showing
aliased fringe
over the red pixels

Background color is called a

matte color
Pixels are completely transparent
or completely opaque

Anti-Aliasing
Edge pixels are mixed with a background colour
(matte)
Using the wrong matte color results in an ugly,
aliased fringe or halo

Indexed Color
with simple transparency

Green matte

Anti-Aliasing
with full transparency (png-24)
Pixels are mixed with background
when the image is displayed
Each pixel has up to 256 levels of
transparency
Takes up more space on disk,
longer time to download (etc.)
Requires more processor power,
and may be slower

RGB + Alpha

File size is
greater than
with simple
transparency

Resolution for Print & Screen

Measured in ppi (pixels per inch)
or dpi (dots per inch)
dpi is only really meaningful in printing
(often 300dpi and up)
Different sized screens may have the same
resolution, but around 72-96 dpi is common.
'Retina' displays have higher 'device resolution' than
the browser thinks.

Resolution on Screen
Higher screen resolutions offer finer detail, but use
more screen memory (VRAM), and may therefore
require lower bit depths.
Image resolution is given as height and width in
pixels.
Physical size (in inches or centimeters) is not really
meaningful for screen-based images.
The on-screen size may be different from the actual
pixel size (may be scaled up or down).

Resolution and Image Size

Use a higher resolution for editing than you will
finally need.
Scale down to the correct size when finishing
(e.g. when compressing in Save for Web)
Scale your images in the browser
only if suitable for the device resolution.
Make proper thumbnails if you need them

Indexed Color: gif

Graphic Interchange File format
Lossless, but only up to 256 colors
Uses run-length encoding (LZW)
Good for large areas of flat color (logos etc.)
Politically incorrect history of patent issues
Allows simple transparency
Allows simple animation

Indexed Color: png-8

Portable Network Graphic
Lossless, but only up to 256 colors
Uses more efficient and versatile encoding than gif
(can handle gradients and stripes intelligently)
Good for large areas of flat color (logos etc.)
Politically correct an open standard
Allows simple transparency
No animation (but MNG)

True Color: png-24

Portable Network Graphic
(Almost) Lossless, 24 bit color
Excellent quality
Medium compression efficiency
Allows true transparency
Can be slow to compress
MSIE6 does not support alpha channels!

True Color: JPEG

Joint Photographic Experts Group
Lossy, 24 bit colour
Very efficient for compressing photographs
No alpha-channel or transparency of any kind
Do not recompress if you can avoid it!
A poor choice for flat color / illustration / text
Edges tend to become less sharp

JPEG: Compression Artifacts

Favicons

Can be .ico, .png, .gif, .jpg

Pixel sizes of 16!16, 24!24, 32!32, 64!64
Inconsistent browser support
for anything greater than 16!16

Favicons, Touch icons, Tiles

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]>
<link rel="shortcut icon" href="path/to/favicon.ico">
<![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Other Formats
PSD your primary editable format! (Photoshop)
TIFF a general purpose format with simple lossless
compression.
Raw a digital negative produced by
professional digital cameras. Very high quality.
BMP Microsoft Windows native image format
.ICO Microsoft Windows native icon format

Other Formats
EPS Usually for vectors, but may contain bitmaps
AI Adobe Illustrator format (usually vectors)
PDF Very often contains images
and vector content
(e.g. styled text, diagrams)

Other Formats
Device-specific formats (e.g. for handheld devices)
Software-specific formats (e.g. textures, icons)
Exotic forms of PNG, EPS and TIFF
Obsolete formats for nostalgia, legacy systems
Your development teams own proprietary hacks
A thousand others