Download presentation
Presentation is loading. Please wait.
Published byBeatrix Gibson Modified over 9 years ago
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.)
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.