JRN 440 Adv. Online Journalism Raster file formats for projected

1. JRN 440Adv. Online JournalismRaster file formats for projected Monday, 2/13/12

2. 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

3. 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

4. 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

5. 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.

6. 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

7. 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)

8. 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/jpeg-jpeg-2000-comparison.htm • Problem • the only way browsers can display jpeg2000 is with a plugin • can’t use in Dreamweaver

9. 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 high-contrast edges (images from Illustrator) • Perceptual- creates nicer transitions between colors; best for scanned images

10. 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.

11. 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="background-color:red;">

12. 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

13. 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

14. 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.