Screenshots That Are Not Blurry

The three ways they go wrong

Photographing the screen with a phone, which produces reflections, moire patterns, a slight angle and poor colour.

Capturing at a small size and then displaying it larger, which is where blur comes from.

Capturing everything including the browser, the taskbar, the other windows and the personal bookmarks.

All three are avoidable and all three are common, including on sites otherwise carefully made.

Capture rather than photograph

Every device can capture its own screen, and the result is exact rather than approximate.

On a computer that is a keyboard shortcut, usually with an option to select a region rather than the whole screen.

On a phone it is a button combination, and the result is a perfectly sharp image at the phone's own resolution.

There is no situation in which photographing a screen produces a better result than capturing it, and the difference is immediately visible.

The one exception is showing somebody using a device, where the point of the picture is the person and the setting rather than the content of the screen.

Size and why blur happens

The technical part, and it is simple.

A screenshot has a fixed number of pixels. Displaying it larger than that means the browser inventing the extra ones, which produces softness.

So capture at least as large as you will display, and preferably larger, then scale down. Scaling down looks sharp; scaling up never does.

On a high-resolution screen a capture is already larger than it appears, which helps. On an older monitor it may not be, which is why the same process gives different results on different machines.

If a screenshot must be shown large, capture it on the highest-resolution screen available.

A worked example

A software consultant whose guide pages illustrated each step with a photograph of his monitor.

They were legible and looked amateurish, with reflections and a visible curve to the screen.

He switched to region captures: the specific dialogue box, nothing else, taken directly.

The pages looked substantially more professional and the file sizes fell by about eighty percent, because a clean capture of a dialogue compresses far better than a photograph of a room containing a monitor.

He also found the guides easier to update, since recapturing one dialogue takes seconds and rephotographing a screen means setting up again.

None of that required any software beyond what was already on the machine.

Cropping to what matters

The step that separates a useful screenshot from a confusing one.

Show the part being discussed and enough around it for orientation. A full-screen capture to illustrate one button asks the reader to find the button.

Where context genuinely matters, one wider shot followed by close crops works better than repeating the full screen each time.

And crop out anything personal: bookmarks, tabs, notifications, file names, other people's details in a list.

That last point catches people regularly, and a screenshot published with a customer's name visible in a sidebar is a small privacy incident that was entirely avoidable.

Annotating them

Where a screenshot needs to point at something.

A simple box or arrow in a strong colour, drawn with the annotation tools built into most operating systems.

Keep it minimal: one highlight per image rather than six arrows and three circles, which is harder to read than the unmarked original.

Use a colour that does not appear in the interface, so the mark is obviously an addition rather than part of the screen.

And describe it in the text as well, because somebody using a screen reader cannot see the arrow.

The counter-case

Where a screenshot is the wrong illustration.

Where the interface changes frequently, and a set of screenshots dates within months. There, describing the action in words survives updates that images do not.

Where the sequence matters more than any single state, in which case a short recording communicates better than eight stills.

And where the screenshot would show somebody else's software in a way that misrepresents it, or breaches terms about publishing an interface.

For most small business uses, none of those applies, and the screenshot is simply the fastest way to show where something is.

Consistency across a set

Where a guide uses several, matching them matters as much as the individual quality.

Capture at the same window size, the same zoom level and the same theme throughout. A set where the interface changes size between steps is disorienting to follow.

Crop to consistent proportions, so the images sit evenly down the page rather than jumping about in size as the reader scrolls.

And capture the whole set in one sitting where you can, because doing three today and four next month guarantees a visible difference somewhere in the middle.

Keeping them current

The maintenance problem specific to this kind of image.

Interfaces change, and a guide illustrated with screenshots from three versions ago is confusing rather than helpful, because the reader cannot find what the picture shows.

Which argues for using fewer of them, and for illustrating only the steps where the position of something is genuinely hard to describe.

A guide with two screenshots stays useful for years. One with fifteen needs revisiting every time anything in the interface changes at all.

Note in your own records which pages contain screenshots, so that when an interface changes you know exactly where to look rather than searching the whole site.

Screenshots of your own site

A specific case worth handling deliberately, since businesses use these for portfolios and case studies.

A screenshot of a website in a browser frame dates quickly, because the browser itself changes and the frame becomes recognisably old.

Capturing the page content without the browser chrome ages considerably better, and looks cleaner.

For a portfolio, a full-page capture showing the whole design is more useful than the visible window, and most browsers can do that with a built-in tool.

And capture at phone width as well as desktop, because showing a site works on both is frequently the point being made.

File format and size

1. PNG for interfaces, which have flat colour and sharp edges.
2. JPEG for anything photographic inside the capture.
3. Crop before compressing, since a smaller area compresses better.
4. Check the file size, because full-screen captures are surprisingly heavy.
5. Name it descriptively before uploading.

The first matters more for screenshots than for photographs. A JPEG of an interface produces visible artefacts around text, which is precisely where sharpness is most needed.

How to describe the result for somebody who cannot see it is covered in describing an image for somebody who cannot see it.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.