Image and Video Mentor

Image file formats used on the web

1. GIF - Graphics Interchange Format - this is best for images that have less than 256 colors. It is not good for photographs.

2. JPG - Joint Photographic Experts Group - this is best for photographs and for drawings using a variety of shades because it allows an increased color spectrum.

3. PNG - Portable Network Graphics

4. SVG - Scalable Vector Graphics

5. WebCGM - Web Computer Graphics Metafile

Squidoo image modules

Here are some Squidoo modules you can add images to:

1. The Intro Module - Always, always, always add an image to your intro module!

2. The Polaroid Module - a nice big photo in what looks like a Polaroid photograph frame.

3. The Text Module - you can upload a small image, or link to a larger one using the codes below.

4. Text With BIG Picture - exactly like the Text Module, but a larger picture can be uploaded.

5. The Flickr Module - you can upload your photos to Flickr and then share them here with this module.

6. The Flickr Voting Plexo - upload photos to Flickr and let people vote on them!

7. Photo Gallery - upload multiple images to your lens and display as a gallery.

8. SlideShare - create a Power Point presentation (or use FREE Open Office Impress,) upload it to SlideShare and then import it to your lens.

How to link to an image file hosted on your own server

1. If you know the exact dimensions (in pixels) of your image, you can specify that in your link:
   
   <img src="http://www.yourserver.com/yourimage.png" width="200" height="150" />

2. You should add an "alt" attribute because it contributes to the search engine optimization of your lens, and because technically, in XHTML (the most recent standard) alt attributes should be used:
   
   <img src="http://www.yourserver.com/yourimage.png" width="200" height="150" alt="Describe Your Photo Here" />

3. Let's say you want your image to cling to the right side of the module. You'll need to add an "align" attribute. You should also add "hspace" and "vspace" attributes to put a little space between your image and the words that surround it:
   
   <img src="http://www.yourserver.com/yourimage.png" width="200" height="150" alt="Describe Your Photo" align="right" hspace="4" vspace="4" />

4. If you're going to use this image as a link, you will put an anchor tag around the whole thing:
   
   <a href="http://www.yoursite.com" title="Describe Your Site"><img src="http://www.yourserver.com/yourimage.png" width="200" height="150" alt="Describe Your Photo" align="right" hspace="4" vspace="4" border="0" /></a>

5. If you want no borders use the "border" attribute in your image tag:
   
   <img src="http://www.yourserver.com/yourimage.png" width="200" height="150" alt="Describe Your Photo" align="right" hspace="4" vspace="4" border="0" />

6. If you want a colored border around the image, add a bit of in-line CSS code:
   
   <img style="border:2px solid #ff0000;" src="http://www.yourserver.com/yourimage.png" width="200" height="150" alt="Describe Your Photo" align="right" hspace="4" vspace="4" border="0" />