2017.03.24

4K photography on the web?

This is important if you want to show quality photography with some sharpness on the web, now and in the future.
Note: You will not be able to view what this is really about if you do not have a high-res or retina screen.

If you are the owner of a new high-res display, Apple call them retina, you will notice that all text and all graphics are pin sharp. But if you, like me, are interested in sharp photography you are in for a disappointment. Photography which used to look reasonably sharp on your old screen now looks muddy. We now have 4K (even 8K) video on the web and also 4K (and more) photography? What happened?

Photographers like me have been pixel-peeping for years. We have discussed the dpi, the necessary number of megabytes to obtain a sharp print at any given size. But we have forgotten the Screen. And this is in a time when a large majority of photographs are viewed on screen and not on paper.

Here is an illustration. This photo was shot on 4×5 film with a Sinar only 30 years ago. It was later scanned at high resolution. To the left is a normal 1K image, to the right is the new 4K-image (click to view large size – you can switch between the pictures)
Note: You will not be able to see any difference if do not have a high-res or retina screen.

Lo-def image, 950px wide shown as 950px (1K)

This a normal 1K image. Click to view.

Hi-def image, 1900px wide shown as 950px (4K)

This is a 4k image. Click to view.

To make this crystal-clear. Here is another example shot on a modern mirror-less camera. To the left is a normal 1K image, to the right is the new 4K-image.

Lo-def image, 950px wide shown as 950px (1K)

This a normal 1K image. Click to view.

Hi-def image, 1900px wide shown as 950px (4K)

This is a 4k image. Click to view.

My new Imac has a 4K screen with a resolution of 4096 x 2304 pixels, the new 27″ even higher. With a normal pixel-density these screens would be huge. Instead they press more pixels into every inch on the screen. The normal pixel density has been 72ppi for many years (92ppi on Windows). My Mac now has a pixel density of 219ppi.

What does this mean for photography on the web?

For a bitmapped image a 4K screen has to interpolate. 1 pixel in the original image will have to cover 4 pixels on the screen (2 horizontal pixels X 2 vertical pixels = 4 pixels). For a 4K screen each original pixel will have to cover 16 pixels and so on. This is exactly the same thing you do when you when you enlarge an image to print it in a format larger than the original would allow. An absolute no-no among purists. Or if you choose to print your hi-res photo at 72 dpi and not 300 …
You may think that this is not a big problem today. Not many people have high-res screens – but that will change very soon. And for us photographers who try to show off on the web it is already a problem, at least for those of us who do sharp photography.

How do we solve this problem?

Your first thought might be that we have to increase the ppi of the images we export for the web. This will not do it, it will make no difference. We will, in fact need to export images with larger dimensions and then rescale them to the original width/height when we show them on the web.

An example: If you have an original image of 800 x 600 pixels, you will have to increase the size to 1600 x 1200 pixels and then show this image in a container which 800 x 600 pixels on the screen.

For a 4K-screen you can do the math yourself…
This means that we will have to upload images in different sizes for different displays and then show the right image to the right screen. Not easy, and more work.

The browser vendors are on the case but there is so far (March 2017) no standard solution.

This comes at a cost.

All images will increase by a factor of 4, you will suffer with a slow internet connection.

My solution

In addition to the normal 1K images I upload a separate 4K image and show this to visitors who have a retina screen (I try to detect that) and who who want to see my photography in high definition (I ask for that).
Have a look around and tell me what you think.

If you want more tech on this, visit A guide for creating a better retina web or 5 Ways to Support High-Density Retina Displays.

You may say your opinion here :