What you see is not always what you get
The eyes are the Windows to the soul and a way of deceiving you.
Suppose I give you a picture, do you think you can see all the details with the naked eye?
A clear picture on the screen
The naked eye on the screen to see the sharpness of the picture is determined by three factors, one is the picture pixel itself is fine, two is the screen resolution, three is the screen size.
Let’s analyze their relationship step by step:
Screen resolution
The screen resolution is the device resolution, the device pixel, which is the physical pixel, for example, the new iPhone7, the screen resolution is 1334 x 750 pixels, 326 ppi.
Image size
If you have taken the course Digital Image Processing, you are familiar with the following explanation.
A bitmap is made up of pixels, the smallest unit of information in a bitmap, stored in an image grid. Each pixel has a specific position and color value. From left to right, from top to bottom to record the information of each pixel in the image, such as: pixel position on the screen, pixel color and so on. Bitmap image quality is determined by the number of pixels per unit length. The more pixels per unit length, the higher the resolution, the better the image.
Assuming that the image size of the logo above is 1334 x 750 pixels, which is the same as the iPhone7 screen resolution, a pixel of the image corresponds to a pixel of the device, which is a full fidelity display. Because a position pixel can’t split further, I think it should be very easy to understand this point, namely a radish a pit.
Screen resolution and screen size
Most of you will be familiar with this setup, and some of you may be more familiar with XP, or even Windows 98 (which accidentally revealed your age), but improving screen resolution on Windows usually requires increasing screen size.
When the screen is fixed and the screen resolution is increased (as shown in the figure above), the image and text display target will be correspondingly reduced. The reason is that the system does not automatically adjust the text and icon size according to the relationship between screen size and resolution, which is the behavior of the Windows system itself.
I believe that if there are older people in the family using a computer, the screen resolution must be adjusted very low, because this text and ICONS will be larger, my family bought in 2006 desktop is such.
As a result, it’s easy to get the illusion that the bigger the screen, the higher the resolution (given a fixed number of pixels per unit area, the bigger the screen, the more pixels there are on a single screen, the higher the resolution).
That is, until Apple’s Retina display, where small screens can have large resolutions.
The concept of PPI
PPI, or pixel density, is the number of pixels per inch (for example, 326 for the iPhone 7 above). The higher the PPI number, the more dense the display can display the image, and the more detailed the image will be.
Take Retina screens for example. Instead of increasing the size of a normal display to increase the resolution, it increases the number of pixels per unit area of the screen, or pixel density, to increase the resolution, and you have a high pixel density screen.
According to the above analysis, the improved resolution, ICONS and text size would be smaller, but the Mac operating system is different, it automatically to adopt the corresponding model (such as Mac HiDPI) adapter, after will shrink font (apple has been using vector fonts) and ICONS to zoom in, so that apple with more megapixels to show the same content, So the display size remains the same.
Apple marketed the concept of a “high pixel density screen” with the technical term “Retina”, calling it a dual-density display, claiming that individual pixels would be indistinguishable to the human eye.
When the pixel density of a display exceeds 300ppi, the human eye cannot distinguish individual pixels. This means that the resolution of the display device has reached the limit of pixels that can be resolved by the human retina. Therefore, mobile phone displays will no longer be grainy at a pixel density of 300ppi or more, while handheld flat-panel displays will no longer be grainy at a pixel density of 260ppi or more, and apple’s Retina display on the Mac will not be able to distinguish individual pixels at a pixel density of 200ppi or more.
Ok, so much about the screen, seems to have nothing to do with front-end development, I’m not buying a new phone (ha ha), so now, let’s talk about the front end of the problem.
Pixels in the Web (CSS pixels)
CSS pixels are an abstract concept, device-independent pixels, or “DIPS” for short, used primarily in browsers to accurately measure (determine) content on Web pages.
In the standard case, one CSS pixel corresponds to one device pixel.
.box {
width: 200px;
height: 300px;
font-size: 12px;
}
Copy the codeThe above code will draw a 200×300 pixel box on the display device, which on a standard screen would occupy 200×300 device pixels. But on the Retina screen, the same div uses 400×600 device pixels, keeping the same physical size display, resulting in each pixel actually having 4 times the number of normal pixels.
The same is true for images:
At this point, what happens to the screen? In fact, a bit similar to the image software magnification picture function, using its own algorithm (image processing algorithm) calculation of magnification. It’s just that here’s how apple’s Retina display works, one CSS pixel is actually divided into four, which makes the color definitely wrong (not full fidelity) and makes us look blurry (especially in images, very obvious).
What should we do when we encounter something like this in development? At this point, we need to introduce the concept of devicePixelRatio.
DevicePixelRatio devicePixelRatio
Window. devicePixelRatio is the ratio of physical pixels to device-Independent pixels (DIPS) on a device.
The formula is window.devicePixelRatio = Physical pixels/dips
- DevicePixelRatio of a common density desktop display is 1
- DevicePixelRatio =2 for Mac Retina
- DevicePixelRatio for mainstream phone displays =2 or 3
For example, a 100×100 image, use CSS to set it {width:100px; Height: 100 px}. Turn it on on a PC with a normal density desktop display and it’s fine, but assuming on a phone/or A Retina Mac that renders at logical resolution, their devicePixelRatio=2, it’s like taking 4 physical pixels to depict 1 electronic pixel. This is equivalent to looking at an image with a magnifying glass at 2x, which may make the image blurry.
How does the code solve this?
Now that we know the principle, how do we implement it at the code level?
A common way to do this is to change the image to 200×200, CSS width and height unchanged, still {width:100px; Height :100px}, the CSS width is 200×200 pixels and the image is 200×200, so it will not become blurred. Media queries and JS operations can be used
CSS Media Queries
#element { background-image: url('hires.png'); } @media only screen and (min-device-pixel-ratio: 2) { #element { background-image: url('[email protected]'); } } @media only screen and (min-device-pixel-ratio: 3) { #element { background-image: url('[email protected]'); }}Copy the codeJS query
Retinajs library
Will all images need to be switched for Retina display?
No, in general, you don’t need to have two versions of every image on your site (non-Retina and Retina), and most image scaling won’t affect the user’s experience too much.
Images often need to be processed: logo of website, color image icon, because their image size is too small, the Retina physical pixel display twice will appear blurred, in this case, you need to use media query or JS to replace the image.
The last
Eyes are the window of the soul, but also a way to deceive you, put on the glasses of knowledge, see the world clearly.
ThoughtWorks By Ben Zhu
References:
- www.w3cplus.com/css/towards…
- www.jianshu.com/p/bb76c606f…
- Developer.mozilla.org/zh-CN/docs/…
- Caniuse.com/#search=dev…
- www.web-tinker.com/article/205…
For more insights, please follow our wechat official account: Sitvolk