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 (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).
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 .
If you encounter issues, find errors, or see opportunities for improvement, feel free to join the discussion or submit an issue or pull request. Your feedback is highly appreciated!