Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

"Pixel" always confuses me whenever I do web banner work. I use coreldraw x5 for my work. I usually prefer to use inches rather than pixels as inches are much intuitive for me. But when i do "Inch to Pixel" conversion, i get confused. In CorelDraw: 1 inch = 300px at this website http://auctionrepair.com/pixels.html: 1 inch = 75 pixels at this website http://www.unitconversion.org/typography/inchs-to-pixels-y-conversion.html: 1 inch = 96 pixels.

Now my client is asking for 1900x1200 px from where should i do conversion? Sorry if my knowledge about size is really dumb :P

share|improve this question
13  
"Pixels have no size" @Scott –  Ilan Apr 16 at 16:02
5  
A dot on a screen is a pixel, and screens may be 72ppi, 75ppi, 96ppi or 120ppi or whatever. Those densities depend on the physical size of each light-emitting dot. A screen measuring 1900x1200 will have physical dimensions which relate to the physical dimensions of each light-emitting dot. A dot on a printer may well be 300dpi. Conclusion: there's not much correlation between pixels and inches. –  Andrew Leach Apr 16 at 16:08
1  
en.wikipedia.org/wiki/Pixel –  Ilan Apr 16 at 16:14
2  
A pixel is just the smallest "segment" of a solid color. For example if I have a square and evenly divide it into 4 smaller squares, and make each square one color, I can scale it to a 5 inch by 5 inch square, or a 15 inch by 15 inch square, but either way there are only 4 "segments". so the segments themselves can be any size, but how many "segments" (pixels) you use can determine resolution.. try drawing the MonaLisa with only 9 blocks of one solid colors... horrible resolution.. do it with 10,000,000 blocks (pixels) and it's good resolution. Pixels can't convert to inches. –  Albert Renshaw Apr 16 at 19:15
    
"try drawing the MonaLisa with only 9 blocks of one solid colors" we did this in art school with casein. –  horatio Apr 17 at 16:06

14 Answers 14

Just think of pixel like Atom, Atom is a smallest particle of matter. Where as Pixel is a smallest particle of Digital Image.

Atom has Neutron, Proton & Electron where as Pixel has Red, Green & Blue values :)

Number of pixels per Inches or CM etc... is called the Resolution

Higher Resolution means More pixels per unit of length like.

If you are designing for Web / Desktop the you can say 1 Inch = 72 Pixels

for offset printing usually 300 Resolution is used, you can 1 inch = 300 Pixels

Printing resolution is called DPI which means Dots per Inch. Pixels are the dots. The higher the number of dots the finer the printing result.

Now my client is asking for 1900x1200 px from where should i do conversion?

If your client is giving you the dimensions in pixels than It must be some thing for desktop / web and you can design it on 72 resolution

If he require some thing for printing than you must ask him either the resolution or th size in Inches or CM etc...

share|improve this answer
11  
Atoms = pixels. What a fantastic analogy! –  TorpedoBench Apr 16 at 17:20
4  
en.wikipedia.org/wiki/Subpixel_rendering splits your atoms –  Pete Kirkham Apr 16 at 22:59
3  
@PeteKirkham Atom has Neutron, Proton & Electron where as Pixel has Red, Green & Blue values :) –  Fahad Apr 17 at 1:50
    
And they have Quarks. Atoms were a bad analogy IMO if OP was talking about smallest particle (which he did). –  user1021726 Apr 17 at 7:19
1  
@user1021726 quarks are not a problem. Subpixels also have internal structure, e.g. two polarizers, liquid crystals between, thin film transistors creating electric field to change state of liquid crystals — these could be named "quarks" in the analogy used here. –  Ruslan Apr 17 at 8:47

If a client of mine asked for a 1920x1080px image, the first thing I need to know the intended use. Is it for the web, print, or both?


In the print world, a pixel (or picture element - [pict-el]) has no meaning or definition. Pixels can not be measured in any way. They have no predefined size or unit in order to calculate their size. Therefore are not a "real world" term. They are strictly a digital term and only refer to the digital world.

In the broad sense, a pixel is the small spot on a screen or monitor that is colored by light, either backlit (CRT), LED, Plasma, or other technologies. Each of these small, different colored, spots (pixels) when set together form an image to the human eye. To use a real world analogy, think of it like a brick wall... each pixel would be a brick... the image would be the wall.

In many apps, and for many people, 1 Pixel = 1 Point. (Adobe even uses this theory.) However, this isn't entirely accurate either. A point is simply the smallest unit of measure used by most designers in the real world, as opposed to digital world.

There is no such thing as 1 inch = 72px or anything even remotely close. Every screen on earth has a different pixel density. How many pixels fit into an inch is entirely dependent upon your monitor's pixel density.

When working in Photoshop for the web, what you input into the Resolution field for a new document is largely irrelevant. An image destined for the web (or screen) will use it's pixel width and pixel height and not reference the Resolution setting at all. See here for more information on resolution (ppi) and the web/screen: is it mandatory to keep 72 dpi for web design? What if I create in 200dpi? For the web, the only difference the resolution field offers is it allows you to create more detailed work in Photoshop. But upon output, the resolution field is ignored, using Save for Web. If you use Export rather than Save for Web then the resolution is used to alter the pixel width and pixel height of the image based upon your Operating System of all things. Macintosh applications assume that each inch has 72 pixels in it and Windows application assumes each inch has 96 pixels in it. Neither of these are really accurate or true, but the engineers had to use something. So a higher resolution upon Export will result in a larger pixel width and pixel height.

Now where print meets pixels..... resolution or dots per inch (DPI). DPI is essentially the dot density which is created by an imagesetter (or platemaker) when outputting printing plates. All images being printed need to go through a halftone processes. In addition to a specific line screen or Lines Per Inch (LPI) which determines how many rows of dots will be printed. The density of the dots in the halftone determine the level of detail and quality in the image itself. A halftone with a higher DPI and LPI will look much better than a halftone with a low DPI and low LPI. If searching for any correlation between screen and print, the most common place user find a little bit of logic is thinking that 1 pixel = 1 dot. This isn't entirely accurate, but it's close enough that it's not an issue if this assumption is used. This is where people interchange the terms PPI and DPI thinking they are the same thing. In reality, they aren't the same at all, but there's no great harm in thinking they are.

For print work, the Resolution field in Photoshop's new document window is critical. Most often you want a resolution of 260 or better for print images. This equates to 260DPI which is the optimum setting for 175LPI (a common line screen). 300dpi is used most often because it's a nice, even, round number to remember and more DPI is never a problem. The overall calculation is actually 1.5 times the LPI equals the DPI. So 1.5 x 175 = 262.5. So it's rounded up to 300dpi.

If you know the intended use.....

  • If it's for the web or screen, just create a new document at 1920x1080px and whatever resolution you want. A higher resolution is going to allow you more detailed work in Photoshop, but it's not going to change the web/screen output of the image. Regardless of the resolution (ppi) the image will still output at 1920x1080 pixels (using Save for Web).

  • If the image is for print or both, I'd use Photoshop to give me an idea of the physical size when printed. Simply create a new document with the 1920x1080 measurements and insert 300 for the resolution.

enter image description here

Now switch the "pixels" drop down to Inches:

enter image description here

This is using Adobe's internal 1px = 1pt theory, which is as good as any. But it gives you a general idea that the image will be roughly 6.5"x3.5". I'd then check with the client to verify that a 6.5x3.5" image is going to fit their needs.

Hi [client],

A 1920x1080 pixel image equates to roughly 6.5x3.5 inches for print production. Is that size going to work for you? Should I go larger for print?

Thanks!

share|improve this answer
1  
Perhaps I'm misreading, but isn't this: So a higher resolution upon Export will result in a larger pixel width and pixel height. the opposite of what will happen? Don't higher resolutions result in smaller pixels upon export? –  rockerest Apr 16 at 19:04
2  
No. A pixel is a pixel, there's no such thing as smaller or larger pixels. Pixels have no size. Higher resolutions result in larger images upon export. If an image is set at 300ppi, that's 300 pixels per inch, but at 72ppi (Mac) that's only 72 pixels per inch, or at 96ppi (Win) that's 96 pixels per inch. When exporting there is no "per inch" so pixel density is not a factor and pixels must be laid side by side in columns and vertically in rows. Naturally 300 items is going to take up more width and height than 72 or 96 items. –  Scott Apr 16 at 19:44
2  
@scott there are actually different sized pixels...but that is in the context of the display hardware (screen) rather than image data. In that sometimes 1px (image data) is translated to 1px hardware, one could say that pixels come in different sizes. In addition, you can often change the pixel resolution of your screen, so you are, in effect, changing the 'size' of the pixels. I know that's being a bit pedantic, though. –  DA01 Apr 16 at 22:49
2  
Agreed. The confusion is context. If we're talking image data, it's one thing, if we're talking hardware displays, it's another. WHO'S IDEA WAS IT TO USE THE SAME TERM FOR BOTH!? :) –  DA01 Apr 16 at 22:58
2  
WARNING: If they want full HD then they might use it for a video frame! In which case its a totally different soup. –  joojaa Apr 17 at 12:18

There is a computer science paper (really, fun memo) titled, "A pixel is not a little square" by Alvoy Ray Smith.

A pixel is a point sample. It exists only at a point. For a color picture, a pixel might actually contain three samples, one for each primary color contributing to the picture at the sampling point. We can still think of this as a point sample of a color. But we cannot think of a pixel as a square—or anything other than a point.

A Pixel Is Not A Little Square,
A Pixel Is Not A Little Square,
A Pixel Is Not A Little Square!
(And a Voxel is Not a Little Cube)

share|improve this answer
    
Probably much more than the original poster needed, but an interesting read for web graphics nerds! –  AmeliaBR Apr 17 at 1:23
    
The OP asked for "exact" explanation. I do not know a more exact one. :) –  John Zabroski Apr 17 at 5:30
    
yes thats right and this is a issue even adobe is suffering from... Its a very important concept. And by the way adobe does not give you the option or the windowed sinc filer that is clearly superior. –  joojaa Apr 18 at 8:27

The term "pixel" is short for "picture element".

An image has consists of pixels, which are just colored dots in a rectangle, with no size.
To show the image, we use a screen that can show colored dots, and need to decide which dots we want to show where.


Looking at the details, the image consists of separate dots, each with a separate color. Like when you would fill the boxes on quadrille paper with colors, one in each box. Except - important - that there is no paper (that has a size), and the boxes have no physical size. It's only about which color dot is below or right of which other.

If you think about the size of the image on the screen, that is like showing this "paper" on the screen - but we have no idea how "large" it actually is, in terms of inches or mm.

When we want to display the image on the screen, we see the screen also has "boxes" that can show colors. Both are called pixels - but technically they are something different.

Simplest thing we can do is assigning each of our colored boxed form the "paper" to a colored box on the screen.
Then, the size on the screen, in actual real centimeters, depend on how large these dots of the screen are.

If we need a certain size, we can do something different:
We can either just decide ourselves how large the image should be. We need to know how large the screen dots are. Then, for each row, we can calculate how many screen dots we can use for our color dots. To make it fit, if we have more screen dots than color dots, we need to use some color dots multiple times, or if we have less, leave some out.

share|improve this answer

One more confusion to complete the discussion:

In website design and layout, one "CSS pixel" is always equal to 1/96th of a "CSS inch", regardless of screen resolution. This was done because so many early websites used pixel-based measurements for layout assumed a standard screen resolution. In order that the actual size of text and other content remained consistent, web browsers find an approximately even conversion between screen pixels and layout "px" units, and adjust their interpretation of inches so there is always a consistent ratio between "px" and "in". The same goes for all units that are based on inches, such as "pt" for font -- 12pt font-size is always equal to 16px font-size.

Now that screen resolutions are commonly much better than 96px-per-inch, the concept of "dots" has been borrowed from the print world to talk about actual physical resolution of the screen. There's even a dots-per-pixel (dppx) unit for describing physical resolution proportional to the standard CSS pixel. For example, the new "Retina" Mac & iPhone screens are 2dppx resolution.

For your situation, I echo the advice of others: ask you client to clarify what is needed. That said, generally if someone is asking for art with pixels measurement, they are using it for websites. Create your image at exactly the pixel dimensions they ask, and set your image-editing software to use a resolution of 96dpi in order to lay out your rulers and text size in units you are comfortable using.

That said, it might not hurt to actually create your image at twice that resolution (i.e., 192dpi), in order to have a version suitable for Retina screens if your client discovers that they want it. Then, your image software should have an easy way for you to save your image at a lower resolution & smaller file size. It's much easy to convert an image to a lower resolution than the reverse!

share|improve this answer
    
While true, CSS Pixels are a unit of measurement specific to CSS, so really aren't related to the concept of image pixels. –  DA01 Apr 16 at 22:55
    
True, but any client who is asking for work in pixel sizes is probably using it for the web. I certainly did not mean to present this answer as a replacement for the others, only as something else to add. –  AmeliaBR Apr 17 at 1:19
    
@AmeliaBR: I think it is important information, the OP is asking from a position of naive ignorance and there are so many facets to the issue, especially when trying to pick up the information informally. –  horatio Apr 17 at 16:09

Inches are physical dimensions while pixels are screen dimensions. At the same resolution, a pixel is physically bigger on a larger screen, as the density or PPI (pixels per inch) is controlled by the screens physical size vs resolution. So when converting pixels to inches, it all comes down to what you want your pixels per inch (PPI) to be. If you want 300ppi (standard for print), you are simply saying "squeeze 300 pixels into a real world inch". This results in a denser quality than if you were asking for 72ppi, as less pixels equals less quality information crammed into that inch.

Screens are typically considered 72ppi, but this is just a default and is completely irrelevant to the actual size of your screen. The same 1920x1080 resolution could be 10ppi on a stadium screen or 400ppi on a mobile phone.

share|improve this answer

A pixel has no correlation to real world measurements. As such, there is no way to convert inches to pixels in any consistent way. It's all arbitrary and dependent on what you're doing to do with the image int he end.

What is a pixel in the context of a digital image? It's the smallest unique element within the image. It will have a color assigned to it. Literally it refers to an individual "picture element".

share|improve this answer

Imagine you have a light bulb that you can switch on and off. This is basically a 1x1 pixel display, where the light bulb is the pixel. Now buy a few more light bulbs and arrange them in a square 10x10 fashion. If you wire them in a way that you can switch each one of them on and off as you wish, you have a crude display with 10x10 "pixels". You can even draw basic shapes on it.

Now if you move away far enough from this light-bulb-display, the eye can eventually no longer distinguish between those individual light bulbs and all you will see is a continuous shape instead of individual pixels. This happens, because the eye has a limited scanning resolution, if there are more dots (light bulbs) per inch than the eye can recognize, the pixels turn into an image. The resolution of your eyes is about 300 dots per inch (DPI). If you take a magnifying glass and have a look at your monitor, you will see that it is composed of tiny light bulbs as well (LCDs), just many more. About 2,073,600 (1920x1080) on a full HD screen, times three, as there is one for each RGB color, that your eyes just can't see, as they are too tiny.

Now obviously what your eye can perceive as individual dots or not depends not only on the arrangement of the dots (how close they are together) but as well on the distance you are to that "screen". That is why DPI is a relative term in several ways. If you take the same screen and get too close, you can see the pixels. If you are too far away, you can no longer read whats on the screen, even though the DPI and resolution (amount of pixels) never changed.

For this and several other reasons during the creation of the first computer monitors a standard resolution of 72 DPI (Apple) or 96 DPI (Microsoft) was chosen. This is a good compromise between the distance the user is expected to be away from the screen and the technical limitations from that age. But even today, most screens follow that resolution approximately. That is why the larger the screen the higher the amount of pixels.

Now if you know the DPI resolution of your monitor, it is very easy to figure out how many pixels are in each square inch. If you for example want to draw a 1x1 inch² square on a monitor, you can easily determine how many pixels this image has to be (72x72 or 96x96). But it is as well obvious, that this image will be larger or smaller on other screens that do have a different DPI resolution. Text that is readable on a 24" screen at 96 DPI might be way too tiny on a 4" iPhone at 300 DPI, because those 96 pixels (1 inch) on the 24" is just a few mm on the phone.

So if your client asks you to create an image at 1900x1200 px, the first questions from you should be: for which device?

To solve the dilemma of web pages or applications which are supposed to look good on different devices, formats have been invented that do not work with pixels but with a length in cm or mm. The resulting image is then rendered according to the device capabilities, ensuring that a 10x10 cm square is still 10x10 no matter on which screen it is displayed. But this format can obviously not be a pixel format, but will be a vector format.

While this solves the Mac/Windows/Other issue, it will not solve a huge size difference. You example image will be 10x10 cm on each device, but that might cover the entire screen on a mobile phone. This problem is not yet entirely solved, but most companies have some form of solution for it. But in most cases you actually need to develop at least two pages, one for standard desktop, one for mobile phones and eventually one for tablets as well.

share|improve this answer
    
I was curious about the visual acuity statement. At 50cm (about 20inches), the smallest black line/white line pattern a person with "superior vision" can distinguish is approximately 100 micrometers (the width of a human hair). 300dpi has an approximate dot spacing of 85 micrometers. –  horatio Apr 17 at 21:41
    
Page 94 ( books.google.com/… ) –  horatio Apr 17 at 21:42
    
300 dpi is the average human. There are people with better eye sight, but at this resolution it rarely matters, since most people have already trouble to see individual pixels at 100 dpi. –  TwoThe Apr 17 at 22:01
    
I think my link confirms what you say except it seems your definition of "average" is what they call "superior" –  horatio Apr 18 at 15:09

There are already a bunch of helpful answers, but I wanted to maybe explain this a different way.

By requesting a 1900x1200 pixel image, your client isn't actually telling you anything about the dimensions they need. Forgetting about the word "pixels" for a moment, the client is simply telling you how much detail they need (ie. the resolution). They may simply intend to size it themselves as they require.

If you need to use inches for your own purposes, since you find that measurement easier to deal with during the development of your graphics, then simply use them. Using vector graphics (Corel Draw is a vector tool), you luckily don't need to worry much about pixels until it comes time to save flattened images.

To be safe, start with a canvas size of the same aspect ratio: 1900x1200 is a 16:10 ratio, so 16 inches by 10 inches should work out. When it comes time to save or export a flattened image (a "raster", or bitmap), you can choose the 1900x1200 pixel dimensions.

I'm not familiar specifically with Corel, so I can't tell you exactly how to enter these settings, but they are in all likelihood there.


As for "what is a pixel", the answer that said it's akin to an "atom" is pretty good. Though if we want to be completely anal, we could more accurately say a pixel is a molecule:

A molecule is the smallest part of a substance that still exhibits the properties of that substance, and a pixel is the smallest part of a color that still exhibits that particular color. Getting smaller than that, you start to see the other colors that were mixed in order to achieve the target color.

Pixels can be spaced out in all sorts of ways, hence their not representing any real dimension. In print they can be 300 dots-per-inch (DPI), in which case the pixels are very close together -- or on screen they can be 72 DPI, meaning they are further apart. I have to assume that 1900x1200 is intended for a screen, by the way, as it's one of the standard screen resolutions. In that case, it will look the same no matter how many inches in its dimensions, so long as it's displayed full-screen on a 1900x1200 monitor.

To cap this off, the pixel dimension, technically speaking, only tells you how much information the stored image will contain. As for how big it will look, it tells you basically nothing on its own.

share|improve this answer

TL;DR Do the conversion when you export your Corel Draw image to a .tif file.

There are two ways to describe an image on a computer: bitmaps (also known as rasters) and vectors. A bitmap is a grid of coordinates that each have a specific colour, and each point is a pixel. The combination of all the points in the grid creates an image. Photos are bitmaps; the pixels correspond to the grain of the film or the points on the sensor. Pixels have no intrinsic size: they can be very small in a laser printed image, or very large on a giant display screen. The size of an image in pixels tells you about the resolution at which it will look smooth. Images with a high pixel density (dots per inch, dpi) look sharp, while those with a low pixel density look blocky. To see the difference, compare Flickr to Minecraft. Magnifying a bitmap image makes the pixels appear bigger, and the image becomes blockier and less sharp.

Vectors are mathematical descriptions of shapes that are arranged in an image. They also have no intrinsic size, but the way in which they behave is different. A vector graphic's appearance doesn't change as you zoom in, because it's recalculated to match the screen.

Corel Draw is a vector graphics program, and the images that you make are therefore vectors. If your client wants a 1900x1200 image, you'll need to convert that to a bitmap when you export it. The key thing is that the size of the vector and the size of the bitmap are independent. You can make a Corel Draw file that's eight feet by six, and export it as a 400x300 pixel image. Or a file that's an inch square in Corel Draw can be exported as a bitmap that's 10,000 pixels square. However, rather than asking for pixel dimensions, programs typically ask you to specify a size and a resolution for the bitmap, although you can change the units to pixels. This lets you make sure that the file will be a reasonable resolution at the size you want. By asking for a particular resolution your client wants to make sure that they can use the image at a large screen size or small print size. The idea of a digital image having a physical size is kind of strange, but it's easier to work with downstream.

So make your graphic at whatever size you like and then specify the pixel size right at the end when you export it. One thing to watch out for is if you include any bitmap images in the graphic, they will need to have at least as high a resolution as they'll need to be in the final image. So if half the width of your graphic is a photo, that photo needs to be 950 pixels wide.

share|improve this answer

Pixels in CSS (and not as a technical property of a display medium) are units of apparent angular width. So it is possible to convert pixels, but only to degrees, radians, etc. You can convert a pixel to an inch, but you need to know how far away the inch is.

Sean B. Palmer has a nice page on this:

The moon from earth is about 24.3px wide, for example. The Eiffel Tower from a mile away is about 550.5px tall. That means that when you do “{ width: 24.3px }” in CSS 2.1, you're making something as wide as the moon looks to be.

share|improve this answer

A pixel is the smallest point in an image. It has no physical size. It gets one when you specify the resolution in DPI (dots per inch) or similar unit, and render it on a device that honors this resolution.

In practice, there are many occasions when the size is arbitrary because the designer or software didn't care/didn't know about display size/resolution, and/or applied a resizing factor to fit on the available surface.

Remember: a pixel has no predefined size. Unlike a pica.

share|improve this answer

PSD Tuts has a video that explains the relationship between pixels here

Pixels

share|improve this answer
1  
I didn't downvote, but I suspect it is because the full content of you answer is in a link to another website. If you can summarize you'd have a good answer. –  horatio Apr 17 at 16:11

Pixel is the smallest form to display design for a display unit. Ex: An Display monitor consists of several pixels which form a display on your screen.

share|improve this answer
    
Hi there, and welcome to GD! This answer is a little short on content. Please edit it to be more informative and clear, as it does not add much to the other answers here. –  Random O'Reilly Apr 19 at 17:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.