1 / 19

File Formats

File Formats . COM 366 Web Design & Layout. Native file format Format native to software program . psd > PhotoShop default Preserves layers Use “Save for Web ” in PhotoShop to export as jpeg file. Graphic files. Raster or bitmap graphics Use pixels PhotoShop. Vector graphics

beau
Télécharger la présentation

File Formats

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. File Formats COM 366 Web Design & Layout

  2. Native file format • Format native to software program • .psd> PhotoShop default • Preserves layers • Use “Save for Web” in PhotoShopto export as jpeg file

  3. Graphic files • Raster or bitmap graphics • Use pixels • PhotoShop

  4. Vector graphics • Use mathematical formulas • Combine lines, points, curves • Fill with colors • Flash

  5. GIF format (.gif) • Graphic interchange format • GIF images use indexed color • Maximum of 256 colors • Compressed • Reduce file size • “lossless” means image doesn’t lose any quality by being compressed

  6. Biggest advantage is that one color can be transparent • Allow background on Web page to show thru • Can be interlaced • Download in layers with each layer adding more detail

  7. Interlaced file displaying every 8th row; this is how the file first loads. Interlaced file displaying all rows; this how the file appears after the entire graphic has loaded.

  8. Best used for text or illustrations or cartoons

  9. JPEG file (.jpeg) • or .jpg • Joint Photographic Experts Group • Best used for photos • Uses “lossy” compression scheme • Some detail is lost • Reduces file size

  10. Progressive JPEG • Similar to interlacing for GIF file • Downloads in waves or layers

  11. Big advantage of jpeg is that it can contain millions of colors • Can choose from various compression levels • Low = more degradation • Higher the quality level, greater file size

  12. Quality = 10, 4.7 kB Quality = 50, 15.1 kB Quality = 100, 83.2 kB

  13. Best used for photos

  14. File sizes • File sizes measured in bytes • Bit smallest unit of measurement on computer • On / off, 1 or 0 • 8 bits = 1 byte • One byte equals about one letter “A”

  15. A 1,000 bytes = kilobyte (kB) • A million bytes = megabyte (MB) • A trillion bytes = gigabyte (GB) • Lowercase b would mean bits • Mb

  16. Other formats • PNG (.png) • Portable network graphics • Developed as replacement for GIF • Not patented • Lossless compression • Transparent background • Can have more colors than gif (PNG-24)

  17. PNG-8 uses 8-bit color • 256 colors • Comparable to gif • PNG-24 • Supports millions of colors • Comparable to jpeg • Larger file size than jpeg • But uses lossless compression

  18. What a cat image looks like saved as a PNG-24 and placed against a patterned background on the HTML page:

  19. .html • Hypertext markup language • All web pages have to be in this format • Only format Web browsers (Safari, Firefox) can read

More Related