Help:Images

This page explains how to upload an image to the PZwiki as well as the image syntax when editing the PZwiki.

Images that are stored on the PZwiki server have the File: namespace prefix as the target of a link.

Supported media types for images

The following file formats are supported on the PZwiki:

.webp: WebP is a newer image format developed by Google, which supported by modern browsers and offers better compression, especially for lossless images. Support lossy compression as well, although the newest JPEG compression techniques offer better result. It is being evaluated as a replacement for PNGs on the wiki. While it supports animation with alpha transparency, they don't work on PZwiki currently.
.png or .apng: image in the PNG format, including animated PNGs. This is currently the preferred format for all the Project Zomboid graphics, including screenshots and animations, which unlike GIF support alpha transparency in animation.
.gif: image in the legacy Graphics Interchange Format, mainly used for older animations that were not converted to animated PNG.
.jpg or .jpeg: image compressed in the standard JPEG format. This lossy format is most suitable for photographs, where newer techniques allow achieving great compression with minimal loss if a high-quality source is available.
.webm so far the only video format enabled for uploading small videos. Not used for anything currently.

Upload for other file extensions is currently disabled.

While PZmap uses lossy WebP to serve the images, the screenshots from it are best saved losslessly to avoid further quality loss.

All the image formats ideally should be saved with maximum lossless compression so they are smaller and load on pages faster, which is often a choice when saving images such as PNG or WebP. To achieve even higher compressions, see advanced compression techniques section below for advanced techniques.

Uploading a file

Uploading a new file can be done using the "Upload file" link in the sidebar under "Tools". Alternatively, following a red broken link or typing the link directly into the URL address bar will present the upload file page with the destination filename already filled out.

Before uploading any file, the images category should be checked first in case the desired image has already been uploaded by another user.

The images are also cached on the server using Cloudflare, so when overriding existing images, old versions can be served for some time (often to a several hours.)

Upload file page

On the upload file page, there are 2 fields that must be filled out, while the others may be left as they are.

Source file

Clicking the "Choose file"/"Browse…" button, next to the "Source file" will allow you to locate the file on your computer, which will be uploaded to the wiki.

Be sure that the file type is one of the suppоrted media types and doesn't exceed the file size limit of 32 MB.

File description

The "Destination filename:" field is the link to reach the file and its file description page, excluding the File: prefix. This will already be filled out if a link has been followed directly. This should be changed to something descriptive and unique to the file itself.

Refer to the style guide for the most up-to-date wiki standards when it comes to the right name.

A few example filenames are below:

Image	Destination filename
	PlushSpiffo.png
	Container_Oven.png
	Poster.jpg
	IndustrialFridge_Large.gif

The "Summary:" is an optional field, which, as the title suggests, should be used to give a summary of the file being uploaded. Anything written in the summary field will also be displayed on the file description page, therefore including a category in the summary, will include the image/page in that category. Adding the new images to a proper category may help other users to find and use your image.

The "Licensing:" field is currently left blank, however if any special licensing is applicable to an uploaded file, then any details should be included within the file description page or in the summary field.

Upload options

The "Watch this file" checkbox is ticked by default, leaving this will add the file to the user's watchlist.

Ticking the "Ignore any warnings" checkbox will skip any warnings from being displayed upon uploading the file. This is rarely used by regular users and should be left unchecked.

Rendering a single image

Syntax

The full syntax for displaying an image is:

[[File:Filename.extension|options|caption]]

where options can be zero or more of the following, separated by pipes |:

Format option: one of border and/or frameless, frame, thumb (or thumbnail).
- Controls how the rendered image is formatted and embedded in the rest of the page.
Resizing option: one of:
- {width}px — Resizes the image to fit within the given maximum width in pixels, without restricting its height.
- x{height}px — Resizes the image to fit within the given maximum height in pixels, without restricting its width.
- {width}x{height}px — Resizes the image to fit within the given width and height in pixels.
- upright — Resizes an image to fit within reasonable dimensions, according to user preferences (suitable for images whose height is larger than width).

Note that the image will always retain its aspect ratio, and can only be reduced (not increased) in size unless it's in a scalable media type (bitmap images cannot be scaled up).

The default maximum size depends on the format and the internal image dimensions (according to its media type).

Horizontal alignment option: one of left, right, center, none.
- Controls the horizontal alignment (and inline/block or floating styles) of the image within a text (no default value).
Vertical alignment option: one of baseline, sub, super, top, text-top, middle, bottom, text-bottom.
- 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).
Link option: one of:
- link={target} — allows to change the target (to an arbitrary page title, or URL) of the generated link, activatable on the rendered image surface; e.g., [[File:Image.png|20px|link=https://projectzomboid.com/]] renders as (external link), or [[File:Image.png|20px|link=Main Page]] renders as (internal link).
- link= (with an empty value) — displays an image without any activatable link; e.g., [[File:Image.png|20px|link=]] renders as .
  - If you set |link=| (empty), then no title will be rendered.

By default an image links to its file description page. The "link=" option modifies this behavior to link to another page or website, or to turn off the image's linking behavior.

Format

The most common formats used within the PZwiki are the frame and thumb or thumbnail formats, as these are rendered as floating blocks, allowing text to wrap around them, along with the possibility of a caption.

Description	You type	You get
frame Rendered as a floating block: yes Rendered inline: no Rendered caption: yes	... text text text [[File:Image.png\|frame\|caption]] text text text ...	... text text text caption text text text ...
thumb or thumbnail Rendered as a floating block: yes Rendered inline: no Rendered caption: yes	... text text text [[File:Image.png\|thumb\|caption]] text text text ...	... text text text caption text text text ...

When the height of an image in thumbnail is bigger than its width (i.e., in portrait orientation rather than landscape) and you find it too large, you may try the option upright=N, where N is the image's aspect ratio (its width divided by its height, defaulting to 0.75). The alternative is to specify the desired maximum height (in pixels) explicitly.

Note that by writing thumb={filename}, you can use a different image for the thumbnail.

Link to an image

Add : as a prefix to the link you need to create.

[[:File:Image.png]]

File:Image.png

[[:File:Image.png|Description]]

Description

Row of images that will wrap to browser width

One way that works for a row of images with varying widths is not to use "thumb" or "left" or "none". If "thumb" is not used (and thus no captions) a row of images will wrap to the browser width. If necessary, narrow the browser window to see the images wrap to the next row.

[[File:Image.png|220px]]
[[File:Image.png|100px]]
[[File:Image.png|150px]]
[[File:Image.png|250px]]
[[File:Image.png|200px]]
[[File:Image.png|50px]]
[[File:Image.png|220px]]
[[File:Image.png|175px]]

To wrap images of varying widths with captions it is necessary to use div HTML for an unordered list. Along with style="display: inline-block;".

<div><ul>
<li style="display: inline-block;">[[File:Image.png|thumb|none|220px|Caption 1]]</li>
<li style="display: inline-block;">[[File:Image.png|thumb|none|100px|Caption 2]]</li>
<li style="display: inline-block;">[[File:Image.png|thumb|none|150px|Caption 3]]</li>
<li style="display: inline-block;">[[File:Image.png|thumb|none|250px|Caption 4]]</li>
<li style="display: inline-block;">[[File:Image.png|thumb|none|200px|Caption 5]]</li>
<li style="display: inline-block;">[[File:Image.png|thumb|none|50px|Caption 6]]</li>
<li style="display: inline-block;">[[File:Image.png|thumb|none|220px|Caption 7]]</li>
<li style="display: inline-block;">[[File:Image.png|thumb|none|175px|Caption 8]]</li>
</ul></div>

Caption 1
Caption 2
Caption 3
Caption 4
Caption 5
Caption 6
Caption 7
Caption 8

Advanced compression techniques

Over the time, newer, often really slow command line tools that allow to compress images with higher compression that GUI program expose, allowing to compress images with various time-consuming techniques that can make images a little smaller. This is especially the case with the PNG format, but here is the list of other effective compression tools.

Keep in mind, however, that if the image is served in a non-native format, MediaWiki handles scaling, which is done by a scaler such as ImageMagick installed on the server.

GIF

GIF is the oldest image format still used on the web and supported by even the most ancient browsers. However, it is very ineffective and, without tricks, can't have more than 256 colors. Gifsicle can be used to optimize GIFs, but the format is being phased out by animated PNGs and WebPs on PZwiki which often more features and smaller file sizes.

JPEG

JPEG is the second-oldest image format, but is always lossy compressed, so it's not suitable for pixelated icons due to artifacts it introduces. It is also supported by even the oldest browsers, unless saved with arithmetic coding.

However, its compression is good and boosted even further when saved with Google's jpegli library, beating WebP and AVIF.

PNG

PNG is an old enough format that should be supported by even the most obscure and old browsers now, except the most ancient ones from 1990s and early 2000s. However, the alpha transparency and animated PNGs (APNG) had trouble in some edge cases. PNG is lossless and, unlike GIF, can serve more than 256 colors without using any tricks.

It is also a native format used by Project Zomboid to store images (icons and UI elements), so it's easier to upload.

However, being an old format, it uses an old compression technique which is surpassed by newer formats, but being really popular for a long time, various compression algorithms were developed to reduce the size, most notably by Google's zopfli.

One of the newer tools using zopfli internally as well as additional techniques allowing to save a few bytes on the result is ect. However, using zopfli with really high iterations count and other potentially byte-saving tricks may still result in a slightly smaller file.

ect -9999 -strip --allfilters-b --pal_sort=120 image.png

To optimize animations, apngopt can be used:

apngopt -z2 -i10000 "animation.png"

WebP

WebP is a newer image format dedicated to replacing both lossless and lossy formats that should be supported by most browsers now. It outperforms PNGs for lossless images, but it's worse than JPEG for lossy images with the newest compression techniques.

cwebp -lossless -q 100 -alpha_q 100 -m 6 -z 9 -mt -progress image.png -o image.webp

AVIF

AVIF is a new format that caught adoption in browsers, but it offers only slight gains over JPEG for lossy images and no benefit over WebP for lossless images.

Lossless (not recommended, PNG and WebP outperforms it)

avifenc -l -q 100 --qalpha 100 -s 0 -j all image.png image.avif

JPEG XL

JPEG XL is a format that offers better compression in both lossless and lossy formats. Its lossless compression is based on FLIF. However, it isn't supported by most of the browsers yet.

To get most compression, -e 10 can be used. --keep_invisible=0 discards transparent color information, but further saves few bytes on color that's invisible.

Lossless:

cjxl image.png image.jxl -e 10 -d 0.0 -a 0.0 --keep_invisible=0

List of files in the wiki

External links