docs(site): update pic (#1281)

Author: quanru

apps/site/docs/en/bridge-mode-by-chrome-extension.mdx

@@ -8,7 +8,7 @@ The bridge mode in the Midscene Chrome extension is a tool that allows you to us
 
 Using the desktop version of Chrome allows you to reuse all cookies, plugins, page status, and everything else you want. You can work with automation scripts to complete your tasks. This mode is commonly referred to as 'man-in-the-loop' in the context of automation.
 
-![bridge mode](/midscene-bridge-mode.jpg)
+![bridge mode](/midscene-bridge-mode.png)
 
 :::info Demo Project
 check the demo project of bridge mode: [https://github.com/web-infra-dev/midscene-example/blob/main/bridge-mode-demo](https://github.com/web-infra-dev/midscene-example/blob/main/bridge-mode-demo)
@@ -57,7 +57,7 @@ Promise.resolve(
 Start the chrome extension and switch to 'Bridge Mode' tab. Click "Allow connection".
 
 <p align="center">
-  <img src="/bridge_in_extension.jpg" alt="bridge in extension" width="400"/>
+  <img src="/bridge_in_extension.png" alt="bridge in extension" width="400"/>
 </p>
 
 ## Step 5. Run the script

apps/site/docs/public/android-playground.png

@@ -6,7 +6,7 @@ import { PackageManagerTabs } from '@theme';
 
 使用桌面版本的 Chrome 可以让你复用已有的 cookie、插件、页面状态等。你可以使用自动化脚本与操作者互动，来完成你的任务。
 
-![bridge mode](/midscene-bridge-mode.jpg)
+![bridge mode](/midscene-bridge-mode.png)
 
 :::info Demo Project
 查看桥接模式（Bridge Mode）的样例项目：: [https://github.com/web-infra-dev/midscene-example/blob/main/bridge-mode-demo](https://github.com/web-infra-dev/midscene-example/blob/main/bridge-mode-demo)
@@ -58,7 +58,7 @@ Promise.resolve(
 启动你的桌面 Chrome 和 Midscene 插件，并切换到 'Bridge Mode' 标签页。点击 "Allow connection"。
 
 <p align="center">
-  <img src="/bridge_in_extension.jpg" alt="bridge in extension" width="400"/>
+  <img src="/bridge_in_extension.png" alt="bridge in extension" width="400"/>
 </p>
 
 ## 第四步：运行脚本