How does ScreenSteps handle image resolution between the editors, web interface, and PDF output?
Updated on Nov 22, 2017
This article will attempt to explain how image data is stored and displayed in the ScreenSteps web interface, desktop editor, and PDF output.
In this article you will see the term pixel scale used to define the ratio of pixels in the horizontal or vertical plane of an image that a monitor uses to display 1 pixel. If you want to understand why images in the ScreenSteps system look the way they do in the desktop editor, the web interface, and in PDF then it helps to have a basic understanding of how monitors display image data.
A normal resolution monitor has a 1:1 pixel scale. The monitor displays one pixel from the image as one pixel on the screen. For an image that is 200 pixels wide by 200 pixels high to be displayed at 100% it would be displayed as a 200x200 image on the monitor.
A high resolution monitor such as an Apple computer with a retina display has a pixel scale of 2:1. For every pixel on the screen two horizontal pixels and two vertical pixels are used from the image data being displayed. This results in 4 pixels from the image being used to display 1 pixel on the screen. For an image that is 400 pixels wide by 400 pixels high to be displayed at 100% it would be displayed as a 200x200 image on the monitor. The end result of displaying more image data in a smaller area is a sharper looking image.
Windows computers will have varying pixels scales such as 1:, 1.25:1, 1.5:1, 2:1, etc.