Wikipedia:WikiProject Usability/Images

Images are very useful in conveying visual information. While it is important to provide a written description of a certain thing, especially for those who are unable to see it, a picture is often indespensable.

Images should be used only when... see ........

Image width

Image file size

Image file size is frequently brought up as an important consideration. The below gives a general idea of how much text is the equivalent of some images of varying compressions.

This shows the equivalent as it would be in underlying HTML, when saved to disk. By comparison, the Wikipedia main page (July 23, 2005) - without pictures, css, and javascript files - is 42103 bytes, uncompressed. Web servers may, if the browser supports it (nearly all browsers do), compress text using gzip leading to transmissions that are 4 to 6 times smaller than the original page [1]. Images are not compressed for transmission in this form. Based on this, you may think of the main page as 8400 bytes compared to the listed image sizes below, or imagine that the 'text equivalent' is 5 times larger than it is.

bytes	image	text equivalent (multiply by 5)	compression
2219	File:Wiki letter w.png	PNG images can either use palette-indexed color or be made up of one or more channels (numerical values directly representing quantities about the pixels). When there is more than one channel in an image all channels have the same number of bits allocated per pixel (known as the bitdepth of the channel). It should be noted that whilst the PNG specification always talks about the bitdepth of channels most software and users generally talk about the total number of bits per pixel (sometimes also referred to as bitdepth or color depth).The number of channels will depend on if the image is greyscale or color and if it has an alpha channel. PNG allows the following combinations of channels: greyscale greyscale and alpha (level of transparency for each pixel) red, green and blue (rgb/truecolor) red, green, blue and alpha With indexed color images, the palette is always stored at a depth of 8 bits per channel. The palette must not have more entries than the image bitdepth allows for but it may have fewer (so if an image for example only uses 90 colors there is no need to have palette entries for all 255). PNG offers a variety of transparency options. With truecolor and greyscale images either a single pixel value can be declared as transparent or an alpha channel can be added. For paletted images, alpha values can be added to palette entries. The number of such values stored may be less than the total number of palette entries, in which case the remaining entries are considered fully opaque.PNG uses a non-patented lossless data compression method known as deflation. This method is combined with prediction, where for each image line, a filter method is chosen that predicts the colour of each pixel based on the colours of previous pixels and subtracts the predicted colour of the pixel from the actual color. An image line filtered in this way is often more compressible than the raw image line would be. The full range of color options bitdepth per channel ... Indexed color pngs are allowed to have 1, 2, 4 or 8 bits per pixel by the standard; greyscale images with no alpha channel allow for 1, 2, 4, 8 or 16 bits per pixel. Everything else uses a bitdepth per channel of either 8 or 16. The co	lossless png
440	File:Wiki letter w lossy.gif	GIF (Graphics Interchange Format) is a bitmap image format that is widely used on the World Wide Web, both for still images and for animations. The format was introduced in 1987 by CompuServe in order to provide a colour image format for their file downloading areas, replacing their earlier RLE format which was black and white only. GIF became popular because it used LZW data compression, which was more efficient than the run-length enc	low quality 8 colour dithered gif (lossy)
8120		[omitted]	high quality jpeg (lossy)

These examples in no way show that any algorithm is a better than any other. Some of the pictures are very small, use limited colors, and the quality is not very important. Different compressions are good for different situations.

Also note that this applies to the HTML, and not wiki markup or displayed text. While these words appear to be 11 bytes, they are actually 18 bytes in HTML: <i>these words</i>.