Here we will talk about inserting images in web pages. Readings for that subject here.

1. Images in Web pages. [ Image Examples Source ]
   1. The web page refers to the image, which is a separate file.
   2. <img src="http://www.website.org/some/place/here.png" >
   3. The web page specifies a URL.
   4. The browser makes a separate request for the image.
   5. Rules for partial URLs in a link apply to img src also.
   6. Placing images from another site.
      1. Allowed by HTML, but may be prevented by the server.
      2. Probably legal, unless part of a fraud.
      3. Usually rude.
2. Alt attribute:
   <img src="http://www.mc.edu/images/logos/mcclock.gif" alt="MC Logo">
   1. Text description of the image, intended for screen readers and/or browsers which cannot display images.
   2. Will also appear if the image display fails for reason.
   3. Actually required, though I've never seen a browser complain.
   4. What to put?
      1. If the image is decoration, blank.
      2. If there is information in the image, try to summarize it.
      3. For image links, provide a reasonable link text.
3. Width and height attributes.
   1. The img tag has width and height attributes. These are optional, but, if used should be set to the actual physical size of the image.
   2. This allows the browser to reserve space for the image before it is downloaded.
   3. It is possible to display the image at a different size, but that is to be avoided.
   4. If it can't be avoided, it should be done with CSS.
4. Title attribute.
   1. An image may have a title attribute.
   2. This will often be displayed as a mouse-over by the browser.
5. Linking with images.
   1. Simply place an image inside the <a> tag:
      <a href="http://www.gutenberg.org/"> <img src="http://sandbox.mc.edu/~bennet/icons/PG_Button_104x40.gif"></a>
   2. Older browsers would put a blue border on any picture used as a link. You may observe CSS or HTML to turn off for images used as links.
   3. [ Indexed Picture Collection Source ]
      1. Images at the top are undecorated links.
      2. No browser scaling; index copies are reduced and stored as thumbs.
      3. Separate page (and URL) for each large image.
         
         1. The link is actually to the first of 12 pages;
         2. Each small image is a link to another page.
      4. Uses a small style sheet, which, again, we'll get to soon.
         
6. Resources
   1. Images are subject to copyright, and you should only use images for which you have permission. Generally, you should download them and host them on your own server.
   2. You can always make your own: Phone, digital camera, whatever. Or build your own with Photoshop, Paint, or one of the nice free tools Gimp or Inkscape.
   3. The Open Clip Art Library is sort of a clip-art cooperative. They have much content stored in the SVG format, which can be downloaded as raster images (png, jpeg, etc.). Openclipart was down for a long time, and has reappeared.
   4. FreeSVG and PermaClipart are two other sites that mirrored much of OpenClipArt while it was down.
   5. Some sources of free photographs are Pixabay, Unsplash and Image*After.
   6. Many Wikipedia images may be used freely, but but sure to check the one you want to use, since they have various licenses.
   7. The US Park Service has many images which are in the public domain. Again, check the image you are interested in.
   8. The free book Project Gutenberg has some images from scanned books. These can be used freely, though I don't know of any index for images. You probably have to come across it when you were looking for something else.
   9. The Internet Archive has a free image collection, many of which are worth every penny. (The Archive also has free vidoes and other media.)