为 image 与 audio 增加 width 及 height 属性,优化性能

templates/macro/content-links.html

@@ -20,6 +20,8 @@ <h3 class="link-title">
                   th:attr="data-src=${link.spec.logo}"
                   th:src="${#theme.assets('/images/load/trans.ajax-spinner-preloader.svg')}" 
                   th:alt="${link.spec.displayName}"
+                  width="65"
+                  height="65"
                   onerror="imgError(this)">
                 <span class="sitename" th:text="${link.spec.displayName}"></span>
                 <div class="linkdes" th:text="${link.spec.description}"></div>

templates/macro/content-masonry-photos.html

@@ -39,6 +39,8 @@
                 th:src="${#strings.isEmpty(photo.spec.cover) ? #theme.assets('/images/load/load.gif') : photo.spec.cover}"
                 th:alt="${photo.spec.displayName}"
                 th:data-src="${photo.spec.url}"
+                height="500"
+                width="500"
               />
             </header>
             <figcaption class="gallery-caption">

templates/macro/content-post.html

@@ -44,7 +44,7 @@
           <div class="reward-main">
             <ul class="reward-row">
               <li th:each="item : ${theme.config.post.reward}">
-                <img th:src="${item.code}" alt="reword"/>
+                <img th:src="${item.code}" alt="reword" width="325" height="325"/>
                 <span class="reward-name" th:text="${item.label}"></span>
               </li>
             </ul>

templates/macro/content-thumb.html

@@ -81,7 +81,9 @@ <h1 th:text="${post.spec.title}"></h1>
           class="lazyload"
           th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
           th:data-src="${post.spec.cover}"
-          alt=""
+          alt="thumbnail of the cover of the post"
+          width="430"
+          height="300"
           onerror="imgError(this)"
         />
         <img
@@ -98,15 +100,19 @@ <h1 th:text="${post.spec.title}"></h1>
           data-sizes="auto"
           class="lazyload"
           th:classappend="${theme.config.random_image.rimage_cover_lqip == 'lowquality' ? 'blur-up' : ''}"
-          alt=""
+          alt="thumbnail of the cover of the post"
+          width="430"
+          height="300"
           onerror="imgError(this)"
         />
         <img
           th:if="${#strings.isEmpty(post.spec.cover)} and (!${theme.config.random_image.rimage_cover_open} or !${#annotations.getOrDefault(post, 'randomImage', true)} or ${#strings.isEmpty(theme.config.random_image.rimage_url)})"
           class="lazyload"
           th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
           th:data-src="${#theme.assets('/images/default/temp.webp')}"
-          alt=""
+          alt="thumbnail of the cover of the post"
+          width="430"
+          height="300"
           onerror="imgError(this)"
         />
       </a>

templates/macro/content.html

@@ -25,12 +25,12 @@
       </div>
       <img
         th:if="${not #strings.isEmpty(post.spec.cover)}"
-        width="150"
-        height="150"
         class="lazyload"
         th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
         th:data-src="${post.spec.cover}"
-        alt=""
+        alt="thumbnail of the cover of the post"
+        width="100"
+        height="100"
         onerror="imgError(this)"
       />
       <img
@@ -48,15 +48,19 @@
         data-sizes="auto"
         class="lazyload attachment-post-thumbnail size-post-thumbnail"
         th:classappend="${theme.config.random_image.rimage_cover_lqip == 'lowquality' ? 'blur-up' : ''}"
-        alt=""
+        alt="thumbnail of the cover of the post"
+        width="100"
+        height="100"
         onerror="imgError(this)"
       />
       <img
         th:if="${#strings.isEmpty(post.spec.cover)} and (!${theme.config.random_image.rimage_cover_open} or !${#annotations.getOrDefault(post, 'randomImage', true)} or ${#strings.isEmpty(theme.config.random_image.rimage_url)})"
         class="lazyload"
         th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
         th:data-src="${#theme.assets('/images/default/temp.webp')}"
-        alt=""
+        alt="thumbnail of the cover of the post"
+        width="100"
+        height="100"
         onerror="imgError(this)"
       />
     </a>

templates/macro/page-header.html

@@ -23,7 +23,9 @@
             th:attr="data-src=${frontCover}"
             th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
             itemprop="contentUrl"
-            alt=""
+            alt="large picture of the cover"
+            width="1920"
+            height="400"
           />
         </th:block>
 
@@ -45,7 +47,9 @@
             th:classappend="${theme.config.random_image.rimage_cover_lqip == 'lowquality' ? 'blur-up' : ''}"
             onerror="imgError(this)"
             itemprop="contentUrl"
-            alt=""
+            alt="large picture of the cover"
+            width="1920"
+            height="400"
           />
         </th:block>
       </div>

templates/module/authorprofile.html

@@ -6,6 +6,8 @@
           th:src="${post.owner.avatar ?: #theme.assets('/images/default/avatar.webp')}"
           itemprop="image"
           th:alt="${post.owner.displayName}"
+          width="70"
+          height="70"
         />
       </a>
       <div class="meta">

templates/module/feature.html

@@ -16,7 +16,13 @@ <h1 class="fes-title" style="font-family: 'Ubuntu', sans-serif">
     <div class="top-feature-item" th:each="feature : ${theme.config.focus.features}">
       <div class="feature-container">
         <a data-pjax th:href="${feature.link}" target="_blank" aria-label="visit the concentrated content">
-          <img th:src="${feature.image}" th:alt="${feature.title}" />
+          <img
+            th:src="${feature.image}"
+            th:alt="${feature.title}"
+            alt="cover picture of focusing on content"
+            width="780"
+            height="160"
+          />
           <div class="info">
             <h3>
               <span th:text="${feature.title}"></span>

templates/module/footer.html

@@ -2,25 +2,40 @@
 <th:block th:fragment="footer">
   <div class="footer-logo">
     <p
-      th:style="'background-image: url(' + ${theme.config.others.footer_logo ?: #theme.assets('/images/footer/sakura.svg')} + ');'">
-    </p>
+      th:style="'background-image: url(' + ${theme.config.others.footer_logo ?: #theme.assets('/images/footer/sakura.svg')} + ');'"
+    ></p>
   </div>
   <div class="footer-halo">
     <halo:footer />
   </div>
   <div class="footer-copyright">
     <!--/* 请尊重作者，务必保留版权声明! */-->
     <p>
-      <span>Powered
+      <span
+        >Powered
         <span class="iconify animated" data-icon="fa:vimeo"></span>
         by
-        <a rel="me" target="_blank" href="http://halo.run" title="一款现代化的开源建站 / CMS 系统。" aria-label="engines are supported on this website">Halo</a>
+        <a
+          rel="me"
+          target="_blank"
+          href="http://halo.run"
+          title="一款现代化的开源建站 / CMS 系统。"
+          aria-label="engines are supported on this website"
+          >Halo</a
+        >
       </span>
       •
-      <span>Crafted with
+      <span
+        >Crafted with
         <span class="iconify" data-icon="fa-heart"></span>
         by
-        <a rel="me" target="_blank" href="https://github.com/LIlGG/halo-theme-sakura" aria-label="the theme used by this website">LIlGG</a>
+        <a
+          rel="me"
+          target="_blank"
+          href="https://github.com/LIlGG/halo-theme-sakura"
+          aria-label="the theme used by this website"
+          >LIlGG</a
+        >
       </span>
     </p>
   </div>
@@ -32,16 +47,30 @@
     </p>
     <p class="footer-beian">
       <th:block th:if="${not #strings.isEmpty(theme.config.others.footer_case_number)}">
-        <a href="https://beian.miit.gov.cn/" target="_blank" th:text="${theme.config.others.footer_case_number}" aria-label="gongan filing address"></a>
+        <a
+          href="https://beian.miit.gov.cn/"
+          target="_blank"
+          th:text="${theme.config.others.footer_case_number}"
+          aria-label="gongan filing address"
+        ></a>
       </th:block>
       <th:block th:if="${not #strings.isEmpty(theme.config.others.footer_ga_case_number)}">
-        <a th:href="@{|https://beian.mps.gov.cn/#/query/webSearch?code=${theme.config.others.footer_ga_select_number}|}"
-          style="margin-left: 8px;"
-          target="_blank" aria-label="gongan filing address">
-          <img th:src="${#theme.assets('/images/footer/gongan.png')}" alt="" width="16px" style="margin-right: 4px;"/>
+        <a
+          th:href="@{|https://beian.mps.gov.cn/#/query/webSearch?code=${theme.config.others.footer_ga_select_number}|}"
+          style="margin-left: 8px"
+          target="_blank"
+          aria-label="gongan filing address"
+        >
+          <img
+            th:src="${#theme.assets('/images/footer/gongan.png')}"
+            alt="badge for gongan"
+            width="16"
+            height="16"
+            style="margin-right: 4px"
+          />
           <span th:text="${theme.config.others.footer_ga_case_number}"></span>
         </a>
       </th:block>
     </p>
   </div>
-</th:block>
+</th:block>

templates/module/header/brand.html

@@ -2,7 +2,7 @@
 <div class="site-branding" th:fragment="brand">
   <div th:if="${not #strings.isEmpty(site.logo)} and ${theme.config.general.site_title == 'logo'}" class="site-title">
     <a data-pjax th:href="${site.url}" aria-label="access the homepage of this website">
-      <img th:src="${site.logo}" th:alt="${site.title}"/>
+      <img th:src="${site.logo}" th:alt="${site.title}" height="40" width="40"/>
     </a>
   </div>
   <h1 th:if="${#strings.isEmpty(site.logo)} or ${theme.config.general.site_title == 'text'}" class="site-title">

templates/module/header/user.html

@@ -3,7 +3,12 @@
   th:with="currentUser = ${contributorFinder.getContributor(#authentication.name)}"
   th:fragment="user"
 >
-  <img th:src="${currentUser.avatar ?: #theme.assets('/images/default/none.png')}" width="30" height="30" alt="" />
+  <img
+    th:src="${currentUser.avatar ?: #theme.assets('/images/default/none.png')}"
+    width="30"
+    height="30"
+    alt="user avatar"
+  />
   <div class="header-user-menu">
     <th:block sec:authorize="isAnonymous()">
       <div class="herder-user-name no-logged">

templates/module/home/focus_tou.html

@@ -2,8 +2,20 @@
   <th:block th:if="${theme.config.mainScreen.focus_tou == 'avatar'}">
     <div class="header-tou no-select">
       <a th:href="${site.url}" aria-label="access the homepage of this website.">
-        <img th:if="${#strings.isEmpty(site.logo)}" th:src="@{/assets/images/default/avatar.webp}" alt="" />
-        <img th:unless="${#strings.isEmpty(site.logo)}" th:src="${site.logo}" alt="" />
+        <img
+          th:if="${#strings.isEmpty(site.logo)}"
+          th:src="@{/assets/images/default/avatar.webp}"
+          alt="site logo"
+          height="120"
+          width="120"
+        />
+        <img
+          th:unless="${#strings.isEmpty(site.logo)}"
+          th:src="${site.logo}"
+          alt="site logo"
+          height="120"
+          width="120"
+        />
       </a>
     </div>
   </th:block>
@@ -15,4 +27,4 @@
       th:text="${theme.config.mainScreen.glitch_text}"
     ></h1>
   </th:block>
-</th:block>
+</th:block>

templates/module/home/img_box.html

@@ -13,7 +13,9 @@
       th:data-url="${imageUrl}"
       th:data-currIndex="${randomNum}"
       class="lazyload cover-bg lazyload blur-up bg-change-js"
-      alt=""
+      alt="background picture of the home page"
+      width="1920"
+      height="1080"
       onerror="imgError(this)"
     />
     <div class="blend-overlay"></div>
@@ -24,7 +26,9 @@
     <img
       class="cover-bg"
       th:src="${theme.config.mainScreen.focus_img_1 ?: #theme.assets('/images/default/hd.webp')}"
-      alt=""
+      alt="background picture of the home page"
+      width="1920"
+      height="1080"
     />
   </th:block>
 
@@ -43,11 +47,11 @@
       <div class="top-social" th:if="${not #arrays.isEmpty(theme.config.sns.items)}">
         <ul>
           <li id="bg-prev">
-            <img class="flipx" th:src="@{/assets/images/next-b.svg}" alt="prev" />
+            <img class="flipx" th:src="@{/assets/images/next-b.svg}" alt="prev" width="28" height="28" />
           </li>
           <th:block th:replace="~{module/home/top_social}"></th:block>
           <li id="bg-next">
-            <img th:src="@{/assets/images/next-b.svg}" alt="next" />
+            <img th:src="@{/assets/images/next-b.svg}" alt="next" width="28" height="28" />
           </li>
         </ul>
       </div>

templates/module/home/top_social.html

@@ -14,13 +14,13 @@
 
   <th:block th:fragment="common_social(item)">
     <th:block th:if="${item.type == 'preset'}">
-      <img th:src="@{/assets/images/sns/{icon}(icon=${item.icon})}" alt="sns" />
+      <img th:src="@{/assets/images/sns/{icon}(icon=${item.icon})}" alt="sns" width="28" height="28" />
     </th:block>
     <th:block th:if="${item.type == 'custom'}">
-      <img th:src="${item.custom_icon}" alt="sns" />
+      <img th:src="${item.custom_icon}" alt="sns" width="28" height="28" />
     </th:block>
     <div th:if="${item.url_type == 'image'}" class="social-image-inner">
-      <img th:src="${item.image}" alt="sns" />
+      <img th:src="${item.image}" alt="sns" width="28" height="28" />
     </div>
   </th:block>
 </th:block>