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 PhotoShop to 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 = 100, 83.2 kB Quality = 50, 15.1 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