Retina images are not handled properly

[chimit]

If you make a screenshot on a Retina computer (any modern Mac) and select a visible area of 200x200 px the screenshot file would be 400x400. Here is an example file:

Most of the browsers display such images as is - with the resolution of 400x400 (try to open this image in a new tab). So such images look twice as large from the original visible size. But it's possible to detect high density image, e.g. the screenshot above looks good because Github set 200px width, not 400px. But unlike Github, Astro when optimizing images doesn't take high density into account and doesn't reduce the value of the width attribute of the images. Is it possible to fix it?

[satnaing]

At the time of writing this, you can achieve the true size of the image by using <img /> tag with width attribute.

<img src="/your-image-inside-public-dir.png" width="200" height="200" alt="test">

We can use Astro's <Image /> component to achieve the desired result.
However, to use <Image /> component, we need to integrate mdx.