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
Are you considering the size of the image on your screen? Because a very small, low resolution image will look the same clarity as a large high resolution image.
There is also the effect of supper sampling, when scaling down a large image to a small one, you can take the average of many pixels to form one. This creates a very good anti-aliasing effect, making the image look much less jagged and clearer. This also removes the .jpg compression artifacts that appear on sharp edges such as in vectors. Check if you are storing the small version as .jpg or .png, .png will use slightly more space but it will leave artifacting out.
When you say lower resolution, do you mean it looked blurry? I take it the size in pixels was the same.
Depending on how the downscaling is performed, it may not just reduce the resolution of the image, but rather take the data from the higher resolution image and find the next best thing by modifying how it’s displayed at the lower pixel count at the size the image is compared to just decreasing the resolution of the original in image editing software.
You have more information to work with, so which pixel is which colour or average of multiple colours if there is interpolation going on will be different than just reducing the resolution. You basically start from having more information than you need to approximate something at a smaller number of pixels that look good whereas if you reduce the actual resolution, you are removing that information. Just as a hypothetical case, say you’ve got red and green next to each other in the image, a downscaling algorithm may make some pixels some manner of yellow, or darker/lighter shades so that the two parts look better together.
It may be doing something similar to cleartype for text, but for images: https://learn.microsoft.com/en-us/typography/cleartype/ IT gives a good example of how you can make use of not just the image you want to display, but also the information on how a monitor is made to improve how something looks at the same “resolution”.
Side note, most monitors have a RGB subpixel layout and cleartype is optimized for that layout. A few monitors are BGR and cif cleartype is enabled, text actually looks worse with it. Pixel interpolation downscaling can also sometimes go a tad awry too and the result doesn’t look as good.
ETA: Different downscaling algorithms will have results of varying quality depending on the image.
A device can pack more pixels in a given area leading to more detail. A basic monitor might have around 83 DPI, while a small but sharp display can have 120 DPI or more. Most images carry a tag that describes the relationship between pixel count and physical size.
Usually an image is displayed on screen 1 to 1 disregarding the resolution. A higher resolution screen would show most images smaller. But some software made for print can actually scale it to take into account the pixel density of the monitor and maintain the intended dimensions of the image (in inches or centimeters). PDF documents usually have the resolution of embedded graphics noticeably reduced, but the elements still line up because they get stretched accoridng to the saved resolution tag.
If you output your graphic with lossy compression, its fine features might be somewhat smudged. But if you have more input pixels the artifacts will also be proportionally smaller and harder to see.
Pixel dimensions is about measurements, resolution is about density.
Lets suppose you have the same image, a portrait picture that’s 1200 x 1800 px
If you print it at a resolution of 300 dpi, you’re gonna have a picture of 4 x 6 inches, but if you print it at 600 dpi, you’re gonna have a picture that’s 2 x 3 in. Inversely, if you print it at 75 dpi, you’ll have a very pixelated 16 x 24 in. picture.
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.
The “virtual” CSS measurement is the last piece of the puzzle I was missing! I thought that measurement was literally the computer counting the number of pixels so it would always be the completely accurate no matter what.
Latest Answers