Wikipedia:How to keep image file sizes as small as possible

This tutorial comes about after a discussion on :Image:Covalent.png talk page.

When uploading image files to Wikipedia it is important that the file sizes be as small as possible. This facilitates faster downloading and also saves space on the server. But how can you ensure that the image really is as small as can be? The first thing to consider is the format. Let's assume that you have a diagram drawn by yourself using some kind of vector graphics editor, or a .bmp file. This way you have a free choice on what compression you can use. The basic choices are PNG or JPEG

Table of contents showTocToggle("show","hide") 1 For Diagrams 2 Why you should not save diagrams as JPEG 3 For Photographs 4 See also

For Diagrams

You should use PNG (Portable Network Graphics). This 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 manually.

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 like this.

• Plain text (see ascii) takes up less space than the equivalent text in an image, plus it can easily be changed if necessary, scales up into larger or smaller font sizes[?] and can be searched.

	A title as a caption under the image
Smiley face with title.png 1496 bytes	Smiley face with no title.png 1012 bytes (+74 bytes caption)

Does the number of colours fit with the number of bits per pixel? In a diagram, there is usually a limited number of colours. If there are say 4 different colours, there is no need to save in a compression that is capable of distinguishing 16 million colours. To distinguish millions of different colours requires 24 bits per pixel;

1 bit colour (180 bytes)	4 bit colour (309 bytes)
No antialiasing	Antialiased	Enlarged view

2²⁴ = 16 777 216

256 different colours only needs 8 bits;

2⁸ = 256

This means that 8 bit colour file sizes would theoretically be 1/3 as big as 24 bit colour.

For a black and white diagram you may be able to use only 1 bit colour;

2¹ = 2 colours (one of which is black the other white)

However if the image is anti aliased you will lose it.This is because antialising smooths jagged diagonal edges by adding various shades of grey where once there was black or white. Anti aliased b/w images can be saved as 4 bit 16 colour images instead.

Why you should not save diagrams as JPEG

To the right is an example of a file saved as a JPEG when it should have been saved as a PNG. JPEG uses a lossy compression algorithm meant for photographs. Compressing drawings or diagrams with JPEG results in an image of poor quality, because the human eye can spot the artifacts around the edges.

Another drawback is the large file size you will end up with. JPEG compression has many options but most commonly only two color spaces, 24 bit (millions of colors) and 8 bit (grayscale), are used. In the sample on the right a 4 color image is inflated by using an inappropriate color schema, which results in the rather large file size.

If you don't have an original file, but only have a jpeg file 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 here 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. Images on the web should have a small footprint but still look crisp, generally a value between 70 and 80% is suitable.
• JPEG compression works better on slightly blurred images, don't sharpen the images too much as it will result in a higher footprint.
• If the image is of bad quality, e.g. 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.

See also

• Wikipedia:Image use policy
• Wikipedia:Graphics tutorials