This is an example of an image which is too large and busy to display properly as an infoicon (see File:Unity Large.png).
Creating and modifying sprite sheets
What are sprite sheets?
Sprite sheets are composite images consisting of multiple small files such as icons. The use of CSS and sprite sheets allows for many of these images to be displayed while only requesting a single file from the wiki's server. This allows for improved browser-side caching across the entire wiki and prevent images from "popping in" as they load individually, bettering the user experience. Additionally, they drastically reduce uncached (e.g., first visit) load times of pages that make use of a large number of these assets, such as the main page: Official Captain of Industry Wiki.
Who can create them?
Any user can prepare the sprite sheet image and CSS file.
When a large number of icons have been added to the game or updated. The performance benefits of sprite sheets are generally not realized with only a small amount of icons on a sheet. Thus, the recommended minimum number of new icons or updated icons is no fewer than five. Individual icon files can still be called with the new parameter (see Usage section above).
When should an existing sprite sheet be updated?
Almost never. Mediawiki's file engine sorts and stores files into dynamically-balanced subdirectories. When a new version of a file is uploaded, it will almost always be placed into a new file directory. This action is seamless when images are called through the traditional [[File:Filename.png|size|thumb|right]] syntax, however it breaks all existing references to previous file version which this template relies on. In a nutshell, advanced editors with an understanding of the application of these concepts can indeed update sprite sheets, however doing so without interrupting the live user experience requires careful timing and a perfect edit, thus it is not recommended.
If we shouldn't update existing sprite sheets, then how do we add more?
Each CSS class references the sprite sheet image used so there is effectively no upper limit to the number of new sprite sheets that can be added. In other words: just add another sprite sheet.
If we shouldn't update existing sprite sheets, then how do we update icons that the developers changed?
CSS obeys precedence. Subsequent declarations of the same class name overwrite precious declarations. So long as your CSS is added to the sitewide stylesheets below the old version, it will be what applies.
Webdev nerd note: Explanations of the !important property and specificity rule have been purposely omitted above for the sake of simplicity and applicability to the average wiki editor.
How are they created?
Resize the source image files to the desired size for use, such as 16x16 pixels.
The recommended method is to use the free GIMP editor, though most any modern raster image editing software is likely suitable.
Batch processing tools such as the free GIMP plugin BIMP can greatly expedite this process.
If your image editor provides the option, bicubic sampling generally provides the best result.
Be careful not to accidentally remove background transparency when saving.
Use a sprite generation tool to merge the images into a single file and generate the CSS stylesheet.
Hover the "Original File" link on the file's page and note the URL displayed in the browser after https://wiki.captain-of-industry/. In the case of Sprites-Items-16.png, this is images/1/1f/Sprites-Items-16.png
Replace all instance of css_sprites.png in the previously-generated CSS text file with this filename.