You can shrink your browser’s display by zooming out (Shift + - on a PC, Cmd + - on a Mac). For example, if the graphics program removes every fourth pixel, the removed pixels may make the graphic look less crisp because of the places where the pixels get removed. Wtih downsampling, some of the pixels get removed from various places on the graphic, and this can result in fuzziness as well. With upsampling, graphics programs have to add pixels where the pixels don’t exist. In other words, increasing or decreasing your image size causes your graphics program to manipulate the pixels in ways that degrade the original capture, because the graphics program has to compensate for missing pixels in different spaces. (See Snagit (Windows): Images are blurry or fuzzy) This results in broken characters, jagged lines and an overall “fuzzy” appearance of the image. The “dot” over an “i” for example might have been on one of the tiles that you removed, or portions of the top curve in an “e” might now be gone. If there was writing in the image, some of the tiles that comprised characters might be removed. The problem occurs because some of the tiles that you removed were colored tiles that comprise the content of the image. If you wished to reduce the size of the floor by 50%, you could remove every other tile and then slide the remaining tiles back together again. Why does scaling cause image quality degradation? Imagine that you transferred your screen capture onto a tile floor comprised of many very small tiles. The more partial a screenshot, the less context you include and the more confusing it becomes to users.Īny time you scale your image up or down, the quality degrades. Overall, trying to follow the 1:1 ratio for capturing and publishing doesn’t really work unless you fill your documentation with partial screenshots (screenshots that show only a partial area of the screen). At times you may need to show screen sizes larger than 600x400px but then shrink them down to this size. However, 600x400px is somewhat large and doesn’t work for all screen captures. If you also display your image using the same dimensions, you won’t lose any of the clarity, and your screenshot will remain sharp and clear on other monitors that have similar pixel-per-inch (PPI) density. For example, suppose you capture your screen at 600x400px. If you capture your screen at the same ratio you display the images, the screenshots will usually be sharp and clear. This last option is somewhat confusing and has pros and cons, so that’s what I’ll spend the most time on in this post.

Capture from a Retina display and resize in the browser.

Zoom out on your browser’s magnification before capturing.

If you want clear, crisp screen captures - especially when those screens contain text - you have several options:

In general, a lot of technical writers use Snagit and save the screen captures as PNG files, which is what I also do. (By “screen capture,” I’m referring to captures taken of specific user interfaces.)

Usually these are partial screen captures that focus on the part of the screen they are highlighting. Technical writers take a lot of screen captures, often showing interfaces with both text and graphic elements.

Academic/Practitioner Conversations Project.

Author in DITA and Publish with WordPress.

Reflecting seven years later about why we were laid off.

A hypothesis about influence on the web and the workplace.

Snagit 2019 scaling