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

amtoaer · Jul 22, 2024 · 86f2d8c · 86f2d8c
1 parent 991ce3e
commit 86f2d8c
Show file tree

Hide file tree

Showing 43 changed files with 53 additions and 18 deletions.
diff --git a/README.md b/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)
 
 
 ## 功能与路线图

diff --git a/assets/detail.png b/assets/detail.png
diff --git a/assets/detail.webp b/assets/detail.webp
diff --git a/assets/dir.png b/assets/dir.png
diff --git a/assets/dir.webp b/assets/dir.webp
diff --git a/assets/overview.png b/assets/overview.png
diff --git a/assets/overview.webp b/assets/overview.webp
diff --git a/assets/play.png b/assets/play.png
diff --git a/assets/play.webp b/assets/play.webp
diff --git a/docs/assets/bili_collection.jpg b/docs/assets/bili_collection.jpg
diff --git a/docs/assets/bili_collection.webp b/docs/assets/bili_collection.webp
diff --git a/docs/assets/bili_video.jpg b/docs/assets/bili_video.jpg
diff --git a/docs/assets/bili_video.webp b/docs/assets/bili_video.webp
diff --git a/docs/assets/collection.png b/docs/assets/collection.png
diff --git a/docs/assets/collection.webp b/docs/assets/collection.webp
diff --git a/docs/assets/detail.png b/docs/assets/detail.png
diff --git a/docs/assets/detail.webp b/docs/assets/detail.webp
diff --git a/docs/assets/dir.png b/docs/assets/dir.png
diff --git a/docs/assets/dir.webp b/docs/assets/dir.webp
diff --git a/docs/assets/favorite.png b/docs/assets/favorite.png
diff --git a/docs/assets/favorite.webp b/docs/assets/favorite.webp
diff --git a/docs/assets/multi_page.png b/docs/assets/multi_page.png
diff --git a/docs/assets/multi_page.webp b/docs/assets/multi_page.webp
diff --git a/docs/assets/multi_page_detail.png b/docs/assets/multi_page_detail.png
diff --git a/docs/assets/multi_page_detail.webp b/docs/assets/multi_page_detail.webp
diff --git a/docs/assets/overview.png b/docs/assets/overview.png
diff --git a/docs/assets/overview.webp b/docs/assets/overview.webp
diff --git a/docs/assets/play.png b/docs/assets/play.png
diff --git a/docs/assets/play.webp b/docs/assets/play.webp
diff --git a/docs/assets/season.png b/docs/assets/season.png
diff --git a/docs/assets/season.webp b/docs/assets/season.webp
diff --git a/docs/assets/series.png b/docs/assets/series.png
diff --git a/docs/assets/series.webp b/docs/assets/series.webp
diff --git a/docs/assets/single_page.png b/docs/assets/single_page.png
diff --git a/docs/assets/single_page.webp b/docs/assets/single_page.webp
diff --git a/docs/collection.md b/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`。
diff --git a/docs/design.md b/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)
 
 ## 数据库设计
 

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

diff --git a/docs/introduction.md b/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)
 
 ## 功能与路线图
 

diff --git a/docs/public/logo.png b/docs/public/logo.png
diff --git a/docs/public/logo.webp b/docs/public/logo.webp
diff --git a/scripts/tools/compress_image.py b/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()