Enlarged area bitmap.

Reconstruction from multiple pixel values, using dots, lines, anti-aliasing

LCD monitor matrix

Pixel, pixel (sometimes pal, eng. pixel, pel is short for piсture s element, which in turn shortens to pix element, in some sources piсture cell - letters. image element) or elise (rarely used Russian version of the term) - the smallest logical element a two-dimensional digital image in bitmap graphics, or a [physical] element of a matrix of displays that form an image. A pixel is an indivisible rectangular or circular object, characterized by a certain color (in relation to plasma panels, a gas-plasma cell can be octagonal [ ]). A computer raster image consists of pixels arranged in rows and columns. Also the pixel is mistakenly [ ] call the element of the photosensitive matrix ( sensel - from sensor element).

The more pixels per unit area an image contains, the more detailed it is. The maximum detail of a raster image is set at its creation and cannot be increased. If the image is zoomed in, the pixels turn into large grains. The jaggies can be smoothed by interpolation. In this case, the level of detail does not increase, since to ensure a smooth transition between the original pixels, new ones are simply added, the value of which is calculated based on the values \u200b\u200bof the neighboring pixels of the original image.

Each pixel of a bitmap is an object characterized by a certain color, brightness, and possibly transparency. One pixel can store information about only one color, which is associated with it (in some computer systems color and pixels are represented as two separate objects, for example, in the ZX Spectrum video system).

A pixel is also the smallest unit of a bitmap obtained with graphics systems information output ( computer monitors, printers, etc.). The resolution of such a device is determined by the horizontal and vertical dimensions of the displayed image in pixels (for example, the VGA mode is 640 × 480 pixels). Pixels displayed on color monitors are composed of triads (subpixels of red, green, and blue flowerslocated nearby in a certain sequence). For a CRT monitor, the number of triads per pixel is not fixed and can be units or tens; for LCD monitor (at correct setting OS) there is exactly one triad per pixel, which excludes moire. For video projectors and printing devices, color overlay is used, where each component (RGB for a projector or CMYK for a printer) completely fills a given pixel.

Multiples and sub-multiples

Multiples				Long-term
magnitude	name	designation		magnitude	name	designation
10 1 pix	decapixel	dapix	dapel	10 −1 pix	decipixel	dpix	dpel
10 2 pix	hectopixel	gpix	hpel	10 −2 pix	centipixel	spix	cpel
10 3 pix	kilopixel	kpix	kpel	10 −3 pix	millipixel	megapix	mpel
10 6 pix	megapixel	Megapixels	Mpel	10 −6 pix	micropixel	mkpix	µpel
10 9 pix	gigapixel	Gpix	Gpel	10 −9 pix	nanopixel	npix	npel
10 12 pix	terapixel	Tpix	Tpel	10-12 pix	picopixel	ppix	ppel
10 15 pix	petapixel	Ppix	Ppel	10-15 px	femto pixel	phpix	fpel
10 18 pix	exapixel	Epix	Epel	10 −18 pix	attopixel	apix	apel
10 21 pix	zettapixel	Zpix	Zpel	10 −21 pix	zeptopixel	zpix	zpel
10 24 pix	iottapixel	Ipix	Ypel	10-24 px	ioctopixel	ipix	ypel
not recommended

Etymology

The word "pixel" was first published in 1965 by Frederick S. Billingsley of the Jet Propulsion Laboratory to describe the graphic elements of video images from spacecraft to the Moon and Mars. However, Billingsley did not write the term himself. Instead, he got the word "pixel" from Keith E. McFarland, from the Link Division of General Precision in Palo Alto, who did not know where the word originated. McFarland simply said it was "in use at the time" (circa 1963).

A word is a combination of pix, for an image and an element. The word pix appeared in the headlines of Variety magazine in 1932, as an abbreviation for text images in relation to films. By 1938, pix is \u200b\u200bnow used for still images.

The term "picture element" refers to the earliest days of television, such as "Bildpunkt" (German word for pixel, literally "picture point") in 1888 by Paul Nipkow's German patent. According to another version, the earliest publication of the term picture element itself was in Wireless World magazine in 1927, although it was previously used in various US patents filed as early as 1911.

Some authors explain a pixel as an image of a cell, and as early as 1972 in graphics and image and video processing, PEL is often used instead of a pixel. For example, IBM used it in their Technical Reference for the original PC.

Pronunciation and spelling options

Opinions differ regarding the normality of using the term in the form of “pixel” or “pixel”. Thus, the Russian Spelling Dictionary of the Russian Academy of Sciences qualifies the form “pixel” as commonly used, and the form “pixel” as characteristic of colloquial professional or colloquial and professional speech (in the abbreviations of the dictionary there is no decoding for colloquial prof. speeches, but there is separately colloquial - colloquial, prof. - professional; does not give an unambiguous interpretation of this definition and help desk Russian on the Gramota.ru portal). On the other hand, the current GOST 27459-87 provides for the term "pixel" as the only one possible for use in the scope of the specified standard (computer graphics) and which " is mandatory for use in documentation and literature of all types included in the scope of standardization or using the results of this activity". In this case, GOST 27459-87 under the term "pixel" means " the smallest element of the rendering surface that can be independently assigned the color, intensity and other characteristics of the image».

Resolution of computer monitors

Computers can use pixels to display an image, often an abstract image, which is graphical interface user. The resolution of this image is called the display resolution and is determined by the computer's graphics card. LCD monitors also use pixels to display the image, and have a native resolution. Each pixel consists of triads, the number of these triads being determined by the native resolution. On some CRT monitors, the sweep speed of the beam may be fixed, resulting in a fixed native resolution. Most CRT monitors do not have a fixed sweep rate, meaning they don't have a native resolution at all - instead, they have a range of resolutions that are equally well supported. To obtain a clear image on the LCD, the user must ensure that the computer display resolution matches the native resolution of the monitor.

Telescope resolution

The pixel scale uses in astronomy the angular distance between two objects in the sky that fall within one pixel of each other on a detector (CCD or infrared chip). The s scale is measured in radians by the ratio of the pixel p and focal length F from previous optics, S \u003d P / F. (Focal length is the product of the focal ratio over the diameter of the corresponding lens or mirror). Since p is usually expressed in units of arc seconds per pixel, because 1 radian is equal to 180 / π * 3600≈206.265 arc seconds, due to diameter is often given in millimeters and pixel sizes in micrometer, which gives another factor of 1000, the formula is often used as s \u003d 206p / f.

Subpixels

Many displays and system images, for various reasons, are not able to display or perceive different color channels in the same place. Thus, the pixel grid is divided into monochromatic regions that facilitate the display or perception of color when viewed from a distance. Some displays such as LCD, LED and plasma displays, these monochromatic areas are separately addressable elements that have become known as subpixels. For example, LCDs typically divide each pixel horizontally into three subpixels. When a square pixel is divided into three subpixels, each subpixel is necessarily rectangular. In the terminology of the display industry, subpixels are often referred to as pixels because they are the primary addressable elements at a point in the visible hardware, and hence, pixel circuits are used rather than subpixel ones.

Megapixel

A megapixel (MPx) is a million pixels; this term is used not only for the number of pixels in an image, but also expresses the number of sensor elements in an image digital cameras or the number of display elements of digital displays. For example, a camera that produces 2048x1536 image pixels (3,145,728 finished image pixels) typically uses a few extra rows and columns of sensor elements and is usually said to be "3.2 megapixels" or "3.4 megapixels", depending on whether it contains " effective ”or“ total ”number of pixels.

A pixel is a unit of measurement for the screen of any modern monitor, whether it be a computer, laptop, mobile phone, navigator and so on. In other words, answering the question of what a pixel is, you can answer that it is just a point. That is, if they say that the size of a picture is 100 * 30 pixels, it means that this picture consists of 100 * 30 pixels. Thus, the pixel size is one point on the monitor of your computer or other device. Pixels can be black and white or color. Thanks to them, by controlling the brightness of the glow, you can draw, draw, build various graphs, edit the image, and watch your favorite movies.

Pixels are used to estimate the resolution of a monitor. The more pixels your monitor can reflect, the clearer and better the image will look. In web design, they are used to indicate the size of an image, photograph, any particular object, table cell. For this, parameters such as the height and width of the image are used.

Now you have a very general idea of \u200b\u200bwhat a pixel is. But now we will try to make out this concept in details.

Pixel information items

Each pixel contains five pieces of information. Two of them are responsible for the coordinates of the pixel, that is, its position vertically and horizontally. The other three are responsible for color. They determine the brightness of red, blue and green colors. Together, these five elements enable the reader to place the dot in the desired location on the screen and determine its correct color. Together, the pixels on the screen form a frame.

A megapixel is one million dots that create an entire image. Typically, megapixels are used to measure images, video footage.

What is a broken and stuck pixel?

Surely, you have heard the concept of "broken" pixel. Let's try to figure out what this means. To begin with, let's figure out what liquid crystal monitors are. The matrix of such a monitor has a huge number of crystals, each of which is controlled by a thin-film transistor. In the event that the thin-film transistor ceases to function correctly, that is, it fails, the image will not be displayed in this area. This is how "broken" pixels appear on a phone, camera monitor, laptop or computer. This type of pixel is the most difficult to repair and dangerous for equipment.

It should be said that not always a non-working pixel is black, since a pixel is a set of their 3 subpixels - blue, green and red. Color change is achieved by rotating the crystal. If this crystal gets stuck, then when changing the image, it will display only the color on which it is "stuck". Often stuck pixels are simply not noticed. You can fix this problem with special program and a certain effect even at home.

There are also other types of pixels, such as "stuck" and "hot". In fact, these are variations of the dead pixel that will appear under certain conditions. In movies, games, work with images, such moments are likely to remain elusive to the eye.

Now you know what a pixel is and how it functions. And remember that in the event of a breakdown, that is, a "broken" or "stuck" pixel, it is best to immediately contact a specialized repair company so that if possible, your device can be extended. After all, nobody likes looking at black dots instead of beautiful photographs.

Website development

• Transfer

A couple of months ago, taking a break from implementing new features like q_auto and g_auto, I made fun in our team chat about how different image storage formats would compress a single pixel image. In response, Orly, the blog editor, asked me to write a post about it. I said, “Of course, why not. But this will be a very short post. After all, what can you tell about one pixel ”.

Looks like I was very wrong.

What can be done with one pixel?

In the early days of the web, single-pixel images were often used as crutches for things that are now done with CSS. Creation of indents, lines, rectangles, semi-transparent backgrounds - a lot of things can be done simply by scaling the pixel to the desired size. Another use of pixels that has survived to this day is beacons, tracking and analytics.

In responsive web design, single pixel images are used as temporary stubs while waiting for the page to load. Most browsers do not support HTTP Client Hints, so some responsive image options wait for a full page load to calculate the actual size of the images, and then replace the single pixel images with the desired images using JavaScript.

Broken picture

There is one more use for single-pixel images: they can be used as “default” images. If the desired image cannot be found for some reason, in some cases it is better to show one transparent pixel than to issue “404 - Not found"Which will be visible in browsers as a" broken picture ". In any case, you will not see the desired image, but it will be more professional not to focus on this, giving out the icon of a "broken picture".

Okay, so single pixel images can be useful. And what is the best way to encode a 1x1 image?

Obviously, this is a borderline case for image compression formats. If the image consists of one pixel, there isn't much to compress. Uncompressed data will contain from one bit to four bytes, depending on the interpretation: black and white (1 bit), grayscale (1 byte), grayscale with alpha (2 bytes), RGB (3 bytes), RGBA (4 bytes).

But you cannot encode just the data - in any image format, you need to set the interpretation of the data. At the very least, you need to know the height and width of the image and the number of bits per pixel.

Headings

Usually, four bytes are used to encode height and width: two per number (if it were one byte, then the maximum size of the picture would be 255x255). Let's say you need another byte to set the type of color rendering (grayscale, RGB or RGBA). In such a minimalistic format, a single-pixel picture would take at least 6 bytes (for a white pixel), and a maximum of 9 bytes (for a semi-transparent pixel of an arbitrary color).

But actual format headers usually contain much more information. The first few bytes of any format contain a unique identifier needed only to signal that “Hey! I am a file of this particular format! " This sequence of bytes is also known as the "magic number". For example, GIF always starts with GIF87a or GIF89a, depending on the version of the spec, PNG starts with an 8-byte sequence that includes PNG, JPEG has a header containing a JFIF or Exif string, and so on.

Headers can contain meta information. This is specific to this format the data required for decoding, which determines which of the format subspecies is used. Some of the metadata is not necessarily needed for decoding, but is nevertheless used to determine how to display it on screen: color profile, orientation, gamma, number of dots per pixel. It can also be production data - comments, time stamps, copyright notices, GPS coordinates. This can be optional or required data, depending on the specification. Of course, this data will increase the file size. Let's therefore focus on minimal files, where all unnecessary information has been removed - or we will waste precious bytes on nonsense.

In addition to headers, files may contain another additional Information - tokens, checksums (used to check the correctness of the transfer or the result of the work of other processes that can corrupt the file) There are times when you need to include indentation in the file to align all the data.

One-pixel, smallest possible pictures, show how much "extra" information is contained in the file format. We look.

Here is a hex dump of a 67 byte PNG file with one white pixel.

00000000 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 | .PNG ........ IHDR | 00000010 00 00 00 01 00 00 00 01 01 00 00 00 00 37 6e f9 | ............. 7n. | 00000020 24 00 00 00 0a 49 44 41 54 78 01 63 68 00 00 00 | $ .... IDATx.ch ... | 00000030 82 00 81 4c 17 d7 df 00 00 00 00 49 45 4e 44 ae | ... L ....... IEND. | 00000040 42 60 82 | B`. |

The file consists of an 8-byte magic number PNG followed by a 13-byte IHDR header chunk, an IDAT image data chunk with 10 bytes of “compressed” data, and an IEND end mark. Each chunk of data starts with a 4-byte chunk with a length and a 4-byte chunk-identifier, and ends with a checksum of 4 bytes. These three chunks of data are required, so they consume 36 bytes from a 67-byte file anyway.

A black pixel also takes 67 bytes, transparent - 68, and an arbitrary RGBA color will take from 67 to 70 bytes.

JPEG header is longer. The smallest single-pixel JPEG is 141 bytes, and it is never transparent because JPEG does not support alpha channel.

GIF is the most compact of the three in terms of titles. universal formats... A white pixel can be encoded into GIF 35 bytes:

00000000 47 49 46 38 37 61 01 00 01 00 80 01 00 00 00 00 | GIF87a .......... | 00000010 ff ff ff 2c 00 00 00 00 01 00 01 00 00 02 02 4c | ..., ........... L | 00000020 01 00 3b | ..; |

And transparent - 43:

00000000 47 49 46 38 39 61 01 00 01 00 80 01 00 00 00 00 | GIF89a .......... | 00000010 ff ff ff 21 f9 04 01 0a 00 01 00 2c 00 00 00 00 | ...! ......., .... | 00000020 01 00 01 00 00 02 02 4c 01 00 3b | ....... L ..; |

For all the listed formats, smaller files can be made that will be displayed in most browsers, but they will be made in violation of the specifications, so the image decoder can at any time complain that the file is broken (and will be right) and show the icon " broken picture "- and we are trying to avoid it.

So what's the best 1pixel image format for the web? There are options. If the pixel is opaque, then GIF. If transparent - GIF too. If it is semi-transparent, then PNG, since for GIF, transparency is specified only as "yes" or "no".

All this means little. Any of these files will fit into one network packet, so there will be no difference in speed, and the difference for storage is generally negligible. But nevertheless, this is fun to deal with - at least for format lovers.

What about more exotic formats?

When using the WebP format, choose its lossless version. A one-pixel image without loss of quality in WebP format takes from 34 to 38 bytes. With loss - from 44 to 104 bytes, depending on the presence of the alpha channel. For example, here's a fully transparent pixel in a 34-byte WebP without losing quality:

00000000 52 49 46 46 1a 00 00 00 57 45 42 50 56 50 38 4c | RIFF .... WEBPVP8L | 00000010 0d 00 00 00 2f 00 00 00 10 07 10 11 11 88 88 fe | .... / ........... | 00000020 07 00 | .. |

And here is the same lossy pixel (default) WebP, taking up 82 bytes:

00000000 52 49 46 46 4a 00 00 00 57 45 42 50 56 50 38 58 | RIFFJ ... WEBPVP8X | 00000010 0a 00 00 00 10 00 00 00 00 00 00 00 00 00 41 4c | .............. AL | 00000020 50 48 0b 00 00 00 01 07 10 11 11 88 88 fe 07 00 | PH .............. | 00000030 00 00 56 50 38 20 18 00 00 00 30 01 00 9d 01 2a | ..VP8 .... 0 .... * | 00000040 01 00 01 00 02 00 34 25 a4 00 03 70 00 fe fb fd | ...... 4% ... p .... | 00000050 50 00 | P. |

The difference is that a lossy and transparent WebP is stored as two images in one container file: one lossy image that stores RGB data, and the other, lossless, with alpha channel data.

BPG

The BPG format also has loss-of-quality modes, and the opposite applies to it. Lossy BPG stores 1 pixel in 31 bytes - the smallest of all:

00000000 42 50 47 fb 00 00 01 01 00 03 92 47 40 44 01 c1 | [email protected]| 00000010 71 81 12 00 00 01 26 01 af c0 b6 20 bc b6 fc | q ..... & .... ... |

Lossless BPG takes 59 bytes. Transparent pixel will take 57 bytes in BPG
lossless and 113 bytes in BPG lossless. Interestingly, in the case of one white pixel, BPG will outperform WebP (31 bytes versus 38), and with one transparent pixel, WebP beats BPG (34 bytes versus 57).

And then there's FLIF. I certainly cannot forget about him, being the main author free format images without loss of quality (Free Lossless Image Format). Here is a 15 byte FLIF for one white pixel:

00000000 46 4c 49 46 31 31 00 01 00 01 18 44 c6 19 c3 | FLIF11 ..... D ... |

And here is the 14-byte black one:

00000000 46 4c 49 46 31 31 00 01 00 01 1e 18 b7 ff | FLIF11 ........ |

The black pixel is smaller because zero compresses better than 255. The header is simple: the first 4 bytes are always "FLIF", the next is a human-readable color and interlacing designation. In our case, this is "1", which means one channel for the color (grayscale). The next byte is the color depth. "1" means one byte per channel. The next four bytes are the size of the picture, 0x0001 by 0x0001. The next 4 or 5 are compressed data.

A fully transparent pixel also takes up 14 bytes in FLIF:

00000000 46 4c 49 46 34 31 00 01 00 01 4f fd 72 80 | FLIF41 .... O.r. |

In this case, we have 4 color channel (RGBA) instead of one. One would expect the data section to be longer (after all, there are four times the number of channels), but this is not the case: since the alpha value is zero (the pixel is transparent), RGB values \u200b\u200bare considered unimportant, and they are simply not included in the file.

For a custom RGBA color, the FLIF file can take up to 20 bytes.

Okay, so FLIF is the leader in the one pixel category in the image encoding competition. If only it was some kind of important competition :)

Nevertheless, FLIF will not be the leader. Remember the minimalistic format I mentioned? The one that encodes a single pixel into a size of 6 to 9 bytes? There is no such format, so it does not count. But there is an existing format that comes pretty close to this.

It's called Portable Bitmap format (PBM), and is an uncompressed image format from the 1980s. This is how one white pixel could be encoded in PBM with only 8 bytes:

00000000 50 31 0a 31 20 31 0a 30 | P1.1 1.0 |

Yes, here and a hex dump is not needed, this format is human-readable. It can be opened in a text editor.

The first line (P1) indicates that the picture is two-color. Not shades of gray, but only two colors - black (number 1) and white (0). The second line is the dimension of the picture. And then there is a space-separated list of numbers, one number per pixel. In our case, 0.

If you need something other than black and white, you can use the PGM format to represent a single pixel of any color with only 12 bytes, or a PPM of 14 bytes. This is always less than the corresponding FLIF (or any other compressed format).

The legacy PNM family of formats (PBM, PGM, and PPM) does not support transparency. There is a PNM add-on called Portable Arbitrary Map (PAM) that has transparency. But for us it is not suitable because of the verbosity. The smallest of the PAM files, representing a transparent pixel, is:

P7 WIDTH 1 HEIGHT 1 DEPTH 4 MAXVAL 1 TUPLTYPE RGB_ALPHA ENDHDR \\ 0 \\ 0 \\ 0 \\ 0

The last line contains four zero bytes. This makes 67 bytes in total. It would be possible to use grayscale with alpha instead of RGBA, this would save two bytes in the data section. But you get a file of 71 bytes, since you will need to change the TUPLTYPE from RGB_ALPHA to GRAYSCALE_ALPHA. In addition, the processing program may not like MAXVAL 1 and will have to change it to MAXVAL 255 (two more bytes).

In general, for single pixel images without transparency, the smallest will be PNM (8 to 14 bytes for PNM versus 14 to 18 for FLIF), and with transparency, the smallest will be FLIF (14 to 20 bytes for FLIF versus 67 to 69 bytes for PAM).

Here is a comparison table with the optimal file sizes for different single-pixel images:

png

jpg

data compression

Add tags

What is a pixel?

Imagine that the monitor screen is divided into many thousands of small cells, like a notebook sheet, only many, many smaller. Each such cell on the screen is called a pixel.

If the cells are very small, more of them fit on the monitor screen. This means that they better convey shades of color and small details of the picture. The more pixels fit on the screen, the higher the resolution. At low resolution, the pixels are smaller, respectively, their size is larger, and the image quality is worse. Color transitions are made as if from a mosaic, the drawings consist of small squares. So, the more pixels and the smaller they are, the higher the resolution, the higher the quality of the pictures.

Dead pixel:

Have you heard the expression “ dead pixel"? For sure. What does this mean? This means that one of the cells on the monitor (LCD TV screen, computer monitor or laptop, matrix digital camera) stopped conducting light. Turned off. Broke down. If the screen resolution is high, then among hundreds of thousands of other cells it will hardly be visible. At low screen resolutions, it appears as a black dot on the screen.

Hot Pixel:

Also pixels are "hot". On a solid background, they look like multi-colored dots, red, orange, green - whatever. This means that the pixel has not lost its performance, everything is in order with it, it just "hovered" on a certain color, and cannot switch to another. Sometimes it "cures" by itself, when you reboot, if not - it is advised to massage the monitor screen in place of the "hot" pixel with your finger or a cotton swab. Just be careful not to damage the neighboring pixel cells. This does not apply to cameras, the pixels of the matrix are reflected on the camera display, and you simply cannot reach it with a cotton swab.

Working with computers and many others modern gadgets directly related to display devices digital information - monitors and displays. In addition, devices for fixing images of objects of the surrounding world with the subsequent digitization of images - cameras and scanners - have become widespread. It is difficult, using this technique, not to hear and see the word pixel. Many users have a superficial understanding of this concept, but it is important to know what a pixel is for the very reason that you can preserve visual acuity by choosing the right monitor and the mode of displaying information on it - one of the defining parameters in this is the number of pixels per unit length ...

Definition of the concept
The smallest physical element of an imaging device's array is called a pixel (pixel or point). It also refers to the minimum composite element of a bitmap graphic.

Points in output devices
To display color images, a combination of dots with different ratios of red, green and blue saturation are used. These three colors appear as a result of the operation of the corresponding subpixels in the display matrix. Three multi-colored subpixels per pixel form a triad. LCD monitors are characterized by displaying one triad at one point. The smaller the pixel sizes, the more they are located per unit length, the more accurately you can reproduce the details of images, the resolution of such monitors is higher.

Dots in images
The minimum structural unit of the picture is filled with color completely, and is not the result of the cumulative actions of three subpixels. As in the case of displays, a relatively large number of pixels per unit length gives better graphics detail, its resolution is higher.

Viewing comfort
The deeply detailed images provide a pleasant viewing experience for a person, since there is no need to strain their eyes to reveal the smallest graphic elements. High-quality drawing is the result of two factors: high resolution monitor and pictures. If the resolution of both is the same, the image quality is best. When the image scale is reduced, its detailing deteriorates due to the restructuring (not for the better) of the elements for displaying on the screen. When zooming in, intermediate pixels can be drawn in - the so-called interpolation, which cannot guarantee an accurate reproduction of image details.

Thus, the knowledge of what a pixel is, what properties it possesses and what role it plays in the construction of an image makes it possible to create the most comfortable and safe graphic environment for sight.