Adding images helps improve the quality of any given article, providing additional details and illustrating the subject - after all, a picture speaks a thousand words! It can also improve a wiki's search engine ranking.

The process of adding images to an article is very similar to adding videos. You can brush up on our video embed tool to complete your mastery of the tools of a wiki illustrator.

Requirements for adding images

Both anonymous and registered users can add images to an article in source text editing mode. In visual editors, only registered users can.

Images must exist on the wiki. If they are not available, then they need to be uploaded first. Trying to add a non-existent image will only create a red link to a file page.

Only registered, logged-in users can upload files. See this page for details on uploading files.

How to add an image in VisualEditor

When you're editing with the VisualEditor, the process of adding an image to a page is through the top bar of the editor. See this help page.

Remember: Only logged-in users can upload and edit images through the wiki's Visual Editor.

• After logging in, click the Edit or VisualEditor button on the page you want to add images to.
• Once you're in Visual Editing mode, click on the Media button located on the top bar. This will open the Media Settings dialogue, where you can search for existing files according to their filenames or upload your own.
• Once you have the image you want to add, click on it. The dialogue will expand the image and give you a little more information on it. Click use this image to continue.
• The next dialogue allows you to customize how the image will appear on the page by adding a caption or alternative text (General tab) and deciding on its size, alignment, and appearance (Advanced tab).
• Once finished, click Insert and then Save the page to commit your changes.

You can also edit images already present on the page by clicking on them and selecting the Edit button, which will open the same customization dialogue.

How to add an image in source editing mode

Source editing maintains the option of adding and customizing images through the top bar, like in the Visual Editor. But as its interface is fundamentally different from visual editors, you can skip the above process and directly add and edit with the underlying wikitext. The image follows a specific format, enclosed in square brackets like a regular link.

[[File:Wiki.png|220px|center|thumb|link=Help:Adding images|alt=alt text|class=html-class|Some caption]]

• Every image on the page starts with File: followed by the exact name of the uploaded file. It is case-sensitive: Wiki.png and WIKI.png are considered different files.
  • Legacy syntax Image: still works, but should not be used anymore.
• If only the link is specified, the image will be added as is: At its original size and inline. To customize its appearance, you can add arguments, separated by the vertical bar or pipe symbol, |. These are:
  • Size, specified in pixels. For example, 220px will display the image at 220 pixels of width, while 120px will display it at 120 pixels of width. Instead of the width, the height can be specified by prepending an "x" to the value: x120px. The second value is always auto-calculated.
  • Alignment on the page. left and right will align the image to the left and right respectively, with text flowing around the image. center will align it to the middle of the page with no text flow around it.
  • Appearance. Adding thumb will cause the image to display as a thumbnail at a default width if it's not specified otherwise, with the description displayed beneath. You can also choose border to display the image with a border around it.
  • Link will cause the image to open a specific page, rather than its file description. It is always preceded by link=. The option can also be used to bypass the image lightbox and display an image with no link to the description page. This can be done by adding the option to the syntax and filling it with an empty value (not even a space).
  • Alternative text, specified with alt=, which will display if an image does not load. This text is also used by search engines and screen readers, so it's best to specify a descriptive alt text for every image. See Accessibility considerations below.
  • HTML class, specified by class=, defines classes of the generated <img/> element. For instance, class=foo__bar baz will add class="foo__bar baz" to the generated image element. These classes can be useful when customizing the appearance of the image(s) through the CSS pages.
    Note that the class(es) are not wrapped into quotation marks.
  • Description, which will display below the image if it's specified to appear as a thumbnail or on mouseover. Any text that is not recognized by the wiki as an argument will be interpreted as a description.

The wiki software does not require the arguments to be added in any specific order, although it's considered good practice to use a consistent pattern. For more details on adding images via wikitext, see the image formatting section here. For linking to image description pages, see this page.

How to view images at a higher resolution

When placed on the page, images are typically presented at a much smaller resolution. You can inspect them by going to the file page or by opening them in the lightbox.

The lightbox opens by default when clicking on the image, with the link to the file description page displayed at the top of the lightbox.

Accessibility considerations

In order for viewers with visual impairments to be able to access images on a page, alternative text (better known as alt text) is important to add to many images you upload. Alt text refers to a brief description you give an image - this does not show up visibly. This has a couple of benefits:

• Screen reader accessibility - the alt text is read aloud by screen readers, describing the image and how it relates to the context surrounding it. Read more about screen readers, including how they work, and ones you can try for yourself.
• SEO - Search engines like Google crawl for alt text, which helps rank wiki images and content in search results.

There are two types of images: informative and decorative. Informative images help the reader understand the page - they need alt text. Decorative images do not add important information to the page, so do not need alt text. If you're unsure which type an image is, try reading the page out loud. If you need to explain an image to understand the page, that image is probably informative and needs alt text. Otherwise, check out this decision tree to work out which images need alt text.

Effective alt text includes:

• A description of the image, such as the subjects, setting, and actions
• No more than 1 to 2 sentences
• No need to say "image of", but you should indicate if it is a poster or logo for example
• Focus on important elements, rather than describing everything in detail

For example, for poster on the right, alt text could read:

[[File:Hamilton poster.jpg|thumb|right|200px|link=w:c:hamiltonmusical:Hamilton|alt=The Hamilton poster has a gold background, featuring a silhouetted man acting as the top point on a black 5 pointed star. The white "Hamilton" logo sits across the middle of the star.|'''[[w:c:hamiltonmusical:Hamilton|Hamilton]]''']]

If you wanted to include no alt text and mark the image as decorative, you should blank the alt attribute as below. This will cause the screen reader to skip that image.

[[File:Hamilton poster.jpg|thumb|right|200px|link=w:c:hamiltonmusical:Hamilton|alt=|'''[[w:c:hamiltonmusical:Hamilton|Hamilton]]''']]

Read more about what web accessibility is and why it is important.

See also

• Help:Images on MediaWiki (covering more image formatting options)
• Using wikitext with your images
• Uploading files in detail
• Using images from linked communities

Further help and feedback

• Browse and search other help pages at Help:Contents
• Check Fandom Community Central for sources of further help and support
• Check Contacting Fandom for how to report any errors or unclear steps in this article