posted 2017.03.24 - modified 2018.10.13

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.

Most images will increase drastically in size, the stress on your internet connection will do so too.But this will stress not only your internet connection, it may also stress your camera.
An example: All the “big” thotos on this web are 950 pixels wide. 4K images will then have to be 1900 pixels wide.  Lots of of my old images does not meet this requirement, and if you do some cropping the case for a full-frame camera will be pretty obvious very soon – not because of the print, but because of the screen.

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).
This is all coded in PHP, JQuery and CSS (I am not only a photographer, I do web construction as a living). This is not easy – please tell me if anything doesn’t work.
Have a look around and tell me what you think. You should also visit my on-the-wall gallery web, it has the same 4K technology.

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.

This topic important for the future of classic photography in a wired world.

You may leave a comment here (it will not be published to Facebook or Twitter ;)