Manual:ResourceLoaderImageModule.php

Embedded images
When you reference images in CSS or LESS files, you can specify that ResourceLoader automatically creates inline data URLs for them. See @embed documentation.

You can see this when you request a module that uses, most of them have an   directive in a comment or use the LESS   mixin, which triggers embedding. For example, 'mediawiki.feedback' includes, which in MediaWiki 1.25 specifies an animated GIF for class : If you view its ResourceLoader request you can see that (unless in debug mode) the ResourceLoader transforms this external image URL into an embedded data URL, with the external https URL as a fallback:

Generating icons from SVG files
SVG (Scalable Vector Graphics) files are preferable to raster images because they are resolution-independent. However, browser support for them varies, so you need to provide a raster image as a fallback.

abstracts the implementation of SVG and fallback images. In your module definition (in extension.json or skin.json or the old PHP entry point), you specify at a minimum: ResourceLoader generates a CSS rule for each image that specifies the icon as the  property for a selector and includes a fallback raster image.
 * a set of "name" => "path/to/icon.svg" file mappings
 * , a CSS selector name which includes the placeholder
 * , a CSS selector name which includes the placeholder

For example, the Gather extension's  includes When you request or depend on the  ResourceLoader module, it generates a CSS file that specifies the SVG as the background-image for the selector. In other words the response to https://en.wikipedia.org/w/load.php?modules=ext.gather.menu.icon&only=styles (reformatted for clarity) is: Recent browsers will use the SVG embedded as a data URI, and others will fall back to requesting the rasterized background image, which ResourceLoader generates on the fly by converting the SVG to a PNG.

Identifying different icons
If you need to use a different icon for right-to-left languages,, you can specify different icons in the  key. Instead of a simple name => path/to.svg mapping for each icon name, for each name you provide a  key with different icons for   and. For example (in PHP):

Similarly, if the icon is different for a different icon for different languages (such as 'B' for Bold becomes 'G' in French), you can specify in the  key a default icon and then icons for particular languages. For example (in JSON):

Variants
The MediaWiki theme uses color to convey meaning, for example "destructive" operations appear red, and "progressive" operations that are part of a sequence of steps appear blue. See Intention colors in the Living style guide. Or you may want to define a gray variant, or an inverted white-on-black icon.

Instead of creating a set of nearly-identical icons for each color, ResourceLoader can generate these different icons as variants, as both SVG and raster images, from a single source SVG,

The way you indicate what variants to provide is by specifying a  key and for each variant, give its. Then rather than a simple  key, you specify   which has a   placeholder as well as a   placeholder; you can also provide a   key. creates a CSS rule for each variant of each name, and applies the color of the variant to the SVG. (To do so the  class wraps the SVG with a new group and sets the fill color.)

For example, the MobileFrontend defines (in PHP) the module:

SVG best practices

 * it's worth optimizng SVGs to reduce their size and thus the size of ResourceLoader responses, just as you optimize raster images
 * you can hand-edits SVGs to simplify them and remove extraneous objects
 * Wikimedia uses the SVGO optimizer tool, a sample command line is svgo --pretty --disable=removeXMLProcInst --disable=cleanupIDs --disable=collapseGroups
 * In order for variant color generation to work, the SVG should not set the color explicitly for any shape, otherwise that color won't change.

OOjs UI images
The MediaWiki theme of OOjs UI defines dozens of icons: see icons in the OOjs UI Demos and Iconography in the Living style guide. When clients request OOUI with, it adds ResourceLoader resources such as 'oojs-ui.styles.icons' to the page. Since T92551 it generates the CSS definition of these icons from SVG. To further reduce boilerplate code, it generates sets of icons from JSON files containing the icon information, using a specialized class.

Using OOJs UI images
If you want to use one of these icons in your own code, coming