High Resolution Graphics

🗻

There is a demonstration Pixel Chromebook at work, so I tried looking at this blog using it. The display is really nice, with text appearing crystal sharp – from what I have seen of retina display Macbook, it’s the same. The difference seems even more dramatic as the resolution transition on mobile phones.

While the blog rendered fine (the browser is Chrome after all), the low resolution of the bitmap was showing, much more dramatically than on the mobile phone. Some observations:

  • SVG images look very sharp
  • Emoji character look very sharp, except when they are not included in the font used by Chrome.
  • Bitmap images within the text appear much more blurred than the background images, probably because they are within the centre of focus.

While there are tricks to selectively serve different image resolutions to different clients, this is a hassle, because it means twice the graphical resources and more work. SVG images are fine for logos and symbols, but what about photos? I found an interesting article about high-resolution graphics, the quick take-away is that for photographs, having a photo at twice the resolution (i.e. four times the pixels) but with a much more aggressive JPEG compression (so that the file is four times smaller), you end up with similar visual quality on classic display, and improved resolution on high-resolution displays. This makes sense, instead of algorithmically a value for each group of four pixels, you send all four of them, but give much more slack to the compression algorithm, in the worst case, it will average the group of four pixels, i.e. do the same as down-sampling does.

I think the example in the article with the logo make little sense, sending such data in JPEG format makes little sense, he would be better off with either an SVG version, or a PNG. I would need to check how sending high-resolution, low-colour count PNG works out.

One thought on “High Resolution Graphics

Leave a Reply