What are digital camera pixels? What is pixel and resolution
Length and distance converter Mass converter Converter of volume measures of bulk products and food products Area converter Converter of volume and units of measurement in culinary recipes Temperature converter Converter of pressure, mechanical stress, Young's modulus Converter of energy and work Converter of power Converter of force Converter of time Linear speed converter Flat angle Converter thermal efficiency and fuel efficiency Converter of numbers in various number systems Converter of units of measurement of quantity of information Currency rates Women's clothing and shoe sizes Men's clothing and shoe sizes Angular velocity and rotation frequency converter Acceleration converter Angular acceleration converter Density converter Specific volume converter Moment of inertia converter Moment of force converter Torque converter Specific heat of combustion converter (by mass) Energy density and specific heat of combustion converter (by volume) Temperature difference converter Coefficient of thermal expansion converter Thermal resistance converter Thermal conductivity converter Specific heat capacity converter Energy exposure and thermal radiation power converter Heat flux density converter Heat transfer coefficient converter Volume flow rate converter Mass flow rate converter Molar flow rate converter Mass flow density converter Molar concentration converter Mass concentration in solution converter Dynamic (absolute) viscosity converter Kinematic viscosity converter Surface tension converter Vapor permeability converter Vapor permeability and vapor transfer rate converter Sound level converter Microphone sensitivity converter Sound Pressure Level (SPL) Converter Sound Pressure Level Converter with Selectable Reference Pressure Luminance Converter Luminous Intensity Converter Illuminance Converter Computer Graphics Resolution Converter Frequency and Wavelength Converter Diopter Power and Focal Length Diopter Power and Lens Magnification (×) Electric charge converter Linear charge density converter Surface charge density converter Volume charge density converter Electric current converter Linear current density converter Surface current density converter Electric field strength converter Electrostatic potential and voltage converter Electrical resistance converter Electrical resistivity converter Electrical conductivity converter Electrical conductivity converter Electrical capacitance Inductance converter American wire gauge converter Levels in dBm (dBm or dBm), dBV (dBV), watts, etc. units Magnetomotive force converter Magnetic field strength converter Magnetic flux converter Magnetic induction converter Radiation. Ionizing radiation absorbed dose rate converter Radioactivity. Radioactive decay converter Radiation. Exposure dose converter Radiation. Absorbed dose converter Decimal prefix converter Data transfer Typography and image processing unit converter Timber volume unit converter Calculation of molar mass D. I. Mendeleev’s periodic table of chemical elements
1 centimeter [cm] = 37.7952755905511 pixel (X)
Initial value
Converted value
twip meter centimeter millimeter symbol (X) symbol (Y) pixel (X) pixel (Y) inch soldering (computer) soldering (typographic) point NIS/PostScript point (computer) point (typographical) em dash cicero em dash point Dido
Learn more about units used in typography and digital imaging
General information
Typography is the study of the reproduction of text on a page and the use of size, typeface, color and other visual features to make text easier to read and look beautiful. Typography emerged in the mid-15th century with the advent of printing presses. The placement of text on a page affects our perception - the better it is placed, the more likely it is that the reader will understand and remember what is written in the text. Poor-quality typography, on the contrary, makes the text difficult to read.
Typefaces are divided into different types, such as serif and sans serif fonts. Serifs are a decorative element of a font, but in some cases they make the text easier to read, although sometimes the opposite happens. The first letter (blue) in the image is in Bodoni serif font. One of the four serifs is outlined in red. The second letter (yellow) is in Futura sans serif font.
There are many classifications of fonts, for example, according to the time of their creation, or the style popular at a certain time. Yes, there are fonts old style- a group that includes the oldest fonts; newer fonts transitional style; modern fonts, created after the transitional fonts and before the 1820s; and finally new style fonts or modernized old fonts, that is, fonts made according to the old model at a later time. This classification is mainly used for serif fonts. There are other classifications based on the appearance of typefaces, such as the thickness of the lines, the contrast between thin and thick lines, and the shape of the serifs. The domestic press has its own classifications. For example, the classification according to GOST groups fonts by the presence and absence of serifs, thickening in serifs, smooth transition from the main line to the serif, rounding of the serif, and so on. In classifications of Russian, as well as other Cyrillic fonts, there is often a category for Old Church Slavonic fonts.
The main task of typography is to adjust the size of letters and choose appropriate fonts to place text on the page so that it is easy to read and looks beautiful. There are a number of systems for determining font size. In some cases, the same size of letters in typographic units, if they are printed in different typefaces, does not mean the same size of the letters themselves in centimeters or inches. This situation is described in more detail below. Despite the inconvenience this causes, the current font size helps designers arrange text neatly and beautifully on the page. This is especially important in layout.
In layout, you need to know not only the size of the text, but also the height and width of digital images in order to fit them on the page. Size can be expressed in centimeters or inches, but there is also a unit specifically designed to measure the size of images - pixels. A pixel is an element of an image in the form of a point (or square) of which it is composed.
Definition of units
The size of letters in typography is indicated by the word “size”. There are several systems for measuring point size, but most are based on the unit "soldering" in the American and English measurement systems (English pica), or “cicero” in the European measurement system. The name "soldering" is sometimes written as "spike". There are several types of soldering, which differ slightly in size, so when using soldering, it is worth remembering which soldering you mean. Initially, cicero was used in domestic printing, but now soldering is also common. Cicero and computer soldering are similar in size, but not equal. Sometimes cicero or soldering is directly used for measurement, for example to determine the size of margins or columns. More often, especially for text measurement, soldered-derived units such as printing points are used. Solder size is determined differently in different systems, as described below.
Letters are measured as shown in the illustration:
Other units
Although computer soldering is gradually replacing other units, and perhaps replacing the more familiar ciceros, other units are also used along with it. One of these units is American soldering It is equal to 0.166 inches or 2.9 millimeters. There is also printing soldering. It is equal to the American one.
Some domestic printing houses and in the literature about printing still use pica- a unit that was widely used in Europe (with the exception of England) before the advent of computer soldering. One cicero is equal to 1/6 of a French inch. The French inch is slightly different from the modern inch. In modern units, one cicero is equal to 4.512 millimeters or 0.177 inches. This value is almost equal to computer soldering. One cicero is 1.06 computer solders.
Round embed (em) and semi-circular embed (en)
The units described above determine the height of letters, but there are also units that indicate the width of letters and symbols. Round and semicircular spacing are just such units. The first is also known as em, or em, from the English word for the letter M. Its width has historically been equal to that of the English letter. Likewise, a semi-circular embed equal to half a round one is known as en. Currently, these values are not determined using the letter M, since this letter can have different sizes in different fonts, even if the size is the same.
In Russian, the en dash and em dash are used. To indicate ranges and intervals (for example, in the phrase: “take 3-4 tablespoons of sugar”), an en dash is used, also called an en dash. The em dash is used in Russian in all other cases (for example, in the phrase: “the summer was short, and the winter was long”). It is also called em dash.
Problems with modern unit systems
Many designers do not like the current system of typographical units based on rations or ciceros and typographical points. The main problem is that these units are not tied to the metric or imperial system of measurements, and at the same time they have to be used in conjunction with centimeters or inches, in which the size of illustrations is measured.
In addition, letters made in two different typefaces can be very different in size, even if they are the same size at the typographic points. This is because letter height is measured as the height of the type pad, which is not directly related to the height of the character. This makes it difficult for designers, especially if they are working with multiple fonts in the same document. The illustration shows an example of this problem. The size of all three fonts in typographical points is the same, but the height of the sign is different everywhere. To solve this problem, some designers suggest measuring the point as the height of the character.
A pixel is a unit of measurement for the screen of any modern monitor, be it a computer, laptop, mobile phone, navigator, and so on. In other words, answering the question of what a pixel is, we can answer that it is just a dot. 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, a pixel size is one dot 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 images, and watch your favorite movies.
Pixels are used to evaluate the resolution of a monitor. The more pixels your device's monitor can reflect, the sharper and better the image will look. In web design, they are used to indicate the size of an image, photograph, any individual object, or table cell. For this, parameters such as image height and width are used.
Now you have a very general idea of what a pixel is. But now we will try to analyze this concept in more detail.
Pixel Information Elements
Each pixel contains five pieces of information. Two of them are responsible for the pixel coordinates, that is, its vertical and horizontal location. The other three are responsible for color. They determine the brightness of red, blue and green colors. These five elements together 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 a cohesive image. Typically, megapixels are used to measure image and video footage.
What is a “broken” and “stuck” pixel?
Surely you have heard the concept of a “dead” pixel. Let's try to figure out what this means. First, let's figure out what LCD monitors are. The matrix of such a monitor has a huge number of crystals, each of which is controlled by a thin-film transistor. If the thin-film transistor stops functioning 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 a non-working pixel is not always black, since a pixel is a set of 3 subpixels - blue, green and red. The color change is achieved by rotating the crystal. If this crystal gets stuck, then when the image changes, it will only display the color on which it is “stuck.” Often, “stuck” pixels are simply not noticed. This problem can be eliminated with the help of a special program and a certain influence, even at home.
There are also other types of pixels, such as “stuck” and “hot”. Essentially, these are variations of a dead pixel that will appear under certain conditions. In films, games, and working with images, such moments will most likely remain elusive to the eye.
Now you know what a pixel is and how it functions. And remember that if a breakdown occurs, that is, a “broken” or “stuck” pixel, it is best to immediately contact a specialized repair company so that, if possible, your device’s life will be extended. After all, no one likes to look at black dots instead of beautiful photographs.
What is a pixel?
Imagine that the monitor screen is divided into many thousands of small cells, like a notebook sheet, only much, much 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 that fit on the screen, the higher the resolution. At low resolution, there are fewer pixels, respectively, their size is larger, and the image quality is worse. The color transitions look like they are made from a mosaic; the designs consist of small squares. So, the more pixels and the smaller they are, the higher the resolution, the higher the quality of the drawings.
Dead pixel:
Have you ever 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 or laptop monitor, digital camera matrix) has stopped transmitting light. Turned off. Broke. If the screen resolution is high, then among hundreds of thousands of other cells it will almost not be visible. With a low screen resolution, it is visible as a black dot on the screen.
Hot pixel:
The pixels are also “hot”. On a plain background they look like multi-colored dots, red, orange, green - any. This means that the pixel has not lost its functionality, everything is fine with it, it’s just “stuck” on a certain color and cannot switch to another. Sometimes this “cures” on its own when you reboot; if not, it is advised to massage the monitor screen at the site of the “hot” pixel with your finger or a cotton swab. Just be careful not to damage 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.
Pixel is the smallest unit of measurement of a two-dimensional digital image. Also, a pixel is the smallest unit of measurement in a display matrix. A pixel is an indivisible rectangular or circular object. If we talk about a two-dimensional image, then a pixel is only a quantitative characteristic that speaks of the size of the image and its clarity. In display matrices, a pixel is a quantity that indicates its size, as well as its color characteristics.
Conclusion: a pixel is a unit of measurement, has a certain size and color (in some cases).
Pixel characterization of 2D rat images. Pixel size.
In computer terminology, any image is usually measured in pixels. In addition to the term “pixel”, you can find the slang definition “dot”.
.jpg){kind=tracking}
For example, this image has dimensions of 200 by 100 pixels, or dots. This means that every square inch of this image consists of 200 dots horizontally, and 100 dots vertically. This characteristic has its own term – DPI (pixel density). One of the most important characteristics of a two-dimensional image is the pixel density; the higher it is, the clearer the image will be. This example shows a 1-inch image with different pixel densities; if we draw a 1-inch thick oblique line along the points (pixels) in the left image with (DPI 72), we will see something like a ladder. If we draw an oblique line along the right image with (DPI 300), we will see a smoother line, where the ladder will not be visible, due to smaller pixels. If this image is enlarged, large squares of different colors will be visible, forming an overall picture, and in the right case, the image will be clearer because it has a larger supply of pixels.
.jpg){kind=tracking}
Now let's look at the color characteristics of a pixel. Each pixel can transmit only one color per unit of time, this can be color, brightness, or even transparency. If we consider the pixels of the display matrix, we should take into account that they usually consist of three subpixels, some technologies use a fourth subpixel.
- Translation
A couple of months ago, while taking a break from implementing new features like q_auto and g_auto, I was joking 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, “Sure, 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 you do with one pixel?
In the early years of the web, single-pixel images were often used as a crutch for things that are now done through CSS. Creating indents, lines, rectangles, translucent backgrounds - a lot can be done by simply scaling the pixel to the desired size. Another use of pixels that survives to this day is beacons, tracking and analytics.In responsive web design, single-pixel images are used as temporary placeholders while waiting for the page to load. Most browsers don't support HTTP Client Hints, so some responsive image options wait for the page to fully load to calculate the actual size of the images, and then replace single-pixel images with the desired images using JavaScript.
Broken picture
There is another 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 a “404 - Not Found”, which will be visible in browsers as a “broken image”. In any case, you won’t see the image you need, but it would be more professional not to focus attention on this, displaying a “broken image” icon.
Okay, so single-pixel pictures can be useful. So what's 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 is not much to compress. The uncompressed data here 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 byte).
But you can’t just encode the data; in any image format, you need to specify the interpretation of the data. At a minimum, you need to know the height and width of the image and the number of bits per pixel.
Headings
Typically, four bytes are used to encode height and width: two per number (if it were one byte, then the maximum image size would be 255x255). Let's say we need another byte to set the color rendering type (grayscale, RGB or RGBA). In such a minimalistic format, a single-pixel image would occupy at least 6 bytes (for a white pixel), and a maximum of 9 bytes (for a translucent pixel of an arbitrary color).But headers in real formats usually contain much more information. The first few bytes of any format contain a unique identifier needed only to communicate that “Hey! I am a file of this particular format!” This sequence of bytes is also known as the "magic number". For example, a GIF always starts with GIF87a or GIF89a, depending on the specification version, a PNG always starts with an 8-byte sequence that includes the PNG, a JPEG has a header containing a JFIF or Exif string, etc.
Headers may contain meta information. This is format-specific data required for decoding that determines which subtype of the format is used. Some of the metadata is not necessarily needed for decoding, but is nevertheless used to determine how to display it on the screen: color profile, orientation, gamma, dots per pixel. It may also be derived data - comments, timestamps, copyright marks, GPS coordinates. This may be optional or required data, depending on the specification. Of course, this data increases the size of the file. Let's therefore stick to minimal files, with all unnecessary information removed - or we'll waste precious bytes on nonsense.
In addition to headers, files may also contain other additional information - markers, checksums (used to verify the correctness of the transfer or the result of other processes that may corrupt the file). It happens that you need to include indents in a file to align all the data.
Single-pixel, minimally possible pictures show how much “extra” information is contained in the file format. Let's see.
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 PNG magic number, followed by a 13-byte IHDR header section, an IDAT image data section with 10 bytes of compressed data, and an IEND end tag. Each data segment begins with a 4-byte length and a 4-byte identifier segment, and ends with a 4-byte checksum. These three pieces of data are required, so they eat up 36 bytes from a 67-byte file anyway.
A black pixel also takes 67 bytes, a transparent pixel takes 68 bytes, and an arbitrary RGBA color will take from 67 to 70 bytes.
The JPEG title is longer. The minimum single-pixel JPEG takes up 141 bytes, and it is not transparent, because... JPEG does not support alpha channel.
In terms of headers, GIF is the most compact of the three universal formats. A white pixel can be encoded into a GIF with 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 of the listed formats, it is possible to make smaller files 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 “ broken picture” – and that’s exactly what we’re trying to avoid.
So what is the best single-pixel image format for the web? There are options. If the pixel is opaque, then GIF. If it's transparent, it's also a GIF. If translucent, then PNG, since for GIF transparency is set 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, it’s fun to figure it out - at least for fans of the formats.
What about more exotic formats?
When using the WebP format, choose the lossless version. A single-pixel image without loss of quality in WebP format takes from 34 to 38 bytes. Lossy – from 44 to 104 bytes, depending on the presence of an alpha channel. For example, here is a fully transparent pixel in 34-byte WebP without loss of 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 pixel with lossy quality (default) WebP, occupying 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 WebP lossy and transparent is stored as two images in the same container file: one lossy image storing the RGB data, and another lossless image containing the alpha channel data.
BPG
The BPG format also has lossy and lossless modes, and the opposite applies. A 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 |BPG........G@D..| 00000010 71 81 12 00 00 01 26 01 af c0 b6 20 bc b6 fc |q.....&.... ...|
A lossless BPG takes 59 bytes. A transparent pixel will take up 57 bytes in BPG
lossy and 113 bytes in lossless BPG. Interestingly, in the case of one white pixel, BPG will outperform WebP (31 bytes versus 38), and with one transparent pixel, WebP will outperform BPG (34 bytes versus 57).
And then there's FLIF. I, of course, cannot forget about him, being the main author of the 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 one for black:
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 designation for color and interlacing. In our case it is “1”, which means one channel for color (grayscale). The next byte is the color depth. "1" means one byte per channel. The next four bytes are the image size, 0x0001 to 0x0001. The next 4 or 5 are compressed data.
A completely 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 channels (RGBA) instead of one. You might expect the data section to be longer (there are four times as many channels after all), but this is not the case: since the alpha value is zero (the pixel is transparent), the RGB values are considered unimportant and are simply not included in the file.
For an arbitrary RGBA color, the FLIF file can take up to 20 bytes.
Okay, so FLIF is the leader in the single pixel category of the image encoding competition. If only this was some kind of important competition :)
But still, FLIF will not be the leader. Remember the minimalist format I mentioned? One that will encode one pixel into 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 it's an uncompressed image format from the 1980s. Here's how you could encode a single white pixel in PBM with just 8 bytes:
00000000 50 31 0a 31 20 31 0a 30 |P1.1 1.0|
Yes, a hexadecimal dump is not needed here, 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 comes 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 one pixel of any color in just 12 bytes, or PPM at 14 bytes. This is always less than the corresponding FLIF (or any other compressed format).
The traditional family of PNM formats (PBM, PGM, and PPM) do not support transparency. There is a PNM add-on called Portable Arbitrary Map (PAM) where there is transparency. But for us it is not suitable due to its verbosity. The smallest PAM file 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. A total of 67 bytes. It would be possible to use grayscale with an alpha channel instead of RGBA, which would save two bytes in the data section. But the file will be 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 vs. 14 to 18 for FLIF), and with transparency the smallest will be FLIF (14 to 20 bytes for FLIF vs. 67 to 69 bytes for PAM).
Here is a comparison table with optimal file sizes for different single-pixel images:
