diff --git a/templates/main/article.html b/templates/main/article.html
index 2096d73..56a4c7e 100644
--- a/templates/main/article.html
+++ b/templates/main/article.html
@@ -1,7 +1,7 @@
 <th:block xmlns:th="https://www.thymeleaf.org"
      th:fragment="article (post, type)"
      th:with="updateInterval = ${T(java.lang.Math).floor((#dates.createNow().getTime()/1000.0 - post.status.lastModifyTime.getEpochSecond())/86400.0).intValue()},
-     thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'l')}">
+     thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'xl')}">
 
     <div th:if="${!#strings.isEmpty(thumbnail)}" class="card widget">
         <div class="cover-image" th:style="'background-image: url(' + ${thumbnail} + ')'">
diff --git a/templates/main/article_list.html b/templates/main/article_list.html
index bdb76b5..c2cb20a 100644
--- a/templates/main/article_list.html
+++ b/templates/main/article_list.html
@@ -1,7 +1,7 @@
 <th:block xmlns:th="https://www.thymeleaf.org"
           th:fragment="articleList (posts)">
   <th:block th:each="post : ${posts}"
-            th:with="thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'l')},
+            th:with="thumbnail = ${#strings.isEmpty(post.spec.cover) ? #strings.isEmpty(theme.config.post.default_thumbnail) ? '' : theme.config.post.default_thumbnail + (#strings.contains(theme.config.post.default_thumbnail, '?') ? '&' : '?') + 'id=' + post.metadata.name : thumbnail.gen(post.spec.cover, 'xl')},
             thumbnail_mode = ${(theme.config.post.top_thumbnail_mode == 'grid' || (!post.spec.pinned && theme.config.post.thumbnail_mode == 'grid'))? 'grid' : (!#strings.isEmpty(post.metadata.annotations.get('thumbnail_mode')) && post.metadata.annotations.get('thumbnail_mode') != 'none')? post.metadata.annotations.get('thumbnail_mode') : post.spec.pinned ? theme.config.post.top_thumbnail_mode : theme.config.post.thumbnail_mode}">
     <div th:if="${!#strings.isEmpty(thumbnail) && thumbnail_mode == 'back'}" class="card widget card-cover">
       <a th:href="${post.status.permalink}">
diff --git a/templates/moment.html b/templates/moment.html
index f583119..f18940d 100644
--- a/templates/moment.html
+++ b/templates/moment.html
@@ -13,7 +13,11 @@
         <div class="main-content not-toc" data-target="Moment" th:data-id="${moment.metadata.name}">
           [(${moment.spec.content.html})]
           <mew-photos th:if="${!#lists.isEmpty(moment.spec.content.medium)}">
-            <img th:each="momentItem : ${moment.spec.content.medium}" th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
+            <img th:each="momentItem : ${moment.spec.content.medium}" th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}"
+                 th:srcset="|${thumbnail.gen(momentItem.url, 's')} 400w,
+                                 ${thumbnail.gen(momentItem.url, 'm')} 800w,
+                                 ${thumbnail.gen(momentItem.url, 'l')} 1200w|"
+                 sizes="(max-width: 1200px) 100vw, 1200px"/>
           </mew-photos>
           <th:block th:if="${!#lists.isEmpty(moment.spec.content.medium)}" th:each="momentItem : ${moment.spec.content.medium}">
             <mew-video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></mew-video>
diff --git a/templates/moments.html b/templates/moments.html
index 134c172..1fff4d6 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -24,7 +24,11 @@
         <div class="main-content not-toc" data-target="Moment" th:data-id="${moment.metadata.name}">
           [(${moment.spec.content.html})]
           <mew-photos th:if="${!#lists.isEmpty(moment.spec.content.medium)}">
-            <img th:each="momentItem : ${moment.spec.content.medium}" th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
+            <img th:each="momentItem : ${moment.spec.content.medium}" th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}"
+                 th:srcset="|${thumbnail.gen(momentItem.url, 's')} 400w,
+                                 ${thumbnail.gen(momentItem.url, 'm')} 800w,
+                                 ${thumbnail.gen(momentItem.url, 'l')} 1200w|"
+                 sizes="(max-width: 1200px) 100vw, 1200px"/>
           </mew-photos>
           <th:block th:if="${!#lists.isEmpty(moment.spec.content.medium)}" th:each="momentItem : ${moment.spec.content.medium}">
             <mew-video th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></mew-video>
diff --git a/templates/photos.html b/templates/photos.html
index a36bc64..9b76d8d 100644
--- a/templates/photos.html
+++ b/templates/photos.html
@@ -12,7 +12,12 @@
         </div>
         <div class="photos-gallery load-block loading">
             <div th:each="photo : ${photos.items}" th:href="${photo.spec.url}" data-fancybox="gallery" th:data-caption="${#strings.defaultString(photo.spec.description, photo.spec.displayName)}">
-                <img width="100%" height="100%" th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}"/>
+                <img width="100%" height="100%" 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,
+                                 ${thumbnail.gen(photo.spec.url, 'xl')} 1600w|"
+                     sizes="(max-width: 1600px) 100vw, 1600px" th:alt="${photo.spec.displayName}"/>
                 <div class="info">
                     <div>
                         <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M834.9 913.6H189.7c-69.2 0-125.5-56.3-125.5-125.5V381.5c0-69.2 56.3-125.5 125.5-125.5h14.7c14.4 0 27.3-8.6 32.9-21.8l19.2-45.1c19.7-46.3 65-76.3 115.4-76.3h280.6c50.4 0 95.7 30 115.4 76.3l19.2 45c5.7 13.2 18.6 21.8 33 21.8h14.7c69.2 0 125.5 56.3 125.5 125.5V788c0.1 69.3-56.2 125.6-125.4 125.6z m-645.2-568c-19.8 0-35.8 16.1-35.8 35.8V788c0 19.8 16.1 35.8 35.8 35.8h645.2c19.8 0 35.8-16.1 35.8-35.8V381.5c0-19.8-16.1-35.8-35.8-35.8h-14.7c-50.4 0-95.7-30-115.4-76.3l-19.2-45c-5.6-13.2-18.6-21.8-33-21.8H372c-14.4 0-27.3 8.6-33 21.8l-19.2 45c-19.7 46.3-65 76.3-115.4 76.3h-14.7z"></path><path d="M512.3 742.8c-97.4 0-176.6-79.2-176.6-176.6s79.2-176.6 176.6-176.6 176.6 79.2 176.6 176.6-79.2 176.6-176.6 176.6z m0-263.6c-48 0-87 39-87 87s39 87 87 87 87-39 87-87-39-87-87-87z"></path></svg>