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 béziers)
•  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 team’s own proprietary hacks
•  A thousand others…