Thursday 17 January 2013

JPEG compression and high res displays

This morning and the first part of the afternoon I was working on an article (that I should have written on Tuesday) for my photo tips website.

In the afternoon and part of the evening I made a lemon swiss roll.

In the evening I also watched Winter Watch. I had an email from Sitepoint with a link to an article about optimising images / websites for high res displays: CSS Techniques for Retina Displays. Reading the comments on there led to this blog post: Retina Revolution, in which the author suggests just using double size but highly compressed images. Since the double sized image will be displayed at half the size on a normal screen, the high compression is not very noticeable.

I have my doubts about this, as even with 80% compression you can get quite visible JPEG banding, e.g. on a blue sky. The example images they used didn't really have areas of gradual tonal gradation.

This test: Can bigger images be smaller? gives a more technical look at the same thing. At normal viewing sizes on a standard resolution screen, there is a difference between the standard size and double size images. But I wouldn't say one was better than the other.

Viewed at 200% (I don't have a high DPI device unless you count the Nexus 7), the double size image was probably better. The double size but more compressed image lacked JPEG artifacts around edges, and had more detail in detailed areas. But it also had worse looking smooth areas, with visible compression artefacts. The standard size image looked much better in smooth areas.

The other issue with double sized images is that they are subject to being resized by the browser for standard resolution displays. Browsers used to be pretty terrible at this, though Chrome doesn't seem to be too bad. Probably most modern browsers aren't too bad, but it would result in a worse image quality for users of some browsers that aren't good at image resizing.

JPEG Mini also looks like a good service for compressing JPEG images without loosing quality.

No comments: