Support wiki

This is the wiki.gg support wiki! It's a different site from your content wiki!

Images

From Support Wiki
Jump to navigation Jump to search

This page goes into the basics of images on wiki.gg.

Images work a little bit differently than regular content. They need to be uploaded through a special page or through utilities in both the source and visual editors.

Images are stored in the "File:" namespace.

Supported image file formats

  • .jpg or .jpeg – bitmap image compressed in the standard JPEG format (this lossy format is most suitable for photographs).
  • .png – bitmap image in the Portable Network Graphics format (specified by the W3 Consortium).
  • .gif – bitmap image in the legacy Graphics Interchange Format (often used for animations, since MediaWiki does not support APNG or animated WebP files).
  • .webpWebP supports both lossy and lossless compression while reducing file size by up to 45%.
  • .svgScalable Vector Graphics

Adding an image

The basic syntax is similar to links.

[[File:Filename.extension]]

The full syntax is as follows:

[[File:Filename.extension|format|size|horizontal alignment|vertical alignment|link=|alt=|class=|caption]]

Options

Format
Controls how the rendered image is formatted and embedded in the rest of the page.
Accepted values: border and/or frameless, frame, thumb
Size
Controls the size of the image.
Formats:
{width}px
x{height}px
{width}x{height}px
Horizontal alignment
Controls the horizontal alignment (and inline/block or floating styles) of the image within a text (no default value).
Accepted values: left, right, center, none
Vertical alignment
Controls the vertical alignment of a non-floating inline image with the text before or after the image, and in the same block (the default vertical alignment is middle).
Accepted values: baseline, sub, super, top, text-top, middle, bottom, text-bottom
Link
By default, images link to their file page; however, by using |link=, you can either link it to another page or remove the link altogether.
This example uses the file Example and links to a page called Example (as opposed to File:Example.png):
[[File:Example.png|link=Example]]
This example won't have a link:
[[File:Example.png|link=]]
Alt
Adds alternative text in case of inability to view the image (internet outage, bad file name, using a screen reader)
[[File:Example.png|alt=Image of example on Support Wiki]]
Class
Allows to specify additional classes for CSS customization.
[[File:Example.png|class=mainpage-image]]
Caption
If a parameter does not match any of the other possibilities, it is assumed to be the caption text.

Advanced