Download VCD 357 Marketing Communication

JRN 440
Adv. Online Journalism
Raster file formats for
projected
Monday, 2/13/12
Class Objectives
 Lecture

Raster File Formats for Projected
 Homework

Update: P1 due Monday, 2/20, at 2:05 p.m.


No class this Wednesday, 2/15
Sign up for 3/28 1:30-3:30pm SmartPhone
success at the U.C.



SmartPhone and tablet productivity, time, project,
people, and e-mail management apps
“Critical basics" for true mobile productivity
To register, please go to iCentral/My Work
Day/Employee Training/Current Employee Training
File types
 File names, extensions or suffixes that
indicate the format or usage of a file and a
brief description of that format.
 The file format in which you save your file
depends on where it is headed…
 For Print use TIF, EPS, and PDF
 For Web use GIF, PNG, and JPEG
Compression
 Compression = taking large files and making them
smaller. Compression works by eliminating redundant
information. There are two types of compression:
 Lossy - This method eliminates data to tightly
compress it. Usually, this means the repetitive or
redundant data so the resulting output is NOT an
exact copy of the original.
 JPG
 Lossless - Uses a compression algorithm that
reduces file size but does not lose any data.

RLE and LZW
Lossy Compression
 Lossy= lose data when compressing
 Most common technique is JPEG
 Reduces the file size of natural, photographic-like true-color
images as much as possible without affecting the quality of
the image as experienced by the human sensory engine.
 We perceive small changes in brightness more readily than
we do small changes in color. It is this aspect of our
perception that JPEG compression exploits in an effort to
reduce the file size.

Idea is too much data for normal human eye to see…the
image would still look the same without all this extra data.
 Do not make multiple compression saves; avoid
recompressing JPEG images multiple times. You
should save 1x and return to the master image for
subsequent changes.
Lossless Compression
 Lossless = no loss of data when you
compress or decompress the file


All image information is restored during
viewing
Common techniques


RLE, default for PDFs
LZW, used to be only option for TIFFs
 PNG and GIF are lossless
Web images: JPEG, JPG
 Best for displaying photographs composed of many colors or
subtle color variations.
 Not good for images that have a lot of solid colors

Computer generated art, line art, type
 When you save as JPG


Compression quality
 Higher quality number means better image quality, less
compression, larger file size
 Lower quality number allows for more compression and
worse image quality and smaller file size
Progressive- select this
 Web browsers will display a lo-res version of the image
first, then replace with hi-res
 On the average- Progressive jpegs are actually smaller
than non-progressive (do it now)
Web Images: JPEG 2000
 Extension is (normally) .jp2
 Either Lossless OR lossy compression
 Includes transparency
 Ability to display images at different resolutions
and sizes from the same image file
 http://www.verypdf.com/pdfinfoeditor/jpegjpeg-2000-comparison.htm
 Problem
 the only way browsers can display jpeg2000 is
with a plugin
 can’t use in Dreamweaver
Web Images: GIF
 First image format available for the web; still
widely used

Owned by Compuserve
 Best for small graphical images (e.g. icons,
buttons) comprised of a few flat broad shapes
 When you save as GIF, your image mode
changes to Index color (only 256 colors)
 Reduction methods


Selective- better for synthetic images with highcontrast edges (images from Illustrator)
Perceptual- creates nicer transitions between
colors; best for scanned images
Web Images: GIF
 GIF Options, Interlaced
 Interlacing helps convey information to the viewer
faster.
 An interlaced image is broken down into four passes,
the first of which displays the entire image at low
resolution very quickly.
 Each successive pass increases the resolution as the
image is being downloaded.
 Gives the user a better idea about what is loading so
they can make decisions about the information without
waiting for the entire image to load.
Web Image: GIF
 Allows transparency
 Useful when adding spot illustrations of irregular
shapes to a Web page that has a background pattern
or color.

Background will show through all transparent sections
rather than having all the illustrations in solid
rectangles.
 In Photoshop, select the area you want to be
transparent, and delete it (on unlocked layer), be sure
to save as GIF


Do it now, save deleted as both JPG and GIF
Bring both into Dreamweaver
 Change mark-up to be <body style="backgroundcolor:red;">
Web Image: PNG
 Because Compuserve owns GIF patent, PNG
was created by W3C

Png is web standard (royalty free) for raster
images
 Can do everything GIFs can do
 Including transparency, although
Dreamweaver may not show it.. need to test it
in IE
Transparency
 When to use transparency

If you want a shape other than a rectangle
 Aliasing will create a sharper cut
 Anti-aliasing is a partial selecting of pixels
 Feathering (with anti-aliasing) also
produces a partial selecting of pixels
Photoshop and ImageReady
 In Photoshop CS, if you “Save for Web and
Devices”, you get lauched into ImageReady
 Clicking on the “optimized” tab is a good way
to get best suggestion for Web image
 2 and 4 up let you see what changes will do
to your image before you save them

“Dithering” means adding patterned or random
dots to the image to make it appear to contain
more colors than are actually in the palette,
allowing you to use a smaller palette size.