Resolution means pixels, not inches
A digital image is a grid of pixels. Its resolution, for screen purposes, is how many pixels wide and tall it is. A screen has a fixed number of pixels as well. Matching the two is most of the job.
Terms like dots per inch or pixels per inch, often attached to image files, matter for print. For screens they are mostly irrelevant. What counts is the pixel width and height of the image compared with the pixel size of the area where it will be shown.
The basic sizing rule
If an image will fill a display, it needs about as many pixels as the display has. A common full HD screen is 1920 by 1080 pixels, and a 4K screen is commonly 3840 by 2160 pixels. An image smaller than the area it covers is scaled up, which can look soft or blocky. An image much larger than needed does not look better; it just takes more memory and processing, and the screen scales it down anyway.
A quick check: the number of pixels in an image is its width times its height. A 1920 by 1080 image has 1920 x 1080 = 2,073,600 pixels, about 2.1 million. A 3840 by 2160 image has 8,294,400 pixels, about 8.3 million, which is four times as many. That fourfold jump is why oversized images can strain a modest media player.
The area the image covers matters, not the whole screen. A photograph shown in a quarter of a 1920 by 1080 layout needs far fewer pixels than one covering all of it. Work out the pixel size of each slot in the layout and prepare images for that slot, with a little headroom.
Allowing for zoom and cropping
Interactives that let visitors zoom or pan are different. At full zoom, the visitor sees a small part of the image at screen scale, so the image needs enough pixels to stay sharp at the closest zoom level. Large images for deep zoom are often split into tiles, so only the visible pieces load, which keeps things responsive. Object photographs and scans, as discussed under photographing objects, are usually captured at higher quality than a single display needs for exactly this reason.
If the same picture may be cropped for several layouts, such as a wide banner and a portrait panel, check that the crop still has enough pixels at the final size.
Screen density and the web
On high-density displays, such as many phones, a screen area may contain more physical pixels than its layout size suggests. Web-based exhibits may therefore serve a larger version to those devices and a smaller version to others. This is relevant to mobile devices and to anyone building for slow connections, where a lighter image helps a page load sooner.
Choosing file formats
Formats fall into two broad groups.
Lossy formats shrink files by discarding some detail that is hard to notice. They suit photographs and images with smooth gradients. Quality is usually set by a slider: pushing it too far produces blotchy artifacts, especially around sharp edges and text. Repeated re-saving of a lossy file degrades it further, so edit from a master and export once.
Lossless formats keep every pixel exactly. They suit diagrams, line art, screenshots, logos and anything with crisp text. Files are larger for photographs but smaller and cleaner for flat graphics.
Some formats also support transparency, which is helpful for cutouts placed on varied backgrounds. Some newer formats offer smaller files at a similar look, but support varies across players and browsers, so test on the real playback system before committing. Older, widely supported formats are often the safe choice for gallery hardware that will run for years.
Avoid putting text inside an image where possible. Live text scales, can be translated and read by assistive tools, while text baked into a picture cannot. If it is unavoidable, make sure the information also exists as text, which connects to the guidance on exhibit translation and screen readers.
Color and brightness
Color can shift between a computer monitor and a gallery display. Many images use a standard color space for screens, and sticking to it keeps results predictable. Test a few representative images on the installed display, in its real lighting, as screen glare and brightness settings can change how dark tones appear. Where a display is very bright or very dim, adjust the display before adjusting the images.
File size and playback
Heavy images affect more than load time. They use memory, can cause stutters when changing screens, and may slow start-up of a media player. Practical habits include:
- Prepare display copies at the needed size, and keep the full-size originals elsewhere.
- Compress photographs sensibly and check them at actual size, not zoomed in on a desktop monitor.
- Keep a consistent naming convention so the right version goes to the right screen.
- Test the slowest transitions on the real player, including the first start after a restart.
For choices about hardware, the notes on media players are relevant, because a limited device sets practical ceilings on image size.
A simple workflow
- Keep an untouched master at full quality, with metadata.
- Note the target slot size in pixels for each use.
- Export a display copy at that size, in a format chosen for the content type.
- Check it on the actual screen.
- Record the settings used so the batch can be reproduced.
The master should stay with the descriptive record described under collection metadata, so the files and their information do not drift apart. Rights and credit lines should travel with the image too, as covered under image permissions.
Common mistakes
Using a tiny thumbnail stretched to full size, exporting huge files “to be safe”, re-saving lossy files repeatedly, mixing color spaces across a set, and never testing on the real screen. Most of these disappear when a project settles its pixel dimensions early and tests one sample before processing the rest.