Optimizing Image Quality - High DPI vs Standard DPI

[kerimucci]

Hi guys,
Apologies if this is a dumb question, but I am wondering how I should go about taking my screenshots for web and print output.
My company provided me with a laptop that has high dpi (I've never worked in high dpi before) and a monitor that has standard dpi. I am finding it really annoying! I've noticed that many images are blurry when viewing web output from my laptop, but then are fine when I drag it to my standard monitor. I haven't even set up my project for print yet, but I know when I used Flare four years ago, that I struggled getting clear images in my PDFs, too.
Should I take my screenshots on the high or standard dpi monitor? And does this mean that I need to cater to one audience or the other? As in, if I choose high dpi, then do I have to accept that users with standard dpi monitors will always view blurry images when opening my help system? I've been using PNGs, which I've read is best for print/online. I am also not even resizing the images at the moment, just using thumbnails for large images.
Thanks!

[SteveS]

What do you mean by a high resolution laptop screen?

Images 101: an image (more or less) is made up of a matrix of coloured dots. Think bitmap. Other image (raster) formats use trickery to reduce the number of dots being stored but that's unimportant in this discussion. Part of the image information stored in the file is how many of the dots get displayed per inch.

Next we have your monitor/ laptop screen. If it is a Windows machine its default setting is to display 96 dots per inch of screen. A Mac wants to display 72 dots (or pixels) per inch. You can change the settings to display more or less pixels per inch of screen, but you are not changing the image resolution, just the display resolution. Sometimes (particularly laptops) have the resolution changed to fit more information on the screen. Because the content being displayed is 'smaller' it looks sharper (in that you are less likely to see faults) so some people push this as "high resolution".

When you take a screenshot (I'm not talking about scanned images, photographs, or custom artwork) the application (snaggit, capture etc) should just capture the dots. When you view the image on a Windows machine it should display them at 96 dpi (ppi), a Mac at 72.

Some programs, however, make a mess of displaying images at anything other than 100%. So, if you ask your output to resize images (ie fit to page in a Word document) they can become blurry.

My advice for anyone in our field of work is to set monitors and screens to 100%. You might not fit or see as much on screen, but what you see is what you get. Capture screenshots at the default resolution. Try to avoid resizing images and keep them at 100% in your output.

And, if you think there is a problem with images check nothing is being resizes and view them on different screens using different programs.

[kerimucci]

Thanks so much for your reply. I come from a journalism background, so a lot of this stuff is completely unknown to me.

I have both monitors set to the default "Recommended" scaling and resolution (my laptop = 250% scaling and 3840 x 2160 res, and my large monitor = 100% scaling and 1920 x 1090 res). My large monitor is set as my "main display", which is what I use to take my screenshots.

When I view my HTML5 output on the laptop, images are blurred. When I view it on the large monitor, they are fine. I guess I just didn't know if taking screenshots on the laptop would be best for image clarity, but then they are massive due to the scaling, and would need to be resized. But from what you are saying, it is best to just take screenshots from my main monitor and not resize them, and hope that users have their monitors set to 100% scaling and the default res?

BTW, I am using Windows and Paint at the moment, but will be experimenting with Capture.

Thank you.

[devjoe]

Try setting your laptop to 200% or 300% scaling instead of 250%. That should mean that it doesn't have to dither to fill the pixel of the image that falls into that 50% on your screen and it should look cleaner.

[trent the thief]

Another thing you may find helpful is using PNG images save from your capture app using the "best quality" setting.

[SteveS]

...(my laptop = 250% scaling and 3840 x 2160 res, and my large monitor = 100% scaling and 1920 x 1090 res)...

There you go...

The laptop scaling at 250% means the graphics processor is trying to fit each 'dot' from the image into 2.5 dots on the screen. You can't have half a dot so does it render the right hand, left hand, top, or bottom colour? The large monitor (100%) maps dot to dot.

I find the best approach with screenshots is to take them on a monitor set to 100% so I know what I see is more or less what I get. I try to size the window or object I'm capturing to the same size as it will be finished, 550 pixels works well in a print document, it fills the page but stays within our document margins. If the window is larger I will crop it in an image manipulation program to meet my size requirements. If you are creating print you might need to vary the size to suit your document. If you are using your images for electronic delivery you don't have the same size constraints but find out the maximum screen width for your user's lowest specification monitor. For example, if you find some users have 600 x 800 resolution, your maximum image width should be 800 pixels, but I'd be looking at less to maintain whitespace each side of the image.

HTH

[kerimucci]

Thanks, guys. This helps a bunch.

I did try changing the scaling on my laptop to 200% and 300% and still have blurry images, which are nice and crisp on my large monitor.