diff --git a/README-zh_CN.md b/README-zh_CN.md
index c8207cd..8953b37 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -131,7 +131,7 @@
 
 在边栏列中显示标题装饰，而不是内联在文本中。适用于实时阅览和源码模式。详细可参考 [#24](https://github.com/dragonish/obsidian-heading-decorator/issues/24)。预览效果：
 
-![gutter](images/gutter.png)
+![gutter](images/gutter.jpg)
 
 ### 阅读视图的其他设置
 
diff --git a/README-zh_TW.md b/README-zh_TW.md
index 1c30c17..cb3ac3f 100644
--- a/README-zh_TW.md
+++ b/README-zh_TW.md
@@ -131,7 +131,7 @@
 
 在邊欄列中顯示標題裝飾，而不是內嵌在文字中。適用於實際預覽和原始碼模式。詳細可參考 [#24](https://github.com/dragonish/obsidian-heading-decorator/issues/24)。預覽效果：
 
-![gutter](images/gutter.png)
+![gutter](images/gutter.jpg)
 
 ### 閱讀的其他設定
 
diff --git a/README.md b/README.md
index 8855afc..7d2c140 100644
--- a/README.md
+++ b/README.md
@@ -133,7 +133,7 @@ For the *Ignore the single heading at the top-level* setting, if the top-level h
 
 Render heading decorations in a gutter column instead of inline with the text. Applies to both live preview and source mode. For details, see [#24](https://github.com/dragonish/obsidian-heading-decorator/issues/24). Preview effect:
 
-![gutter](images/gutter.png)
+![gutter](images/gutter.jpg)
 
 ### Other settings for reading view
 
diff --git a/images/gutter.jpg b/images/gutter.jpg
new file mode 100644
index 0000000..2fbe7aa
Binary files /dev/null and b/images/gutter.jpg differ
diff --git a/images/gutter.png b/images/gutter.png
deleted file mode 100644
index 88e2a9e..0000000
Binary files a/images/gutter.png and /dev/null differ