Summary
This page describes in detail how I copy an image from Wikimedia Commons onto an essay on one of my websites. Some of the instructions here are specific to how I like to format images and don't apply to everyone.
Contents
Introduction
I try to have at least one image on most of my website pages so that if those pages are shared, Facebook will display a preview image, which makes the link more visible and appealing.
Where to get images
I try to use mostly Creative Commons, GNU, or public-domain images unless inclusion of a copyrighted image seems to constitute fair use. One exception is that I also tend to include screenshots from academic papers without permission, because doing so is much more valuable to readers than asking readers to go find the information in the original publications.
I've found that the easiest way to get good variety of free images is to search Wikimedia Commons, which I do using a Google Image search for {keyword site:wikimedia.org}, e.g., this search for "stars". Alternatively, in Google Image Search, you can click "Search tools" -> "Usage rights" and then pick a category.
In the rest of this piece, I'll assume I got an image from Wikimedia Commons, but similar instructions could be followed for other images.
Copying image HTML
Suppose the image you want to use is this one. Near the top of that page is text to the right of a globe icon saying "Use this file".
Once you click that, you get the following in the "HTML/BBCode" box at the bottom:
<a title="By Editor5807 (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY 3.0 (http://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ACattle_grazing_off_National_Cycle_Route_23_near_Newchurch.JPG"><img width="512" alt="Cattle grazing off National Cycle Route 23 near Newchurch" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Cattle_grazing_off_National_Cycle_Route_23_near_Newchurch.JPG/512px-Cattle_grazing_off_National_Cycle_Route_23_near_Newchurch.JPG"/>
Copying the image file to your site
I think Wikimedia doesn't want your img src to point to the image on their site, because then their server gets hit whenever your page gets loaded. Plus, having the image on your own site avoids the risk that the Wikimedia image gets moved or removed. So download the Wikimedia image and re-upload it to your server. Wikimedia offers different image resolutions; I typically use something in the ballpark of 640 x 480 pixels because this is a big enough resolution to not look grainy but a small enough resolution to load fairly quickly.
Once you've uploaded the image to your site, it'll be accessible at some url, such as http://reducing-suffering.org/wp-content/uploads/2016/03/640px-Cattle_grazing_off_National_Cycle_Route_23_near_Newchurch.jpg .
Editing image HTML
Back in the HTML code for the image, replace the Wikimedia image file with the one on your site:
<a title="By Editor5807 (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY 3.0 (http://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ACattle_grazing_off_National_Cycle_Route_23_near_Newchurch.JPG"><img width="512" alt="Cattle grazing off National Cycle Route 23 near Newchurch" src="http://reducing-suffering.org/wp-content/uploads/2016/03/640px-Cattle_grazing_off_National_Cycle_Route_23_near_Newchurch.jpg"/>
Check that the author, alt description, etc. are correct based on what the Wikimedia page says.
I also personally like to quote the photo caption from the Wikimedia page, like this:
<a title="'Cattle, seen grazing off the National Cycle Route 23 path, near Newchurch, Isle of Wight, in July 2011.' By Editor5807 (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY 3.0 (http://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ACattle_grazing_off_National_Cycle_Route_23_near_Newchurch.JPG"><img width="512" alt="Cattle grazing off National Cycle Route 23 near Newchurch" src="https://reducing-suffering.org/wp-content/uploads/2016/03/640px-Cattle_grazing_off_National_Cycle_Route_23_near_Newchurch.jpg"/>
Finally, I prefer to make the width a percentage of the page width, and I add align="right" or align="left" to the img tag:
<a title="'Cattle, seen grazing off the National Cycle Route 23 path, near Newchurch, Isle of Wight, in July 2011.' By Editor5807 (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY 3.0 (http://creativecommons.org/licenses/by/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ACattle_grazing_off_National_Cycle_Route_23_near_Newchurch.JPG"><img width="40%" align="right" alt="Cattle grazing off National Cycle Route 23 near Newchurch" src="https://reducing-suffering.org/wp-content/uploads/2016/03/640px-Cattle_grazing_off_National_Cycle_Route_23_near_Newchurch.jpg"/>
Then I add this HTML to my web page and make sure it looks ok.
Facebook preview
Even after your page has an image, Facebook may be slow to grab the image and make it available when a link is shared. To force Facebook to scrape the image, visit the Open Graph Object Debugger, enter your url, click "Debug" and fetch scrape information, perhaps 2-3 times, until you see the image preview in the section "Link Preview".