Retina quality screenshots?

I need to be able to insert screenshots (mostly cropped sections of web pages, not whole pages) into my WordPress site for instructional purposes.

I have discovered the Awesome Screenshot app for Google and Chrome which does a good job of creating and annotating screenshots.

What I'm unsure of is how or if I can optimise these for retina screens. I don't own a retina device myself so the screenshots are being created on a regular pc. Is my only option to increase the size to 2x for retina after the screenshots have been taken (obviously this will result in loss of quality and readability). Is there any other way to get retina quality grabs in the first place?

Topic retina Wordpress

Category Web

1
answered at

Increasing a non-retina screenshot to 2X size will not be any different than showing the original.

Instead, alter your browser settings to emulate a retina display:

Firefox: Go to about:config, and change layout.css.devPixelsPerPx from -1 to 2

Chrome:

  • Zoom to 200%
  • At the bottom of the JS console (Option-Command-J), click on "Emulation"
  • Check the "Emulate screen" box
  • Set "Device pixel ratio" to 2
  • Make sure "Emulate viewport" is unchecked (otherwise the content gets resized)
  • Uncheck "Shrink to fit" (it doesn't seem to do anything useful)
  • Uncheck "Enable text autosizing"

Source: https://wincent.com/wiki/Taking_Retina_screenshots_on_a_non-Retina_display

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.