Equivalent of "@2x.png" syntax for retina display images

Is there a trick to include images designed for retina displays?

On Medium, I would render them at 2x resolution, then use “@2x.png” suffix when dragging the image to the blog. This signals medium to show them at 1/2 the size, and makes lines look smoother on my MacBook, what’s the equivalent workflow on ghost?

Example: How to do matrix derivatives. Suppose you have the following scalar… | by Yaroslav Bulatov | Jul, 2021 | Medium

You upload the original full-size image. Ghost generates srcset and sizes attributes with multiple sizes in it so the browser will load the image size most appropriate to the device’s screen size and resolution.

Are you running into problems with how that works?

Yes, I am. Consider the formulas showing up on medium post

and same formulas on Ghost post

On Ghost they are showing up 2x larger and blurry on my retina display

Below is an example of an image, it has @2x.png suffix.

When I drag it into Medium post, the editor detects the “@2x” and re-renders the image at 50% the size. On Ghost default editor, it remains at 100% the size.

Canvas 5@2x

Ghost doesn’t have any equivalent functionality built-in as it’s core functionality is intended for full-width photos.

However, you can add a script to your theme or in code injection to resize images according to your site’s specific needs. A very basic example would be something like this (you may want a more advanced resizing algorithm rather than just halving the size):

<script>
document.querySelectorAll('img[src*="@2x"]').forEach((img) => {
    img.width = img.width / 2;
    img.height = img.height / 2;
});
</script>
1 Like