Best way to handle retina/HiDPI screenshots?

Using Ghost
1

I’m migrating to Ghost to post product updates and they by nature contain a lot of screenshots. My problem is that Ghost really doesn’t want any image to be displayed at @2x / Retina resolution.

The Retina MacBook Pro came out in 2012, today I can say every computer has a HiDPI / Retina screen today.

Making screenshots on these screens and including them in Ghost automatically shows everything in 2x size!

For example look here:
image

And now compare with the 50% version in the next comment.

I know the policy of Ghost is to display images as big as possible, but this is really not the case for screenshots, where they need to be displayed exactly at 50% size to display correctly. Of course you can resize them in image editors but then you are back in 2011, with pixelated, non-Retina displays.

What is the best solution for this, for example for the Source theme?

This snippet seems to work so far:

.kg-image {
  max-width: 50%;
}

But ideally I’m looking for a user choice. Is it possible to extend the regular / wide / full page selector for images? I’d love to have a “2x” option in the 4th place, which applies a class like kg-image-2x or similar.

For example, on this forum, the Discourse editor has a super nice support built-in, with a 50% toggle on every image preview.

2

Same image correctly displaying at 50%:

image

3

Here is my best solution so far. This involves putting “2x” into alt text. Unless there is some editor support for it, I cannot find a better way. I’ve read this thread, but I’m pasting many images from clipboard, so the renaming doesn’t work.

(function () {
    const images = document.querySelectorAll('img.kg-image[alt="2x"]');

   images.forEach(image => {
        // Remove the alt text
        image.removeAttribute('alt');

        // Resize the image to half its original size
        image.width = image.width / 2;
        image.height = image.height / 2;
    });
})();