The objective is not have article images look good independently of the hardware and browser. The objective is achieved if images of an article that look good on the authoring machine also look good on any other machine, if displayed at all.
The background image of this article looks good independently of the hardware and browser.
Solving the The Resolution Switching is to answer this question: depending on the hardware resolution, which version of an image should be served to the client?
A solution to the Resolution Switching Problem is to tell the browser which image to use depending on the hardware. For instance:
- if the screen width is under 600px, then: use an image with a width of 480px.
- if the screen width is over 600px, then: use an image with a width of 800px.
A quantity of CSS Pixels is given when one writes, for instance:
The Device Resolution is the number of device pixels per CSS pixel.
The same image may be represented using different files using different numbers of pixels. For instance: 300 × 300, 600 × 600, 1200 × 1200, etc.
Given this CSS:
which image should the browser choose? 100 × 100? 200 × 200? 400 × 400?
It depends on the device resolution:
- If the device resolution is 1, then: 100 × 100 ;
- If the device resolution is 2, then: 200 × 200 ;
- If the device resolution is 4, then: 400 × 400.
For a given image, the solution is to give the browser different options to choose from, and let it fetch the appropriate resolution depending on the device resolution.
Layout is the visual arrangement of elements on the screen.
Solving the Art Direction Problem is to answer this question: depending on the layouts, which version of an image should be served to the client?