User:Yunshui/Images for beginners

They say^{(who's "they"?)} that "a picture paints a thousand words". That's about 4880 bytes of server space - equal to a reasonably sized stub! Obviously it's in our interest to have pictures on Wikipedia, but one of the most common problems for new users is that adding images is about the least user-friendly thing you can do here...

Finding images

The first hurdle is actually finding a picture of the thing you want to illustrate. There are two ways to do this.

Wikimedia Commons

Wikipedia has a sister project, Wikimedia Commons, which basically does for pictures what Wikipedia does for information - it stores them and freely licences them for reuse. The majority of Wikipedia's images are drawn from Commons. To find a suitable illustration for your article, go to the Commons mainpage and type the subject you're looking for into the search bar (the interface is almost identical to Wikipedia's). You'll get a list of the pictures Commons has which match the term; scroll through and find one you like.

Your own pictures

If Commons doesn't have a suitable image, you can upload your own pictures. The mechanism for doing so is a bit beyond the scope of this essay, but thankfully both Wikipedia and Commons have File Upload Wizards to talk you through the process. As a rule of thumb, use the Commons Upload Wizard for free files (those you've created yourself or those that are indisputably in the public domain) and the Wikipedia Upload Wizard for files which are not free but can be used under fair-use terms. Once the image is uploaded, it will be available for use on Wikipedia.

A note on copyright

Like the text, Wikipedia's images have to be free. If you do not own the copyright on an image (if you did not take the photograph, draw the diagram, paint the picture and so on) or if you are not sure whether an image is free or not, do not upload it. Please refer to the Image use policy if you are at all uncertain.

Adding a picture to a page

Every picture on Wikipedia or Commons is hosted in what we call the File namespace (pages starting with the prefix "File:"). Once you have uploaded or located the image you want to use, you will need to make a note of the page's name, including the file extension at the end (.jpg, .svg etc.).

To add a picture to a page, place the following code at the point where you want it to appear and replace the italic text appropriately:

[[full pagename of your file, including "File:" prefix and file extension suffix|thumb|alt=description of the image|caption for the image]]

The first part of the code tells the software where to find the picture. |thumb renders the image as a thumbnail (otherwise it would display at full size, which is rarely desirable). The |alt= parameter is a description for visually impaired readers to describe what the picture looks like; it is picked up by text-to-speech readers. Finally, the caption is the text that will appear underneath the image (you can add wikilinks in the caption if you wish). Putting the whole thing in double square brackets tells Wikipedia to create an internal link - which, in the case of the File namespace, displays the picture.

He just loves twanging!

For example, let's suppose I want to place a picture of the happy, grinning twanger at File:Banjo (PSF).jpg into an article. I would add the code [[File:Banjo (PSF).jpg|thumb|alt=A line drawing of a smiling man playing a banjo|He just loves twanging!]]. The result is this →

The top of the picture will be positioned at the point in the text where you place the code; subsequent text (like this paragraph) will automatically wrap around it. If you want to refer to the image in the article's text, therefore, you'll need to place the corresponding text after the image code, not before.

You can add other parameters to govern the placement and size of the image.

Alignment

He's twangtastic!

If you want the image to display on the left (rather than the right, which is the default), add the parameter |left, like this: [[File:Banjo (PSF).jpg|thumb|left|alt=A line drawing of a smiling man playing a banjo|He's twangtastic!]]. You can see the result on - surprisingly enough - the left. |center can be used to place the image in the centre (yes, I'm British) of the page, in which case the text will not wrap around the sides. You can also use the parameter |none to prevent the text from wrapping whilst positioning the image on the left or right.

Size

Still twanging away!

You can specify the width of the image to make it larger or smaller (the height will scale automatically). To do this, add the desired width in pixels as an additional parameter. For example, to make our banjo strumming friend a bit smaller, I can reduce the width to 100 pixels - [[File:Banjo (PSF).jpg|thumb|100px|alt=A line drawing of a smiling man playing a banjo|Still twanging away!]] give us the smaller image on the right.

Galleries

If you have multiple pictures illustrating a topic, you can arrange them in a gallery. Galleries display several thumbnail images togather, allowing readers to get a visual idea of the subject. The rule that Wikipedia is not an indiscriminate collection of information still applies, though - galleries are not just a dumping ground for any old pictures you have lying around.

The easiest way to create a gallery is with the <gallery> tag, which works like any other markup tag. Simply place the images (and associated captions) between two such tags, without square brackets, like this:

<gallery>
File:Banjo (PSF).jpg|Look at his happy face!
File:Banjo (PSF).jpg|He's loving it!
File:Banjo (PSF).jpg|The man's a twanging machine!
File:White Banjo.svg|(you don't have to use the same picture, of course)
</gallery>

This is the result:

• 
  Look at his happy face!
• 
  He's loving it!
• 
  The man's a twanging machine!
• 
  (you don't have to use the same picture, of course)

Related pages

Because the use of pictures on Wikipedia is comparatively complex, there are a large number of pages dealing with the topic. The following are some of the most important:

• Image use policy - the official policy on formatting, copyright, positioning, image content and more.
• Picture tutorial - an extensive guide on how to position and format images.
• Extended image syntax - the complete available wikimarkup syntax for images (not for the faint-hearted...)
• Manual of Style/Images - the style guideline for image use.