docs: 将图片转为 webp 并压缩，大幅缩小占用空间 (#147)

README.md

@@ -10,13 +10,13 @@ bili-sync 是一款专为 NAS 用户编写的哔哩哔哩同步工具，由 Rust
 ## 效果演示
 
 ### 概览
-![概览](./assets/overview.png)
+![概览](./assets/overview.webp)
 ### 详情
-![详情](./assets/detail.png)
+![详情](./assets/detail.webp)
 ### 播放（使用 infuse）
-![播放](./assets/play.png)
+![播放](./assets/play.webp)
 ### 文件排布
-![文件](./assets/dir.png)
+![文件](./assets/dir.webp)
 
 
 ## 功能与路线图

docs/collection.md

@@ -11,7 +11,7 @@
 2. 两者的图标不同
 
 如下图所示，“合集【命运方舟全剧情解说】”是视频合集，而“阿拉德冒险记”是视频列表。
-![image](./assets/collection.png)
+![image](./assets/collection.webp)
 
 在 bili-sync 的设计中，视频合集的 key 为 `season:{mid}:{season_id}`，而视频列表的 key 为 `series:{mid}:{series_id}`。
 
@@ -21,12 +21,12 @@
 
 ### 视频合集
 
-![image](./assets/season.png)
+![image](./assets/season.webp)
 
 该视频合集的 key 为 `season:521722088:1987140`。
 
 ### 视频列表
 
-![image](./assets/series.png)
+![image](./assets/series.webp)
 
 该视频列表的 key 为 `series:521722088:387214`。

docs/design.md

@@ -15,9 +15,9 @@
 一个非常容易混淆的点是视频合集/视频列表与多页视频的区别：
 
 > [!NOTE]
-> ![bili_collection](./assets/bili_collection.jpg)
+> ![bili_collection](./assets/bili_collection.webp)
 >
->![bili_video](./assets/bili_video.jpg)
+>![bili_video](./assets/bili_video.webp)
 
 这两张图中，上图是视频合集，下图是多页视频。这两者在展示上区别较小，但在结构上有相当大的不同。结合上面对 b 站视频结构的介绍，这个区别可以简单总结为：
 
@@ -41,13 +41,13 @@ EMBY 的一般结构是： `媒体库 - 文件夹 - 电影/电视剧 - 分季/
 
 ### 单 page 的 video
 
-![single_page](./assets/single_page.png)
+![single_page](./assets/single_page.webp)
 
 ### 多 page 的 video
 
-![multi_page](./assets/multi_page.png)
+![multi_page](./assets/multi_page.webp)
 
-![multi_page_detail](./assets/multi_page_detail.png)
+![multi_page_detail](./assets/multi_page_detail.webp)
 
 ## 数据库设计
 

docs/favorite.md

@@ -2,4 +2,4 @@
 
 收藏夹的 ID 获取非常简单，在网页端打开自己的收藏夹列表，切换到你想要获取的收藏夹，然后查看 URL 地址栏中的 `fid` 参数内容即可。
 
-![image](./assets/favorite.png)
+![image](./assets/favorite.webp)

docs/index.md

@@ -20,7 +20,7 @@ hero:
       text: GitHub
       link: https://github.com/amtoaer/bili-sync
   image:
-    src: /logo.png
+    src: /logo.webp
     alt: bili-sync
 
 features:

docs/introduction.md

@@ -17,13 +17,13 @@ bili-sync 是一款专为 NAS 用户编写的哔哩哔哩同步工具。
 
 
 ### 概览
-![概览](/assets/overview.png)
+![概览](/assets/overview.webp)
 ### 详情
-![详情](/assets/detail.png)
+![详情](/assets/detail.webp)
 ### 播放（使用 infuse）
-![播放](/assets/play.png)
+![播放](/assets/play.webp)
 ### 文件排布
-![文件](/assets/dir.png)
+![文件](/assets/dir.webp)
 
 ## 功能与路线图
 

scripts/tools/compress_image.py

@@ -0,0 +1,35 @@
+"""
+供开发者使用的图片压缩工具，批量将项目中的图片压缩为 webp 格式
+"""
+
+import os
+
+
+def main():
+    for root, dirs, files in os.walk(".", topdown=True):
+        dirs[:] = [d for d in dirs if d != "dist" and not d.startswith(".")]
+        if all(dir_name not in root for dir_name in ("assets", "static", "public")):
+            continue
+        for file in files:
+            if "icon" in file or not file.endswith(("jpg", "jpeg", "png")):
+                continue
+            source, target = file, file[: file.rfind(".")] + ".webp"
+            escaped_source, escaped_target = (
+                source.replace(".", r"\."),
+                target.replace(".", r"\."),
+            )
+            source_path, target_path = (
+                os.path.join(root, source),
+                os.path.join(root, target),
+            )
+            os.system(
+                rf"""
+                cwebp -q 80 -sharp_yuv -mt -metadata all {source_path} -o {target_path} && \
+                rm {source_path} && \
+                rg {source} --files-with-matches --no-messages | xargs sed -i '' 's/{escaped_source}/{escaped_target}/g'
+                """
+            )
+
+
+if __name__ == "__main__":
+    main()