How do pixel dimensions relate to resolution?

Question

I’m a professional graphic designer. 4 years of college and 3 years of job experience have not been able to explain this.

Why is it that two images with the same pixel dimensions can be different resolutions? As I understand it, a pixel is one dot of color in a larger image, and resolution is a measurement of pixel density, so two images displayed at the same size with the same number of pixels should always be the same resolution.

I created an image for an email signature at about 1200 pixels wide. When implemented, the computer scaled it down to 299 pixels wide so it would fit, and it looked perfectly crisp and clear. This part makes sense to me.

To minimize the load time and storage for the image, I scaled it down to 299 pixels wide in Photoshop – exactly the same size it was in the signature – but it came out far lower resolution than it was on the email signature.

How can this be? This isn’t the first time I’ve encountered this issue. In fact, I run into it so often that I normally avoid using pixels as a measurement for images entirely. I’ve googled it many times with no solid answer. I struggle to understand why we even bother measuring images in pixels if the measurement doesn’t mean anything.

In: 6

Answer 1

Are you aware that CSS pixels and device pixels are not the same thing?

I’m currently using an iMac with a Retina display. It has 218 pixels per inch.

But when I “measure” the size of an image on a web page – including an email (since emails use HTML / web tech as well) – it measures in CSS pixels, which are kind of a “virtual” measurement defined to be 96 pixels per inch.

So if you have a space for an email signature that’s approximately 3 inches wide, then in HTML or CSS it will say that it has a dimension of around 300 pixels.

But, your monitor can actually display twice as many pixels in each dimension! So if the source image is 600 pixels wide, then your web browser or email client will actually display more than 600 pixels in that same 3 inches, because that’s what your monitor natively supports.

I strongly suspect this is the real issue!

To test this theory, take a screenshot and then open the screenshot in Photoshop and measure the actual pixels. I’m guessing that your 3 inch email signature is actually 600+ pixels wide in the screenshot.