Comment by jen729w

Okay so the pain I had was taking retina screenshots and having them show up in retina resolution.

The site is written in MDX and then `gatsby-plugin-mdx` does the heavy lifting. What I could not get to work was Markdown formatting for inline images, especially not for smaller images. They always ended up being shown at 2x.

So now it's just an image, imported in to the file at the top, and displayed further down.

    import outlook_folder_structure_1232_expanded from "./Outlook__folder-structure-12-32-expanded-min.png"

And then just a straight `<img src={outlook_folder... }` where it needs to appear.

As for making them sharp and small, they're just screenshots from my Mac run through one of the many online PNG resizers. From memory that gave me a file with a 78% saving and if it wasn't near magic then I couldn't tell you how it did it because there was zero difference to my eye. I can't remember which one I used, just try a few.