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 | 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
https://machine-learning-etc.ghost.io/test-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.
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>