Centering an image in Markdown vs. Astro image optimization | Astro Lounge | Page 1

I have a minimal blog based on the official blog template.
So far, I had the images in /public, but now I want to look into the built-in image optimization capabilities.

I am using the following approach for some minimal styling of images in Markdown:

post.md

[alt text] (../../images/my-image.jpg#centered)

global.css:

img[src*="centered"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Now I wanted to optimize the images by moving them into /src. The documentation says that images in /src should be automatically optimized when they are used in Markdown files using the standard ![alt](src) syntax (see https://docs.astro.build/en/guides/images/#update-your-markdown-mdx-and-markdoc-files).

The problem: that appears to clash with the approach to centering:

[ERROR] [MissingImageDimension] Missing width and height attributes for /src/images/my-image.jpg#centered. When using remote images, both dimensions are always required in order to avoid CLS.
  Hint:
    If your image is inside your `src` folder, you probably meant to import it instead. See the Imports guide for more information https://docs.astro.build/en/guides/imports/#other-assets.

So the Astro image optimization clashes with the #centered suffix.

How do you best work around that?
Do I need to .mdx to be able to both optimize and center my images?

#Centering an image in Markdown vs. Astro image optimization