Download How to choose file formats and compression settings for Web imagery

IMAGE OPTIMIZATION
How to choose file formats and
compression settings for Web imagery
WEB IMAGERY CHARACTERISTICS
SIZE MEASUREMENT
•
An image used on the web is always
measured in pixels, not in inches or
picas like in print.
SIZE MEASUREMENT
•
Image resolution on the web is 1:1*—
every pixel in an image is displayed.
•
In Photoshop, always work at a
magnification of 100% (Command-1).
* The exception are devices with HighDPI screens: iPhones, iPads, and MacBook Pros with Retina
displays, and many other devices. Generally, these devices have four pixels for every pixel on a
“standard resolution” screen and display Web imagery at 2x their normal size.
Standard Resolution
High DPI
Standard Resolution
High DPI
SIZE MEASUREMENT
•
When creating web graphics with
fonts in Photoshop, set your image
pixels per inch (PPI) setting to 96.
•
This will allow you to use familiar font
sizes in Photoshop.
•
Ignore the Width and Height in inches
—they don’t matter within a Web
browser.
FILE SIZE
•
Compared to print, web images are smaller and easier to
work with.
•
However, all images bound for the web require
optimization.
•
Optimization tweaks the image to reduce its file size, which
helps reduce image download times.
HOW DOES OPTIMIZATION MAKE AN
IMAGE SMALLER?
•
Removes unwanted colors (GIF, PNG)
•
Removes non-essential visual data
(lossy compression; JPEG)
•
Removes embedded previews, thumbnails, icons and
metadata (not always a good thing—think copyright
information)
•
Compresses the image (through JPEG, GIF and PNG
file types)
GIF
Graphic Interchange Format
GIF
•
Developed by CompuServ in the late 1980’s for
transmission over a modem.
•
Uses a lossless compression method to reduce image size.
•
Limited to a maximum of 256 colors.
FEATURES
•
LZW Compression
•
•
A loss-less method of compression, meaning that the pixel data is
unaltered when compressed.
Basic Transparency
•
Uses a simple 1-bit transparency: A color is either transparent or opaque.
FEATURES
•
Color Look-Up Table
Contains all of the colors (up to 256) available for a particular
GIF image.
• Reducing the number of colors in the CLUT reduces the
image size.
•
•
Simple Cell-based Animations
Photoshop (4,000 bytes)
GIF 8 colors (257 bytes)
JPEG 80% (1,538 bytes)
JPEG 30% (825 bytes)
JPEG @ 30%
GIF with 8 colors
GIF
WHEN TO USE GIFS
•
Navigation elements
•
Type as a graphic, with or without
anti-aliasing
•
Images with sharp edges or fine detail
•
Images with a large area of a single color
•
Simple animations
•
Animating Hamsters
WHEN TO USE GIFS
•
Navigation elements
•
Type as a graphic, with or without
anti-aliasing
•
Images with sharp edges or fine detail
•
Images with a large area of a single color
•
Simple animations
•
Animating Hamsters
JPEG
Joint Photographic Experts Group
JPEG
•
Can display millions of colors
(true-color, 24 bit image).
•
Designed from the beginning for photos
•
Uses a lossy-method of compression to create
very small files sizes.
FEATURES
•
Excellent Compression
•
•
•
•
Compression is “lossy”, resulting in JPEG artifacts.
JPEG reorganizes an image's pixels to reduce file size.
Done correctly, these artifacts are only visible when the
image is magnified.
True-Color Support
•
JPEGs support millions of colors (24 bit).
COMPRESSION QUALITY
0%
50%
100%
Photoshop (5,000 bytes)
GIF 256 colors (2,545 bytes)
JPEG 80% (1,402 bytes)
JPEG 0% (490 bytes)
OPTIMIZATION TIPS
•
Save photos for the web between the 60% to 80% quality levels.
•
Always save your original Photoshop files.
•
•
Once an image is compressed using JPEG, you cannot revert to a previous,
superior quality level without the original, uncompressed image.
Don’t save CMYK images as JPEGs.
WHEN TO USE JPEG
•
Photographs
•
Any image requiring more that 256 colors
•
Complex imagery with soft edges
PNG
Portable Network Graphics
PNG
•
PNG is (new-ish) file format that brings the best
parts of GIF into an open format.
•
Supports precise color selection and loss-less
compression (like GIF).
•
Provides excellent 8-bit transparency support.
•
Browser support is now pretty good.
8-BIT TRANSPARENCY
•
The hallmark feature of PNG is full support
for alpha-channel transparency.
•
This opens the door for the use of adaptable
color blending between images and HTML
elements.
8-BIT TRANSPARENCY
GIF Transparency
PNG Transparency
8-BIT TRANSPARENCY
GIF–Grad to Black
PNG–Grad to Transparency
8-BIT TRANSPARENCY
GIF–Grad to Black
PNG–Grad to Transparency
Photoshop (4,000 bytes)
GIF 8 colors (257 bytes)
PNG-8 (363 bytes)
PNG-24 (1,471 bytes)
Photoshop (4,690 bytes)
PNG-8 256 colors (2,438 bytes)
JPEG 80% (1,402 bytes)
PNG-24 lossless (3,634 bytes)
WHEN TO USE PNG
•
Navigation elements
•
Type as a graphic, with or without
anti-aliasing
•
Images with sharp edges or fine detail
•
Images with a large area of a single color