Free Images and How to Use Them

Free content encompasses all works in the public domain and also those copyrighted works that are free for public use. These are also known as "creative commons", "Copyleft", "Open content" (similar to Open source), "Public domain", "royalty free" or "Share-alike".

In Squidoo you can either upload the image into certain modules (Polaroid and Introduction) or you can link to the image using html code.

*In some cases you would want to upload your images to a free image hosting site and then link to it.

Here is a simplified example of the html you would use:

<img src="http://www.yourdomain/squidoo/yourimage.jpg">


Normally you can simply right-click on the image to find the url (address) of the image.

Select Properties

Highlight and then copy the location address. Then paste it into the src part above.

*You will replace the url (http://) with the link to the image

If you wish to make a "clickable" Image link, you can use the following example, after modifying for your needs.

Simplified HTML code for you to use:

<a href="http://www.squidoo.com/the-lens-you-are-linking-to.html"><img src="THE URL OF YOUR IMAGE"></a>


- You can click on this link.

You can use this for any image, including banners, icons, buttons, or whatever.

The target="_blank" attribute allows you to have a new window open whenever your visitor clicks on your image link (this can be used in normal text links as well).

Just add target="_blank" to your link.

Simplified html code for you to use:

<a href="THE URL OF THE PAGE YOU WANT TO LINK TO" target="_blank"> <img src="THE URL OF YOUR IMAGE" /></a>

You can change the sizing of images that are hosted elsewhere by using the size attribute.

It is easy to use. The harder part would be to get the dimensions right, so the image doesn't appear squished.

The html image (img src=) and size (height="pixel size" and width="pixel size") tags looks like the following:

<img src="image.jpg" width="200" height="150">



If you wish to keep the images current size dimensions, you do not need to to include the size tag (width="" height="").

The Golden Gate image above is kept as the current dimension of a 375x500 pixels, as I found it (as seen in properties).

I can resize it to whatever dimension I want by using the size tag.

But what if I just guess at the ratio between height and width? Let's say I make it 200x300 pixels?

Here's the code for the image below:

<img src="http://freedigitalphotos.net/image/s_golden-gate-bridge.jpg" width="200" height="300">

It doesn't look good, does it?

This is why it is important to find a good aspect ratio. But how?

You can use either online or offline (software on your computer) methods to determine the correct "aspect ratio" and resize your image, if you wish.

Here's a list of free ways to resize an image (and determine aspect ratio):

Software:
Irfanview *Recommended
Resize-o-matic

Online:
Shrink Pictures

*Just remember, you may not need to truly resize the image, but just determine the aspect ratio. The size tag will do the rest.

Using the correct aspect ratio, in this case I chose 200x266, it appears to look correctly proportioned.

Here's the code after using Irfanview to determine aspect ratio:

<img src="http://freedigitalphotos.net/image/s_golden-gate-bridge.jpg" width="266" height="200" />


Simple HTML code for you to use:


<img src="URL OF YOUR IMAGE" width="PIXELS" height="PIXELS">

In order to make a row of separate images you will need to not have any spaces between the image html.

One easy way to make sure there are no spaces is to copy the html into Windows Notepad (without wordwrap). Otherwise, carefully check the code to make sure there are no spaces.

Bad - Notice the space?
<img src="http://www.yourdomain/squidoo/yourimage.jpg"> <img src="http://www.yourdomain/squidoo/yourimage.jpg">

Good - No spaces between the image html.
<img src="http://www.yourdomain/squidoo/yourimage.jpg"><img src="http://www.yourdomain/squidoo/yourimage.jpg">

Things to consider:
♩ The total width is approximately 600 dpi, so your images must total less than that pixel width.
♩ You can use padding (see advanced section below) to separate the images.

In addition to the other attributes (ie. height and width) that I mentioned, there are others that you can and possibly should use.

The Align attribute:

With the align attribute, you can designate where on the page an image will display.

For example: using the attribute will align the image to the left, right, center, bottom, middle, or top of text on the page.

The html code for the image below:

<img src="http://photojournal.jpl.nasa.gov/browse/PIA03149.jpg" align="left" />

The alt attribute allows text-only browsers to display only the text that is specified in the "alt" attribute for the image.

More importantly though, it is helpful for search engines to identify image content and is important toward Search Engine Optimization.

It is actually important to include the alt attribute on all images that you use, if you want to improve your on-page SEO.

Simplified html code for you to use:

<img src="http://www.example.com/image.jpg" alt="The Title of This Image">

The border attribute defines a border around an image, however it will not work properly in Squidoo lenses. You need to use the style attribute instead.

The style attribute would look something like the following example:

style="border: 3px solid #000000; padding: 8px;"

border: 3px being a border of 3 pixels (change this to change the width of the border)
solid #000000 being a solid black color. Click here for other color choices.
padding: 8px being the distance from the edge of the image

The following html was used in the image below:

<img src="http://freedigitalphotos.net/image/s_golden-gate-bridge.jpg" width="266" style="border: 3px solid #000000; padding: 8px;" height="200" />


Feel free to change it however you like for your situation.



Simplified HTML code for you to use:

<img src="URL OF YOUR IMAGE" width="PIXELS" height="PIXELS" style="border: 3px solid #000000; padding: 8px;" />