Artikel

Confusion about RESOLUTION in images

What the term 'resolution' means is defined by the context and there are many!

This vast topic could easily fill a book. Let's try to keep it brief, touch the most important areas:

Print vs. Web vs. Screen vs. Camera

Everything that has to do with Online or Digital is purely defined by pixel dimensions width x height. The more pixels a digital image has the more information (color/details/etc) it will contain. Let's assume you have a digital camera that takes photos with 3.000 x 2.000 pixels (width x height) which makes 6 millions of pixels of information describing what you photographed. Roughly that would be a 6 MB camera ... please allow this simplification of the Megabyte calculation and rest assured, I am aware of bits and bytes and how to calaculate it precisely but this is not the topic here.
So, a resolution of 3000x2000 OR 6 MB refers to a camera's resolution. The more pixels the better, because e.g. if you take a photo of a colorful flower with lots of gradients then you can distribute these information among more pixels that are a kind of storage cells and each contains a specific information of the photo - the more you fill the greater the clarity and detail of your photo.

Now let us talk briefly about Computer Monitor Screens and their Screen resolution: if it is set to a maximum resolution of 800 x 600 then you will have a hard time to see the above described 3000x2000 pixel photo because our photo has roughly 3.5 times the number of pixels in width and height than the screen has. But if you have a modern screen it might have a resolution of 1680x1050 or even way more. However, it's still not enough to display the entire photo we have taken because we would need a screen with a resolution of... how many pixels? Correct: 3000 x 2000.
Note: we are not talking about displaying the picture in a picture viewer because this piece of software actually shrinks the image to a size that fits on the screen.

That's why we need to re-size images for display on screens and especially on a website because a website will display an image exactly the size you have created it.
To set the HTML IMG tag's attributes 'width' and 'height' OR using CSS rules to resize you image is not recommended because you do not re-size the image ! You just display it smaller but the actual image will be downloaded as saved and therefore you waste bandwith.
What you must do is re-size the image with an image editor like Adobe Photoshop or similar ones.

Web Image resolution: 72 ppi / dpi? - does it matter? Where does it come from?

To create a web image in a 72 ppi (pixel per inch) resolution has become kind of a non-questioned web standard, however, it actually does not matter for screens because there is no such thing like a 'inch', right? Screens -as outlined above- display pixels horizontally and vertically. Monitors might come in physical sizes of 17 inch or 19 inch or larger but how large (in actual inches) you will see an image on the screen depends also on what your screen resolution setting is for your monitor. You can have a 21 inch monitor and run a 800x600 pixel resolution or may be 1680x1250 and higher. This chosen screen resolution will determine how much you can see on your screen because you place more or less pixels (I referred to them as information storage cells) on the available 'real estate' of your monitor. The higher the Screen resolution the smaller any given image will appear on the same monitor. That means that you should decide for larger monitors if you want to run high resolutions otherwise everything looks may be too tiny.

Example: if you have a screen resolution of 1680 x 1050 (which is common for Notebooks) and you have an image with a dimension of 840x1050 pixels embedded on a webpage then it would fill your screen vertically 100% and horizontally 50%. Note: This is a simplified, abstract example that does not take the dimensions for the browser bars etc. into consideration that would prohibit to display the full length of the image.

The 72 dpi/ppi (dots per inch / pixel per inch) term was coined a long time ago when Apple came up with the graphical user interfaces and the representation that their screens were set up as: 1 dot (printer terminology) should be represented (size-wise) as 1 pixel on a screen. Because 72 dots would make up 1 inch (1 dot is defined as 1/72 of an inch) on a printer and the same was the case on the early GUI monitors making it 72ppi. Windows systems and monitors soon settled for another internal resolution: 96ppi.

Anyhow, 72 ppi became the de-facto standard for creating web images but actually it is irrelevant!
... it doesn't matter because -as explained- the screen just counts pixels and how large an image appears on a web page (screen) depends on what screen resolution you have chosen for the physical size of your monitor screen.

Make the test: take an image 300x200 pixels and save save it twice, once with the resolution setting 300ppi and once with 72ppi. On the screen it appears just as a 300x200 pixel image, your screen doesn't care about the 'image resolution' you had chosen.
However, if you would download the 300ppi version from the web and print it directly (w/o changing the resolution in a photo editor software) it would print as a miniature image. Anyhow, if you print the webpage from the browser menu then you are fine!

Photoshop dialogs for Image Size and the Save for Web dialog

Kilo-Byte thoughts: 300x200 pixel are 60.000 pixels of information and this is one factor (among others like color-depth, compression, etc.) that determines the kilobyte size. In Photoshop you have the 'Save for Web...' dialog and this will take care of most things you have to consider for images used in websites. The dialog will automatically set the embedded resolution to 72 by still keeping your previously selected pixel dimensions. It will offer choices for file compression (=quality setting), file type, color-depth, etc.
A preview will show you the overall quality of the image.

Now you will say: "But my Photoshop has also an 'Image Size' dialog with a field where I can set the resolution for an image". Correct!. However, the dialog has two sections, the upper one talks about 'Pixel Dimensions' and the lower about 'Document Size':
The latter refers to print media not screen media. Anyhow, if you change the resolution from 300 to 72 you see that the actual pixel dimensions in the above fields shrink accordingly. That's re-sizing of images and it could actually done by just typing in the pixel width and height w/o doing it via the resolution field. So, why are we doing it anyway? Because it gives us the feel that we adapt to the standard term of 'screen resolution is 72 ppi'.
Remember: there is no such thing like 'inches' you can 'hard-code' to an image made for a screen: make the test: create a 72 x 72 pixel image, save it with a 72ppi resolution and display it on different screen sizes. Measure it with a ruler and you see it will vary from screen to screen and if you change the screen resolution it varies as well.

In the online world forget about inches and think in pixels!

This said, even if you know now, what the difference makes, you should still save your web images in a '72ppi resolution' ... because everybody does it and because the Photoshop dialog 'Save for Web' does it anyway.
This is industry standard, reduces confusion and if you don't do it you will look unprofessional.

But image resolution counts anyway, otherwise, why would we read 'high-resolution' images etc.?

Correct - but it counts only for print media. Once you want to print an image you must embed the information for the printing device how many pixels of your width and height you want to print on one inch of paper. The more pixels you squeeze in 1 inch the sharper your image will look when printed. However, the printer will translate this into dpi (dots per inch) or convert it otherwise, depending on the printer / publishing technology. 300 ppi is a value for high-quality and your PhotoShop dialog will translate this into width by height inches for you in order to allow you to estimate how large the photo will be printed.

72dpi / 96dpi internal resolution

Apple and Windows systems might still differ in the internal resolution setting. By analyzing an image, e.g. looking at the file properties (Tab 'details') on a Windows (Vista) system you can reveal something like 'Horizontal resolution: 96dpi'. It tells only what your screen settings are and not what your actual embedded image ppi setting is.
Yes, and browser manufacturers have allegedly once settled for 96dpi no matter what platform. Also, when it comes to printing from a browser that internal setting plays a role.
However I do not make any assumption if this is still the case or if they have disagreed on that again - as always in the field of web design, lots of testing has to be done when it comes to different platforms and browsers. This said, yes, the internal resolution of either 72 or 96 dpi has still a meaning, especially when it comes to point sizes of fonts...
When 1pt font size is defined as a height of 1/72 inch then a 12pt font displays on a 72dpi internal resolution as a 12px high font. On a system that settles for 96 dpi a 1pt would be represented as 1 and 1/3 pixel making the 12pt font a 16px one on a screen.
Certainly, if you define a font size in your CSS stylesheet as points (e.g. 12pt) then it might have an impact on the displayed size in a given browser on Windows or Apple systems but this is another topic...

Changing DPI setting for your monitor and influencing the size of fonts

Ok, this has now nothing to do anymore with web design techniques. I still mention it because it reveals a little bit where this magical 96 dpi comes into play on a monitor: Here's the place to go on a Windows system (this is the actual help text in case you want to look further, just type 96 dpi into the Windows help system):
Click to open Personalization.
In the left pane, click Adjust font size (DPI). If you are prompted for an administrator password or confirmation, type the password or provide confirmation.
In the DPI Scaling dialog box, do one of the following:
To increase the size of text and other items on the screen, click Larger scale (120 DPI)–make text more readable, and then click OK.
To decrease the size of text and other items on the screen, click Default scale (96 DPI)–fit more information, and then click OK.
To see the changes, close all of your programs, and then restart Windows.

Hope I could clarify some things...

but I am aware that it still sounds confusing.