The HTML specification recently tackled this problem by defining a reference pixel that manufacturers use to determine the size of a CSS pixel. Because of a large variation in screen sizes and densities, we needed a standard way to make images look good across a variety of screen densities and dimensions. When the web was designed, 99% of displays were 96dpi (or pretended to be), and few provisions were made for variation on this front. In contrast, the 2x image looks quite good. The following is a rough simulation of how a 1x image will look on a 2x display. In practice, low density images should look the same on new screens as they did on old ones, but compared to the crisp imagery high density users are used to seeing, the low density images look jarring and pixelated. But new classes of hardware and wearables like Project Glass will likely continue to drive increased pixel density. For the phone form factor, the current generation of Retina/HiDPI displays may be close to that ideal. The holy grail, of course, is a display in which pixels are completely invisible. The trend in increased display density continued, and today's new phones sport 300dpi displays (branded "Retina" by Apple). By 2008, 150dpi phones were the new norm. In the early days, computer displays had a pixel density of 72 or 96dpi ( dots per inch).ĭisplays gradually improved in pixel density, largely driven by the mobile use case, in which users generally hold their phones closer to their faces, making pixels more visible. Background # A very short history of display density #
While you could convert the image into SVG automatically, vectorizing photographs makes little sense because scaled-up versions usually don't look good. For example, you may be given assets that would be quite hard to replicate in pure SVG/CSS, or you are dealing with a photograph. That said, you can't always avoid raster images. Specifically, text, SVG and much of CSS will "just work" because of the automatic pixel scaling feature of the web (via devicePixelRatio). Avoid images if possible #īefore opening this can of worms, remember that the web has many powerful technologies that are largely resolution- and DPI-independent.
This article will cover some useful techniques for doing this today and in the near future. In terms of images, the goal of web app developers is to serve the best quality images as efficiently as possible. Constrained network bandwidth and battery life.Large variety of devices with different form factors.On the mobile web, the challenges are compounded by several factors: Application developers need to support a range of pixel densities, which can be quite challenging. Some devices feature very high resolution displays, while others straggle behind. One of the features of today's complex device landscape is that there's a very wide range of screen pixel densities available. Decide what image to load on the server.Use JavaScript to decide which image to load.A very short history of display density.
0 kommentar(er)
