Upload
beatrix-gibson
View
237
Download
1
Embed Size (px)
Citation preview
Image File FormatsImage File Formats All browsers supportAll browsers support
– GIF (Graphic Interchange Format) GIF (Graphic Interchange Format) limited to 256 colors limited to 256 colors lossless compression lossless compression good for flat color images (e.g., icon) good for flat color images (e.g., icon) can be used to create animation can be used to create animation can contain transparent areas can contain transparent areas
– JPEG (Joint Photographic Expert Group) JPEG (Joint Photographic Expert Group) can have millions of colors can have millions of colors lossy compression lossy compression good for “busy” pictures (e.g., photo) good for “busy” pictures (e.g., photo)
– PNG (Portable Network Graphics) PNG (Portable Network Graphics) similar to GIF but designed for Web use similar to GIF but designed for Web use license-free (GIF was developed by CompuServe) license-free (GIF was developed by CompuServe) uses 24-bits per pixel uses 24-bits per pixel
GIF and JPGGIF and JPG
GIF Examples GIF Examples http://www.widearea.co.uk/designer/bars.hthttp://www.widearea.co.uk/designer/bars.htmlml
JPG ExampleJPG Examplehttp://www.widearea.co.uk/designer/ducks.hthttp://www.widearea.co.uk/designer/ducks.htmlml
ThumbnailsThumbnails AnthuriumAnthurium
Chaminade LogoChaminade Logo
GIF file (10 KB) JPG file (5 KB)
GIF file (1.22 KB) JPG file (1.33 KB)
Image SourcesImage Sources
Sources Sources – Free Cliparts Free Cliparts – Search Engines, e.g., Google, JeevesSearch Engines, e.g., Google, Jeeves– Using "Right Click" Using "Right Click"
Respecting Copyrights Respecting Copyrights Creating Your Own Creating Your Own
– digital camera digital camera – "Paint" programs (bit-mapped graphics) "Paint" programs (bit-mapped graphics) – "Draw" programs (vector graphics) "Draw" programs (vector graphics) – MS Word -->Insert Picture --> MS Paint (bmp) --MS Word -->Insert Picture --> MS Paint (bmp) --
>>
Inline ImageInline Image
(This picture was downloaded from the Web, but I am not clear about its original source.)
<img SRC="einsteinsm.jpg" ALT="Albert Einstein">
Image in a Different FolderImage in a Different Folder
<img SRC=“image/einsteinsm.jpg" ALT="Albert Einstein">
<img SRC=“../image/einsteinsm.jpg" ALT="Albert Einstein">
In a child folder
In an sibling folder
myPage.html
einsteinsm.jpg
Image\
Image\
einsteinsm.jpg
Images and TextImages and Text
<img src="einsteinthm.jpg" alt="Albert Einstein">Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the <i>Theory of Relativity</i>, he did not receive a Nobel Prize for that work.
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.
Left Alignment of ImageLeft Alignment of Image
<img src="einsteinthm.jpg" alt="Albert Einstein“ align=“left”>Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the <i>Theory of Relativity</i>, he did not receive a Nobel Prize for that work.
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.
Right Alignment of ImageRight Alignment of Image
<img src="einsteinthm.jpg" alt="Albert Einstein“ align=“right”>Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the <i>Theory of Relativity</i>, he did not receive a Nobel Prize for that work.
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.
Spacing around ImageSpacing around Image
<img src="einsteinthm.jpg" alt="Albert Einstein“hspace=“20”> Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the <i>Theory of Relativity</i>, he did not receive a Nobel Prize for that work.
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.
Image as LinkImage as Link
<a HREF="http://www.sun.com/workshop/java/"> <img src=“java.gif" alt=“Java” align=“left”> </a> Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.
Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.
Link to a Larger ImageLink to a Larger Image
<a HREF=“einstein.jpg”> <img src=“einsteinsm.jpg" alt=“einstein” align=“left”> </a> Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.
Width & Height AttributesWidth & Height Attributes
Gives the browser a “heads-up” for Gives the browser a “heads-up” for faster displayfaster display
Use right-click on image to view its Use right-click on image to view its sizesize
<img SRC="einsteinthm.jpg" WIDTH="82" HEIGHT="114" ALT="Albert Einstein" > Albert Einstein received a Nobel Prize for his work explaining the particle-wave dual nature of the light. Although he is famous for the <i>Theory of Relativity</i>, he did not receive a Nobel Prize for that work.
Creating Thumbnail with Creating Thumbnail with PaintPaint
AccessoriesAccessoriesPaintPaint ImageImageAttributeAttribute
– Record pixel size for larger dimension as Record pixel size for larger dimension as sizesize– x/100 = 120/size Solve for x = 100(120/size)x/100 = 120/size Solve for x = 100(120/size)
ImageImageStetch/SkewStetch/Skew– Enter the x value in both Enter the x value in both horizontalhorizontal
andandverticalvertical box. box.– OKOK
FileFileSave AsSave AsSave as Save as pngpng or or jpgjpg file. file.
Borders on Link ImageBorders on Link Image
<a HREF=http://www.kodak.com> <img src=“girl.jpt" alt=“Java” align=“left” border=“0”> </a> Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.
Default Border=“0”
Image Border of More Than Image Border of More Than 11
<a HREF=http://www.kodak.com> <img src=“girl.jpt" alt=“Java” align=“left” border=“10”> </a> Sun Microsystems provided a host of tools in Java program development, many of which are free from the company.
Image SizeImage Size
Digital image is composed of Digital image is composed of pixelspixels (picture elements). (picture elements).
Each pixel requires 1 byte (gray scale), Each pixel requires 1 byte (gray scale), 2 bytes, or 3 bytes of information. 2 bytes, or 3 bytes of information.
Large images take long time download.Large images take long time download.(E.g., 57.6 Kbits/s (E.g., 57.6 Kbits/s ≈≈7 KBytes/s. One 30 7 KBytes/s. One 30 KB image would take over 4 sec.)KB image would take over 4 sec.)