Adding an Image to Your Website

If necessary, open your page or post with text from the previous lesson.

Locate a Creative Commons licensed image that you can use on your site. I found this image by search for the key word "learning." Save your image.

Photo Courtesy of Tela Chhe on Flickr
Photo Courtesy of Tela Chhe on Flickr


Obtaining an Image

Once you have found an image you would like to use on your website, you simply need to put your mouse over the image and either right-click (Windows) or control-click (Mac).

A menu will appear. Select "Save Picture As" (Windows) or "Save Image As" (Mac). Save the image to a location where you can easily find it again, such as an images folder.

Adding an Image to Wikispaces

  1. Click on the Edit button.
  2. Select the button on the editor that says File.
  3. Select "Insert Files."
  4. Click the button that says "Upload Files."
  5. Locate your image on your computer.
  6. Select "Open" when you have found the image.
  7. Your image will upload to the wiki. When it is finished, click on it to insert it into the page.

wikiimage1.jpg

wikiimage2.jpg

wikiimage3.jpg

wikiimage4.jpg

wikiimage5.jpg

Adding an Image to Blogger

  1. Click on the button that looks like a picture.
  2. Click on the button that says "Browse" next to "Add an Image from Your Computer."
  3. Locate your image on your computer.
  4. Click "Open."
  5. Click the box that says you accept the Terms of Service.
  6. Make any changes you want to layout and size.
  7. Click "Upload."
  8. Wait for the image to upload to your album.
  9. It should appear automatically in your post.

blogimage1.jpg

blogimage2.jpg

blogimage3.jpg


blogimage4.jpg

Adding an Image to a Google Site

  1. Select "Insert" from the menu.
  2. Select "Image" from the top of the menu.
  3. Click the button that says "Browse."
  4. Locate the image on your computer.
  5. Click "Open."
  6. Wait for the image to upload.
  7. Click the button that says "OK."
  8. The image should appear on your website.

websiteimage1.jpg

websiteimage2.jpg

websiteimage3.jpg

websiteimage4.jpg

websiteimage5.jpg

Editing Images

Try using some of the image editing functions on your site.

Editing an Image on Wikispaces

  1. When you click on an image in Edit mode on a wiki, a popup menu will appear.
  2. Use the "Alignment" dropdown menu to make the image align to the left, center, or right side of the page.
  3. Use the minus or plus buttons to make the image smaller or bigger.
  4. Use the caption space to make a caption for the image.
  5. Important: Do not click the "Remove File" button by mistake. Your changes will appear automatically. You do not need to click a button to save.

wikiimageedit1.jpg
After you have finished editing the image, save your post or page and move on to the next step, embedding a video into your website.

Editing Images on Blogger

Editing your images is easiest during the uploading phase, but if you know some HTML, you might be able to make some changes. In addition, you can click on the image and drag the edges to make it smaller or larger at the corners and sides. You might have more trouble changing the alignment without knowing HTML.

blogimageedit1.jpg

Editing Images on a Google Site

  1. In Edit mode, your image will have a blue bar along the top.
  2. Click "L" to align the image to the left, "C" to center it, or "R" to align the image to the left.
  3. Click "S" to make the image smaller, "M" to make it medium size, and "L" to make it large (full size).
  4. If you want the text to wrap around the image magazine or newspaper style, make sure "Wrap" is on. If you don't want the text to wrap, click the link that says "on" so that it turns "off."

websiteimageedit1.png

After you have finished editing the image, save your post or page and move on to the next step, embedding a video into your website.

An Important Note about Images

As you learned in the module about copyright, fair use, and Creative Commons, you should be careful about adding copyrighted images to your website. You are probably within bounds of the fair use exception to use copyrighted images, particularly for an educational purpose and because using them in your site is most likely transformative use. However, many wonderful Creative Commons images can be found that might suit your requirements.

One thing you should NOT do is hotlink an image. Hotlinking is when someone uses a link to an image that is saved on another website instead of saving a copy of the image on their own website. The reason hotlinking is a problem is that when people embed an image saved on another site instead of uploading the image to their own, it can cause the other website's owner to incur high bandwidth charges. Some website providers limit the amount of bandwidth, or amount of data transferred from a website to a user's computer. That means that hotlinking can cost the other website owner money. In addition, many sites disable hotlinking, so if you try to do it, your image won't show up.

There are some sites that enable hotlinking. All you need to do is check to see whether or not it is OK. If you can't tell, then it is better to err on the side of caution and upload the image to your own site.

Another added benefit to uploading the image to your own site is that you will never have to worry that the other website might delete the image, making it impossible for your website to display it.

After you have finished editing the image, save your post or page and move on to the next step, embedding a video into your website.

Module 1 | Module 2 | Module 3 | Module 4 | Module 5