Academic Kids:Preparing images for upload
|
|
When uploading image files to Wikipedia sensible choices are important to keep download times down. However it should also be noted that space on the images server is not at a premium and we should not throw information away.
This page provides tips for preparing your images to keep the size of the final images seen by the user down without throwing away quality.
The first and most important thing to consider is the format. Whilst some formats offer multiple compression systems, in general the format and the compression system are tied together. The basic choices are PNG, for diagrams, and JPEG, for photographs.
Uncompressed formats such as BMP should be avoided due to their huge file size, while GIF and TIFF formats should generally be avoided where possible for various reasons which are beyond the scope of this document. GIF should be converted to PNG and TIFF should most often be converted to JPEG.
| Contents |
Diagrams
You should use PNG (Portable Network Graphics). The PNG compression algorithm is designed to work with large areas of solid colour that have sharp boundaries. It is therefore a good format for diagrams and cartoons. But it does not automatically give you the smallest possible file size. There are some things that need to be done by hand.
There is a myth among many web designers that PNGs are larger than GIFs. This myth stems from two facts:
- Many people ignorantly compare 24 bit PNG with 8 bit GIF.
- Photoshop is (or at least was, it has apparently improved lately) known for being poor at creating PNG files. ( http://www.livejournal.com/users/digitalwaffle/ )
Does the diagram contain a title within it? If so, consider whether it would be better to remove the title and add a caption to the image instead. Plain text:
- Takes up less space than the equivalent text in an image;
- Can easily be changed;
- Scales up into larger or smaller font sizes;
- Can be searched;
- Can also be translated into other languages so that the same diagram can be used in other Wikipedias.
| Missing image Smiley_face_with_no_title.png Image:Smiley face with no title.png |
| A title as a caption under the image | |
|---|---|
| Image with title 1248 bytes | Image without title 854 bytes (+74 bytes caption) |
Does the number of colours fit in the number of bits per pixel? Diagrams usually have a limited number of colours. If there are 4 different colours, there is no need to use a 24 bit truecolour format that is capable of distinguishing 16 million colours.
The lower colour depth versions of PNG stores colours in a palette. Palleted images can have a bit depth of 1, 2, 4, or 8 bit (2, 4, 16, or 256 colour). In general, you should use the lowest bit depth that can handle all colours in your image (though it should be noted that some editors can't create 2 bit colour images).
If you are converting an image with many colours (perhaps because somebody saved the original as a JPEG, avoid this) to a PNG, you may want to reduce the number of colours at the same time; see Wikipedia:How to reduce colors for saving a JPEG as PNG.
| 
| 
|
| 1-bit colour No anti-aliasing 180 bytes | 4-bit colour Anti-aliased 309 bytes | Enlarged view of anti-aliased image |
|---|
If your image is anti aliased you may be using more colours than you suspect, because anti-aliasing smoothes jagged edges by adding shades of grey where once there was black or white. Anti-aliased black-and-white images usually need to be saved as 16-colour or 256-colour images instead. See the illustration at the right.
Why you should not save diagrams as JPEG
Smiley_face_example_true_C_.jpg
Image showing lossy JPEG compression
Another drawback is the large file size you will end up with. JPEG compression has many options but most commonly only two colour spaces, 24-bit RGB (8 bits per sample) and 8-bit greyscale, are used. Most importantly, JPEG by its very nature cannot support indexed colour. In the example on the right a 4-colour image is inflated by using an inappropriate colour schema, which results in the rather large file size.
If you don't have an original file, but only have a JPEG that really should be a PNG, you should not simply save the JPEG as PNG because this will result in an even larger file size. There is a nice tutorial at Wikipedia:How to reduce colors for saving a JPEG as PNG.
For Photographs
As stated above JPEG (Joint Photographic Experts Group) was developed with photographic images in mind. Although the JPEG algorithms are quite good, there are a couple of tips that will help to get the smallest file size possible without sacrificing quality:
- When saving a JPEG the graphics program will let you choose the compression level. Usually the values range from 0 to 100 where 100 is the best quality possible with very little compression applied (some apps, most notably Paint Shop Pro have this scale in reverse with 0 as highest quality and 100 as the lowest quality). Since most JPEGs in Wikipedia will be rescaled anyway before placing on pages, a quality setting of 95 is appropriate.
- JPEG compression works better on slightly blurred images, so don't sharpen the images too much as it will result in a higher footprint.
- If the image is of bad quality (for example: already has visible artifacts) reduce its size and smooth slightly to regain at least some of its original glory.
- Always work from the original image and not from the already saved JPEG file, as quality gradually decreases the more you save it. For this reason it may be an idea to keep the main copy here in a lossless format like PNG. However, as of right now scaled versions are forced to be in the same format as the original image and having two copies of the image is a maintenance nightmare.
- JPEG files can be losslessly compressed, with
jpegtran -optimize. Jpegtran is part of libjpeg.
PNG tips
Images which are not photographs, such as diagrams and screen captures of applications or older video games, do not use a large colour palette. If it makes sense, save the image in indexed mode. A truecolour PNG can often be converted to indexed mode without changing the look of the image, while saving on file size. (See color depth for information on indexed mode and truecolour.)
It is normal for image editing programs to produce poor PNG compression, even when run with their maximum compression choices. As a result there are a variety of tools to compress PNGs without any loss of quality. However if the image will be scaled by Mediawiki before viewing then these steps are pointless. Some such tools and information on using them is shown below.
- Pngrewrite (http://entropymine.com/jason/pngrewrite/)
- Pngcrush
- Optipng (http://www.cs.toronto.edu/~cosmin/pngtech/optipng/)
- Pngout (http://advsys.net/ken/utils.htm) (Linux port (http://jonof.edgenetwork.org/pngout/))
- AdvPNG, part of the AdvanceCOMP GPL'ed compilation
- Super PNG (http://www.fnordware.com/superpng/) a freeware Photoshop plugin with better compression than the native Photoshop.
Optipng (OSF-compatible Open Source, zlib/libpng license, free of change) is generally better than (http://ourworld.compuserve.com/homepages/jamesday/pngcompression/index.htm) pngcrush and usually significantly faster. Pngout can be used after optipng to further improve the results, but pngout is comparatively slow and requires many trials, notably with different buffer settings, to get the smallest result.
For quick compression use optipng -o7 (228 trials) or the faster run with no options at all. For usually better results, but significantly slower, use -zc1-9 -zm1-9 -zs0-2 -f0-5 (1026 trials).
If smallest results are desired and time is not important, a chain of this sort produces the smallest possible results:
- Pngrewrite (very fast and does some optimisations optipng doesn't do)
- Optipng -zc1-9 -zm1-9 -zs0-2 -f0-5
- Either AdvPNG (copyleft, GPL, free of charge) or pngout (free of charge). Each of these utilities uses a different, more sophisticated "deflate" compression method variant on the PNG and generally produces a smaller file when run after the other tools. If the smallest result matters, try both to see which produces the best result.
- The AdvPNG way: advpng -z4
- The Pngout way: Pngout, placing the results in different directories and keeping the smallest. A test set should include all of the /f0 through /f5 choices and a range of /b choices for each, including at least b0, b128 and b1024. Some sites inaccurately suggest that the /b option makes little difference. It's really very important when used in a chain like this. /f0 /b0 or /f0 /b1024 frequently give excellent results for line art such as that commonly used in the encyclopedias and are good first choices, though tests with a range of /b values will regularly produce further reductions of a fraction of a percent.
After any compression the image should be compared to the original. It's occasionally the case that quirks in the original cause transparency to be lost even in compression which is intended to be lossless. This commonly, but not always, shows up as a change in the background colour which is obviously visible at a glance.
Note also that these chains, particularly the pngrewrite step, will discard non-image blocks, often including copyright or creator details. Check the pngrewrite and other program options if you want to preserve this information.
See also
This tutorial comes about after a discussion on Image:Covalent.png talk page.fi:Wikipedia:Kuvien tiedostokoon pienentäminen
