This post provides a brief guide on how to organize and use images in the Astro AntfuStyle Theme.
Supported Cases for Image Processing#
Astro supports processing images during the build phase via the Image Service API (lovell/sharp is the default service), allowing actions like converting to webp, compressing, adding attributes, inferring dimensions to prevent CLS, lazy loading, and async decoding. However, this only applies in the following cases:
- Images stored in
src/
(Images in thepublic/
folder won’t be processed) - Authorized remote images (Note: external images referenced in Markdown using
![]()
will not be processed)
Images in Markdown Files#
It is recommended to store the local images used in the post under the src/assets/
directory, and create a subdirectory based on the post’s filename (e.g., images for src/content/blog/your-post-file-name.md
stored in src/assets/your-post-file-name/
), which will allow them to be optimized during Astro’s build process and make it easier to organize and maintain (this strategy can also apply to other static resources).
Adjusting Image Attributes in Markdown/MDX
To modify attributes of an img
element (like size) in Markdown/MDX, use the remark-imgattr syntax.
Note: Styles must be written directly in the style
attribute or by applying a class
. UnoCSS utility classes won’t apply.
Images in MDX Files#
In addition to supporting the standard Markdown ![alt](src)
syntax as demonstrated above, you can also use Astro’s <Image />
component and JSX <img />
tags in your .mdx
files by importing both the component and your image.
Image Compression#
As mentioned, Astro can compress images from the src/
folder. However, for images in blog posts, especially those in public
, it’s recommended to manually compress them to avoid performance issues. Useful tools include Tinify, Squoosh, and SVGO.
Wrapping Up#
I hope this post helps clarify image usage in Markdown/MDX within this theme. For anything not covered here, check out the Astro Images Docs . 📖