diff --git a/templates/modules/featured-post-card.html b/templates/modules/featured-post-card.html
index 2bf1811..bab1e3b 100644
--- a/templates/modules/featured-post-card.html
+++ b/templates/modules/featured-post-card.html
@@ -7,6 +7,11 @@
       <img
         th:src="${post.spec.cover}"
         th:alt="${post.spec.title}"
+        th:srcset="|${thumbnail.gen(post.spec.cover, 's')} 400w,
+                    ${thumbnail.gen(post.spec.cover, 'm')} 800w,
+                    ${thumbnail.gen(post.spec.cover, 'l')} 1200w,
+                    ${thumbnail.gen(post.spec.cover, 'xl')} 1600w|"
+        sizes="(max-width: 1600px) 100vw, 1600px"
         class="size-full object-cover transition-all duration-500"
       />
     </a>
diff --git a/templates/modules/post-card.html b/templates/modules/post-card.html
index 1df5cde..37a94e0 100644
--- a/templates/modules/post-card.html
+++ b/templates/modules/post-card.html
@@ -12,6 +12,10 @@
       <img
         th:src="${post.spec.cover}"
         th:alt="${post.spec.title}"
+        th:srcset="|${thumbnail.gen(post.spec.cover, 's')} 400w,
+                    ${thumbnail.gen(post.spec.cover, 'm')} 800w,
+                    ${thumbnail.gen(post.spec.cover, 'l')} 1200w|"
+        sizes="(max-width: 1200px) 100vw, 1200px"
         class="size-full object-cover transition-all duration-500"
         th:classappend="${animation} ? 'group-hover:scale-105'"
       />
diff --git a/templates/moments.html b/templates/moments.html
index f6b28e1..5c9aa56 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -58,6 +58,10 @@ <h1 class="mb-9 text-2xl font-medium dark:text-slate-50">瞬间</h1>
                     th:if="${#strings.equals(media.type,'PHOTO')}"
                     class="transform-gpu rounded-lg object-cover"
                     th:src="${media.url}"
+                    th:srcset="|${thumbnail.gen(media.url, 's')} 400w,
+                                ${thumbnail.gen(media.url, 'm')} 800w,
+                                ${thumbnail.gen(media.url, 'l')} 1200w|"
+                    sizes="(max-width: 1200px) 100vw, 1200px"
                   />
                   <div
                     th:if="${#strings.equals(media.type,'VIDEO')}"
diff --git a/templates/photos.html b/templates/photos.html
index 2f99b32..db707d5 100644
--- a/templates/photos.html
+++ b/templates/photos.html
@@ -34,6 +34,10 @@ <h1 class="mb-9 text-2xl font-medium dark:text-slate-50">图库</h1>
           <img
             class="animated fadeIn transform-gpu rounded-lg transition-all"
             th:src="${photo.spec.url}"
+            th:srcset="|${thumbnail.gen(photo.spec.url, 's')} 400w,
+                        ${thumbnail.gen(photo.spec.url, 'm')} 800w,
+                        ${thumbnail.gen(photo.spec.url, 'l')} 1200w|"
+            sizes="(max-width: 1200px) 100vw, 1200px"
             th:alt="${photo.spec.displayName}"
           />
         </div>
diff --git a/theme.yaml b/theme.yaml
index 1c44fbb..81dc915 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -19,7 +19,7 @@ spec:
   settingName: "theme-earth-setting"
   configMapName: "theme-earth-configMap"
   version: 1.9.1
-  requires: ">=2.8.0"
+  requires: ">=2.19.0"
   license:
     - name: "GPL-3.0"
       url: "https://github.com/halo-dev/theme-earth/blob/main/LICENSE"