diff --git a/_layouts/post.html b/_layouts/post.html
index 0826f3d151f..5c61f04205f 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -44,8 +44,8 @@ <h1 data-toc-skip>{{ page.title }}</h1>
 
       <div class="post-content">
 
-        {% if page.image %}
-          <img src="{{ page.image }}" class="preview-img" alt="Preview Image">
+        {% if page.image.src %}
+          <img src="{{ page.image.src }}" class="preview-img" alt="{{ page.image.alt | default: "Preview Image" }}">
         {% endif %}
 
         {{ content }}
diff --git a/_posts/2019-08-08-text-and-typography.md b/_posts/2019-08-08-text-and-typography.md
index 949a343dcdb..edba338c9c9 100644
--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -6,7 +6,8 @@ categories: [Blogging, Demo]
 tags: [typography]
 math: true
 mermaid: true
-image: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
+image:
+  src: https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/commons/devices-mockup.png
 ---
 
 This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.
diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md
index 64e3a9e0fae..15567df8445 100644
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -84,11 +84,13 @@ Then you can use it like other markdown language: surround the graph code with `
 
 ### Preview image
 
-If you want to add an image to the top of the post contents, specify the url for the image by:
+If you want to add an image to the top of the post contents, specify the url and alt attribute for the image:
 
 ```yaml
 ---
-image: /path/to/image-file
+image:
+  src: /path/to/image/file
+  alt: image alternative text
 ---
 ```