chore: update

Author: Timeless0911

website/docs/en/blog/introducing-rslib.mdx

@@ -39,7 +39,12 @@ Therefore, we created Rslib. **Based on the well-designed configurations and plu
 
 We hope Rslib can provide more powerful features for library developers and become an important part of the Rspack ecosystem, continuously promoting the development of unified toolchains based on Rspack.
 
-![Rslib in Rstack ecosystem](https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png)
+<img
+  src="https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png"
+  alt="Rslib in Rstack ecosystem"
+  width="760"
+  style={{ display: 'block', margin: '0 auto' }}
+/>
 
 <ImageAlt>The location of Rslib in the Rstack ecosystem</ImageAlt>
 
@@ -59,19 +64,34 @@ Rslib provides a comprehensive library building solution that covers most curren
 
   For TypeScript declaration files (d.ts), besides supporting d.ts file generation and related post-processing based on TypeScript Compiler API, it also supports bundling d.ts files using [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor), suitable for handling complex dependency scenarios.
 
-  ![Multiple formats in one configuration file](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png)
+  <img
+    src="https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png"
+    alt="Multiple formats in one configuration file"
+    width="400"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>Multiple formats in one configuration file</ImageAlt>
 
-  ![Clean ESM output](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png)
+  <img
+    src="https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png"
+    alt="Clean ESM output"
+    width="400"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>Clean ESM output</ImageAlt>
 
 - **Bundle & Bundleless**
 
   Rslib supports both bundle and bundleless build modes during build process. For bundleless scenarios, it also supports [output path redirection](/config/lib/redirect) feature, solving common issues with alias replacement in JavaScript and d.ts output paths, as well as strict path reference requirements in ESM.
 
-  ![bundleless output structure](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png)
+  <img
+    src="https://assets.rspack.dev/rslib/rslib-bundleless-mode.png"
+    alt="bundleless output structure"
+    width="760"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>bundleless output structure</ImageAlt>
 
@@ -81,7 +101,12 @@ Rslib provides a comprehensive library building solution that covers most curren
 
   Leveraging Rsbuild's plugin system and ecosystem, Rslib can directly reuse solutions for Sass, Less, Stylus, CSS Modules, and Tailwind CSS. Whether in bundle or bundleless scenarios, users can process styles just like building web application, directly through configuration or installing corresponding plugins.
 
-  ![Support multiple style solutions](https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png)
+  <img
+    src="https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png"
+    alt="Support multiple style solutions"
+    width="760"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>Support multiple style solutions</ImageAlt>
 
@@ -115,7 +140,12 @@ Beyond common JavaScript library development solutions, based on Rspack and the
   - Use [ESLint plugin](https://github.com/rspack-contrib/rsbuild-plugin-eslint) for ESLint validation during development.
   - Use [publint plugin](https://github.com/rspack-contrib/rsbuild-plugin-publint) to check if the library's package.json is configured correctly.
 
-  ![Use publint to check package.json](https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png)
+  <img
+    src="https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png"
+    alt="Use publint to check package.json"
+    width="760"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>Use publint to check package.json</ImageAlt>
 

website/docs/zh/blog/introducing-rslib.mdx

@@ -39,7 +39,12 @@ import { ImageAlt } from '../../../theme/components/ImageAlt';
 
 我们希望 Rslib 能为库开发者提供更强大的能力，并成为 Rspack 生态中的重要组成部分，持续推动基于 Rspack 的统一工具链的发展。
 
-![Rslib 在 Rstack 生态中的位置](https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png)
+<img
+  src="https://assets.rspack.dev/others/assets/rslib/rslib-in-rstack.png"
+  alt="Rslib 在 Rstack 生态中的位置"
+  width="760"
+  style={{ display: 'block', margin: '0 auto' }}
+/>
 
 <ImageAlt>Rslib 在 Rstack 生态中的位置</ImageAlt>
 
@@ -59,19 +64,34 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分
 
   对于 TypeScript 类型声明文件（d.ts），除了支持基于 TypeScript Compiler API 生成 d.ts 文件及相关后处理，也支持基于 [@microsoft/api-extractor](https://www.npmjs.com/package/@microsoft/api-extractor) 对 d.ts 文件进行打包，适合处理依赖复杂的场景。
 
-  ![一个配置文件中包含多种格式](https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png)
+  <img
+    src="https://assets.rspack.dev/others/assets/rslib/multiple-formats-config.png"
+    alt="一个配置文件中包含多种格式"
+    width="400"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>一个配置文件中包含多种格式</ImageAlt>
 
-  ![纯净的 ESM 产物](https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png)
+  <img
+    src="https://assets.rspack.dev/others/assets/rslib/simple-esm-output.png"
+    alt="纯净的 ESM 产物"
+    width="400"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>纯净的 ESM 产物</ImageAlt>
 
 - **bundle & bundleless**
 
   Rslib 支持在构建时选择打包（bundle）或仅做转换（bundleless）这两种常见的构建模式。对于 bundleless 场景，还支持了 [产物路径重定向](/config/lib/redirect) 功能，从而解决了常见的 JavaScript 和 d.ts 产物路径中别名替换以及 ESM 要求严格引用路径的问题。
 
-  ![bundleless 产物结构](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png)
+  <img
+    src="https://assets.rspack.dev/rslib/rslib-bundleless-mode.png"
+    alt="bundleless 产物结构"
+    width="760"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>bundleless 产物结构</ImageAlt>
 
@@ -81,7 +101,12 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分
 
   借助 Rsbuild 的插件系统和生态，Rslib 可以直接复用 Sass、Less、Stylus、CSS Modules、Tailwind CSS 的解决方案。无论是在 bundle 还是 bundleless 的场景下，用户都可以像构建 web 应用一样，直接通过配置或安装相应插件来进行样式的处理。
 
-  ![支持多种样式解决方案](https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png)
+  <img
+    src="https://assets.rspack.dev/others/assets/rslib/multiple-styles-config.png"
+    alt="支持多种样式解决方案"
+    width="760"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
   <ImageAlt>支持多种样式解决方案</ImageAlt>
 
@@ -115,9 +140,14 @@ Rslib 提供了一套全面的库构建解决方案，涵盖了目前大部分
   - 使用 [ESLint 插件](https://github.com/rspack-contrib/rsbuild-plugin-eslint) 在开发时进行 ESLint 校验。
   - 使用 [publint 插件](https://github.com/rspack-contrib/rsbuild-plugin-publint) 检查开发的库的 package.json 是否配置正确。
 
-    ![使用 publint 检查 package.json 正确性](https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png)
+  <img
+    src="https://assets.rspack.dev/others/assets/rslib/publint-screenshot.png"
+    alt="使用 publint 检查 package.json 正确性"
+    width="760"
+    style={{ display: 'block', margin: '0 auto' }}
+  />
 
-    <ImageAlt>使用 publint 检查 package.json 的正确性</ImageAlt>
+  <ImageAlt>使用 publint 检查 package.json 的正确性</ImageAlt>
 
   > 更多插件的信息请参考 [Rsbuild 插件总览](https://rsbuild.dev/zh/plugins/list/)。
 

website/theme/components/ImageAlt.tsx

@@ -4,6 +4,7 @@ export const ImageAlt = (props: { children?: React.ReactNode }) => {
       style={{
         textAlign: 'center',
         fontSize: '0.8rem',
+        margin: '0.5rem 0',
         color: '#999',
       }}
     >