ImagesImages

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

Irises (GIF: 236 KB)Irises (GIF: 236 KB)

Irises (JPG: 82 KB)Irises (JPG: 82 KB)

Comparing GIF vs JPGComparing GIF vs JPG

JPG

GIF

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

ALIGN AttributeALIGN Attribute

<img src="einsteinsm.jpg" alt="Albert Einstein“ align=“right”>

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.)