Geek Answers Handbook

Why do low-resolution images appear blurry on sites viewed with mesh screens?

When I have an image with a size of 500 x 500 pixels, the image looks crisp on a regular display (i.e. CSS 1: 1 pixels per device pixels). But when this image is viewed with a Retina display, it should display every pixel in the image at 4 pixels of the retina (resolution is twice as high). On the retina screen, the image is also displayed at 500 x 500 pixels CSS, but it scales to 1000 x 1000. I don’t quite understand why the image looks blurry on the Retina screen, since the physical size remains the same, considering that both monitors are the same size.

Is blurring the result of space between 4 pixels?

Image from: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

enter image description here

+4
source share
2 answers

Your result will depend on the resampling method used by your particular browser. This is a "fuzzy" image interpolation, which is usually preferable for photographic content, but not so good for graphics or sharp-edged content. A common algorithm is bilinear interpolation, which is used by default in Firefox.

While there are no standard APIs to control which method is used, Firefox provides a property image-renderingin CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Webkit -webkit-optimize-contrast.

.

+2

, . , ; , . -

0

More articles:


All Articles