MarioWiki:Image optimization
Image optimization is a process by which images are processed to shrink their file size. By using a lossless method of optimization, images can be compressed without compromising quality by removing unecessary metadata and (for images that are already lossless, such as PNGs) recompressing them with a more efficient algorithm. Compressing images before uploading them is beneficial because it can (often substantially) reduce load time for users on slow internet connections, potentially reduce server load, and sometimes reduce very large images below 10MB to allow them to be uploaded. We usually focus on optimization in the context of PNG images in particular, but it is possible to optimize other types of images. If possible, it is recommended to losslessly optimize images before uploading them. However, it is discouraged by image use policy to reupload existing images for the sole purpose of optimizing them if no other changes are made.
Color-correction metadata
While most of the metadata removed by optimization is unnecessary and safe to remove, a few images contain metadata that determines how browsers display the colors in the images (see below for details). Images that were originally exported from the Adobe suite or other specialized software (usually artwork and press images) seem to be the most likely to contain color-correction metadata, while emulator screenshots likely do not contain such metadata. Most optimizing utilities (such as PNG Monstrous) remove this data by default, which can be problematic, since MarioWiki policy in most cases requires preserving the content of images as provided by the source. Therefore, if optimization produces a discernible difference in color as a result of removing this metadata, the optimized image should not be uploaded. If you want to optimize images with color-correction metadata, care must be taken to ensure this data is preserved. ImageOptim on macOS should support this option if you disable Strip PNG Metadata and Strip JPG Metadata in Preferences. Otherwise, see below for instructions. If you are unsure how this works, do not optimize images with this type of metadata.
How/why
- For PNGs, images are re-encoded with a slower, but more space-efficient compression process. Lossless compression algorithms tend to decrease in speed as level of compression increases. Usually, typical png encoding libraries such as
libpngfavor creating files with reasonable speed over creating absolutely ideal file sizes. As a result, programs that export images, such as Dolphin, Photoshop, or GIMP, can export PNGs within only a few seconds even for large images, but with larger file sizes than ideal. Compressors re-encode the PNGs with a very slow, but more space-efficient algorithm. - Images are often saved with unnecessary metadata, such as Exif chunks with details about camera specifications. Since this information is usually not critical to displaying the image, optimizers can remove this data.
List of image optimization utilities
Unfortunately, many of the existing GUI image optimization utilities, with the exception of ImageOptim, are very outdated. The tools either don't offer functionality to preserve color-changing metadata or don't offer zopflipng, the newest and most efficient optimization backend for PNGs. Tools that don't allow for preservation of color metadata are unsuitable for use on images that contain this data.
| Tool | OSes supported | Formats supported | Can preserve color metadata | Supports zopflipng |
|---|---|---|---|---|
| PNG Monstrous | Windows* | PNG | 
|
|
| ImageOptim | macOS | PNG, JPG, GIF, SVG |
|
|
| Trimage | Linux | PNG, JPG |
|
|
Running pngout, zopflipng, and/or jpegoptim from the command line
|
Windows, Mac, Linux | PNG, JPG |
|
|
* runs on macOS/Linux with WINE
PNG chunks
PNGs can contain four ancillary chunks with colorspace information[1], which may affect the way software displays the colors in an image:
- gAMA - determines color intensity
- cHRM - determines color chromaticity
- sRGB - colorspace rendering intent data (often serves the same purpose as gAMA + cHRM)
- iCCP - colorspace data (often serves the same purpose as gAMA + cHRM)
While most images do not contain this metadata, when they are present, these chunks should be preserved to ensure that browsers display the image's colors as intended.
Other notable chunks:
- tRNS - (preserved by default in
zopflipng) - stores transparency data when a full alpha channel is not needed. Removing it shouldn't affect image quality, but doing so can actually make an image larger. Note that bothpngoutandzopflipngwill automatically preserve the original image if the new image is larger. - pHYS - defines non-standard pixel sizes/aspect ratios (rare)
- sBIT - sample bit depth, generally only needed for editing in special cases ("allows decoders to recover the original data losslessly even if the data had a sample depth not directly supported by PNG"[1]). Per
man zopflipng, "it is advised to not keep sBIT for web images because web browsers do not use [this chunk]"
How to safely optimize images that contain color-correction metadata
It is possible to keep certain metadata, such as the gamma chunk or embedded ICC profiles, while still optimizing the image. ImageOptim on macOS should support this option if you disable Strip PNG Metadata and Strip JPG Metadata in Preferences. Otherwise (for Windows and Linux), If you are familiar with the command line and willing to use it, you can do this by manually running the actual PNG optimizer from the command line and passing the appropriate options. For the best compression, run pngout then zopflipng, but running only zopflipng should provide sufficient results in most cases. After optimizing, please verify that the colors of the new image remain the same.
Installing the command-line tools
- Linux: Install
zopfli,pngout, and/orjpegoptimwith your package manager. - Windows:
Zopflipng
Example command to preserve important chunks:
zopflipng --keepchunks=iCCP,gAMA,cHRM,sRGB input.png output.png
See this page for further explanation.
pngout
Example command to preserve important chunks:
pngout -kiCCP,gAMA,cHRM,sRGB input.png output.png
jpegoptim
Lossless, and preserves important chunks by default:
jpegoptim image.jpg
