While setting up what can loosely be described as my ‘photo portfolio’ on the web — actually, it’s more of a casual selection of personal favourites — I was struck by some of the basic issues I experienced while in the post-production phase. Obviously with your favourite images / portfolio you want the best technical quality possible, but with files small enough to play nicely with the web. Professional photographers have the added challenge of wishing to display high quality images to impress potential customers — without giving away usable images that can be stolen! Common wisdom says: the best copyright protection is not to upload images any larger than a thumbnail.
It used to be simple. You uploaded 640 X 480px (medium size images), and 800 by 600 px (large images). These days web graphics are more expansive. They must work harder. Images have to function within responsively designed website layouts, look good on high pixel density screens, and be displayed on much larger screens (in HD, which is 1920 X 1080px), and still load on a mobile phone with limited bandwidth. These challenges are exacerbated by the fashion for full screen images. As many website images are not displayed at full size (100%) — they’re either scaled-up or down — the experience of those images will depend on how well they’re rendered in software. Generally speaking, higher quality images will render better. The only way to avoid image resizing is to design a website that displays images at exactly 100% size. This is difficult to guarantee in responsively designed websites, especially when viewed on phone and tablet screens.
The solution to these challenges has been backend (server) image resizing, which is handled on-the-fly, and copious amounts of image smoothing in website themes to hide JPEG compression and artefacts. While this might work for incidental web graphics that are overlaid with text (with the text as the primary focus) — for photographers it’s a bag of problems. This is more complicated by the fact that modern web browsers use image blurring, and while some use it sparingly others are more heavy-handed.
Grainy black and white images can be particularly frustrating. Backend web systems and web browsers do everything they can to smooth out crisp grain — which is exactly what photographers don’t want. It’s worth conducting tests to see much quality can be squeezed out of images at different file sizes: 500kb, 1mb, 2mb, etc.
Working in Lightroom offers excellent export settings, including an image sharpening option for screens. Colour is a minor issue, just export images as SRGB. You will loose detail in the shadows and it won’t look as good outside of a professional image editing app, but at least you can be sure how the colour will be experienced by other people.