1. Images

2. Image File Formats All browsers support All browsers support –GIF (Graphic Interchange Format)  limited to 256 colors  lossless compression  good for flat color images (e.g., icon)  can be used to create animation  can contain transparent areas –JPEG (Joint Photographic Expert Group)  can have millions of colors  lossy compression  good for “busy” pictures (e.g., photo) –PNG (Portable Network Graphics)  similar to GIF but designed for Web use  license-free (GIF was developed by CompuServe)  uses 24-bits per pixel

3. GIF and JPG GIF Examples http://www.widearea.co.uk/designer/bars.html GIF Examples http://www.widearea.co.uk/designer/bars.html http://www.widearea.co.uk/designer/bars.html JPG Example http://www.widearea.co.uk/designer/ducks.html JPG Example http://www.widearea.co.uk/designer/ducks.html http://www.widearea.co.uk/designer/ducks.html

4. Irises (GIF: 236 KB)

5. Irises (JPG: 82 KB)

6. Comparing GIF vs JPG JPG GIF

7. Thumbnails Anthurium Anthurium Chaminade Logo Chaminade Logo GIF file (10 KB)JPG file (5 KB) GIF file (1.22 KB)JPG file (1.33 KB)

8. Image Sources Sources Sources –Free Cliparts Free ClipartsFree Cliparts –Search Engines, e.g., Google, Jeeves GoogleJeevesGoogleJeeves –Using "Right Click" Respecting Copyrights Respecting Copyrights Creating Your Own Creating Your Own –digital camera –"Paint" programs (bit-mapped graphics) –"Draw" programs (vector graphics) –MS Word -->Insert Picture --> MS Paint (bmp) -->

9. Inline Image (This picture was downloaded from the Web, but I am not clear about its original source.)

10. Image in a Different Folder In a child folder In an sibling folder myPage.html einsteinsm.jpg Image\ einsteinsm.jpg

11. ALIGN Attribute

12. Images and Text Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the Theory of Relativity, he did not receive a Nobel Prize for that work.

13. Left Alignment of Image Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the Theory of Relativity, he did not receive a Nobel Prize for that work.

14. Right Alignment of Image Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the Theory of Relativity, he did not receive a Nobel Prize for that work.

15. Spacing Spacing around Image Spacing Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the Theory of Relativity, he did not receive a Nobel Prize for that work.

16. Image as Link Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.

17. Link to a Larger Image Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.

18. Width & Height Attributes Gives the browser a “heads-up” for faster display Gives the browser a “heads-up” for faster display Use right-click on image to view its size Use right-click on image to view its size Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the Theory of Relativity, he did not receive a Nobel Prize for that work.

19. Creating Thumbnail with Paint Accessories  Paint Accessories  Paint Image  Attribute Image  Attribute –Record pixel size for larger dimension as size –x/100 = 120/size Solve for x = 100(120/size) Image  Stetch/Skew Image  Stetch/Skew –Enter the x value in both horizontal andvertical box. –OK File  Save As  Save as png or jpg file. File  Save As  Save as png or jpg file.

20. Borders on Link Image Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.http://www.kodak.com Default Border=“0”

21. Image Border of More Than 1 Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.http://www.kodak.com

22. Image Size Digital image is composed of pixels (picture elements). Digital image is composed of pixels (picture elements). Each pixel requires 1 byte (gray scale), 2 bytes, or 3 bytes of information. Each pixel requires 1 byte (gray scale), 2 bytes, or 3 bytes of information. Large images take long time download. (E.g., 57.6 Kbits/s ≈7 KBytes/s. One 30 KB image would take over 4 sec.) Large images take long time download. (E.g., 57.6 Kbits/s ≈7 KBytes/s. One 30 KB image would take over 4 sec.)