Transcript Designing the User Interface - Northern Illinois University

Graphics
Part II
copyright Penny McIntire, 2010
Image Formats
• Graphics file formats have bearing on
the efficiency of file compression.
• First, some background:
– Some compression techniques retain every
bit of the image, with no degradation.
– Lossy compression: some data is lost each
time the file is saved/compressed.
• Never save over the top of an original image if
in a lossy format; mark the original “read only”
and save all modifications under new names.
2
copyright Penny McIntire, 2010
Image Formats
• The most important rule for efficient
storage of images is to use an
appropriate file format: JPEG, GIF, or
web-friendly PNG.
• All three are bitmapped formats.
3
copyright Penny McIntire, 2010
JPEG
• JPEG (Joint Photographic Experts
Group) .jpg, pronounced “jay-peg”
• Best for photographs: images that have
lots of colors, tiny bits of colors (even
individual pixels) and smooth color
changes (gradients).
– 16.8 million colors possible.
– No transparency, no animation, no (widely
supported) interlacing.
4
copyright Penny McIntire, 2010
JPEG
• Lossy compression; quality can be
compromised:
– Blurs crisp edges between adjacent colors.
– Alters the colors of the original.
– Adds artifacts /noise (random pixels of a
different color) to areas of solid color.
5
copyright Penny McIntire, 2010
JPEG
• Varying degrees
of compression &
quality loss.
• Example of heavy
compression, with
blurred lines, color
changes, and
artifacts…
6
copyright Penny McIntire, 2010
JPEG
• The prior image was not a good
candidate for JPG compression in the
first place (solid color, crisp lines), so
problems are exaggerated.
• Even so, don’t be afraid to try heavy
compression – often the quality loss is
not detectible on a photo on the web.
• The next image shows four
compression previews in Fireworks…
7
copyright Penny McIntire, 2010
Original image,
2640K
Almost no visible
degradation at 75%
quality
113 K
Visible
degradation of
color and
contrast at 50%
quality
52K
Visible degradation
of color and edges
at 25% quality
15K
JPEG
• Optimize Panel in Fireworks, for
choosing compression:
9
copyright Penny McIntire, 2010
JPEG
• Lossy compression, so never save over
the top of the original.
– Every save, even if saved at maximum
quality, degrades JPG quality.
– See http://vimeo.com:80/3750507 : a
photo after it’s saved 600 times.
• Manually adding a bit of blur in noncritical areas like backgrounds or
reducing the contrast of the photo can
decrease file size, too.
10
copyright Penny McIntire, 2010
JPEG
• Not good on solid-color types of
graphics, like cartoons or logos:
– Adds blur, which makes the edges fuzzy.
– Adds artifacts (noise).
– Alters colors.
11
copyright Penny McIntire, 2010
JPEG
• JPG colors are altered upon save, so
JPG colors are absolutely guaranteed
not to match HTML colors. Remedies:
– Sample the JPG color after the final save,
and use the sampled color in the HTML.
– Use GIFs when matching colors is critical;
closer results on color matching, plus you
can use a transparent background.
12
copyright Penny McIntire, 2010
GIF
• GIF (Graphics Interchange Format) .gif,
for line-based images with areas of
solid, flat color and few gradients, such
as cartoons, diagrams, line art, and
graphic text. Example:
13
copyright Penny McIntire, 2010
GIF
• Supports only 256 colors.
• Supports transparency, animation, and
interlacing.
• Lossless compression.
– Colors remain true when saved.
– Lines stay crisp.
– No artifacts.
14
copyright Penny McIntire, 2010
GIF
• GIF compression
– Uses a CLUT (Color Lookup Table) of up to
256 colors (less if fewer colors in the
image).
• Each CLUT entry includes a color’s RRGGBB hex
code, plus a smaller color code (never larger
than 256, of course).
• Each pixel is assigned one of the smaller color
codes, rather than the full RRGGBB code.
• An image with only two colors needs only a
one-bit color code for each pixel.
15
copyright Penny McIntire, 2010
GIF
• An image with 256 colors needs a one-byte
color code for each pixel.
• Thus, a higher color depth (number of colors)
increases both the size of the CLUT (more color
entries) and the overall file size, because every
pixel in the image now needs a larger code.
16
copyright Penny McIntire, 2010
GIF
• Examples:
3-color GIF, 3K
212-color GIF, 11K
17
copyright Penny McIntire, 2010
GIF
– Compression begins at the upper left
corner of an images, wends its way from
left to right on the top row of pixels, drops
down to the next row, and continues.
– For adjacent pixels of the same color, the
color code and a count of pixels is stored.
18
copyright Penny McIntire, 2010
GIF
– Thus, horizontal stripes compress more
efficiently than vertical stripes…
horizontal stripes, 3K
vertical stripes, 4K
19
copyright Penny McIntire, 2010
GIF
– Anti-aliasing, gradients (smooth transitions
from one color to another), dithering (see
Color lecture), pattern, and texture are all
double trouble – they interrupt horizontal
bands of color and also increase the
number of colors in an image…
20
copyright Penny McIntire, 2010
3-color image, 3K
gradient, 22K
(25K if dithering
turned on)
anti-aliasing, 4K
texture, 54K
GIF
– Worth repeating: GIF compresses best for
fewer colors, flat color (no noise or
texture), no anti-aliasing, no dithering, and
horizontal bands of color.
22
copyright Penny McIntire, 2010
GIF
– Photos, gradients, 3-D shading, and drop
shadows are the enemy of GIF
compression: use GIF only if you need
transparency (for instance, to float a
button or a cut-out photo with irregular
boundaries on the page) or animation.
• Will usually be a much larger file size than the
equivalent JPG.
• Lower quality than JPG, because only 256
colors.
23
copyright Penny McIntire, 2010
GIF
– To increase GIF quality in
those circumstances,
choose the following on
the optimize menu:
• 100% dithering (which
increases file size) to
make up for fewer colors.
• Adaptive color palette, to
choose from the most
prevalent colors in the
image.
24
copyright Penny McIntire, 2010
Example:
JPG, 80% quality, 4K
GIF, web-safe 216 colors, dithering off, 2K
GIF, web-safe 216 colors, dithering on, 10K
GIF, adaptive 256 colors, dithering off, 4K
GIF, adaptive 256 colors, dithering on, 4K (?)
GIF
– The eternal question: Is GIF pronounced
“jiff” or “giff”?
– Per Lynda Weinman’s book, <creative html
design.2>, page 36, Steve Wilhite, the
creator GIF, says he pronounces it…
“jiff”
(no reason, that’s just how he has always
pronounced it.)
– Just for fun:
http://mashable.com/2013/05/23/pronounce-gif-song/
26
copyright Penny McIntire, 2010
GIF
• Consider using interlacing on GIFs.
– Psychologically, studies have shown that
visitors view interlacing as faster, even
though it isn’t.
– Specified when you save the graphic.
– Controversial.
27
copyright Penny McIntire, 2010
Web-friendly PNG
• There is also a new web graphics format,
.png (pronounced “ping”), intended to
replace GIF.
• Careful: PNG is the native file format for
Fireworks, but that PNG format is not for the
web.
– Huge file sizes including layer and editing
information.
– Must export to GIF, JPG, or a web-friendly PNG.
• For the rest of this discussion, “PNG” refers
only to “web-friendly PNG.”
28
copyright Penny McIntire, 2010
Web-friendly PNG
• In theory, PNG has the strengths of both
JPEG and GIF:
– A choice of three color depths:
• Up to 256 colors, for small file sizes. Specify the exact
number of colors, in your image editor.
• True color (16.8 million colors), with much larger files.
• True grayscale, as opposed to GIF storing grayscale as
just a version of an adaptive palette.
– Lossless compression.
– Fast, high-quality interlacing.
29
copyright Penny McIntire, 2010
Web-friendly PNG
– Compression that has the potential to be
slightly more efficient than GIF, if used
wisely.
– Gamma correction (sRGB colorspace),
although IE doesn’t yet support it.
– Alpha channel transparency, which can
support up to 256 levels of transparency.
Greatly increases file size and not currently
reliable.
30
copyright Penny McIntire, 2010
Web-friendly PNG
– Downsides:
• Larger file sizes than JPG.
• Sometimes larger than GIF.
• Using the great features such as alpha channel
transparency, increased color depth, and highquality interlacing increase file size even more
substantially.
31
copyright Penny McIntire, 2010
Choosing a File Format
• If photo-style art and JPG is acceptable
(not too lossy), use JPG.
• If line art and GIF is acceptable, use
GIF.
• If you must have more than 256 colors
or alpha transparency, use PNG.
32
copyright Penny McIntire, 2010
Choosing a File Format
GIF image
JPG image
PNG image
line art & cartoons
photos
line art & cartoons
bitmap/raster
bitmap/raster
bitmap/raster
256
16.8 million
Variable, but up to 16.8 mill
yes, index transparency
no
yes, alpha transparency
yes
Not cross-browser
yes
Horizontal lines?
yes
no
n/a
Textures?
no
yes
n/a
Anti-aliasing?
no
yes
n/a
Gradients?
no
yes
n/a
Alters colors upon save?
no
yes
no
Adds artifacts/noise upon
save?
no
yes
no
Good for:
File format:
# of colors per image
Supports transparency?
Supports interlacing?
Compresses efficiently
for:
33
copyright Penny McIntire, 2010
Choosing a File Format
• Avoid combining JPEG-style art (say a photo)
and GIF-style art (perhaps text) into a single
image; whether you save it as a GIF or a JPG,
some part of it will be degraded.
– Try it as a PNG, or
– Export the two parts as separate images, then
overlaying one on top of the other in the web
page.
• Make one image a background for the page, a table cell,
or a div, and the other one foreground, or
• Use CSS to dynamically position one on top of the other.
34
copyright Penny McIntire, 2010
Graphics
• To be continued…
35
copyright Penny McIntire, 2010