Merge pull request #20 from OpenHub-Store/seo/cwv-fixes

Author: rainxchzed

_includes/footer.html

@@ -2,7 +2,7 @@
     <div class="container">
         <div class="footer__inner">
             <div class="footer__brand">
-                <img src="https://raw.githubusercontent.com/OpenHub-Store/GitHub-Store/refs/heads/main/media-resources/app_icon.png" alt="" width="28" height="28" loading="lazy" decoding="async">
+                <img src="/favicon-32x32.png" alt="" width="28" height="28" loading="lazy" decoding="async">
                 GitHub Store
             </div>
             <ul class="footer__links">

_includes/head.html

@@ -89,9 +89,12 @@
 <meta name="twitter:creator" content="@{{ site.social.twitter }}">
 
 <!-- Resource hints -->
-<link rel="preconnect" href="https://raw.githubusercontent.com" crossorigin>
 {%- if page.homepage %}
-<link rel="preload" as="image" href="https://raw.githubusercontent.com/OpenHub-Store/Github-Store/main/media-resources/screenshots/mobile/01.jpg" fetchpriority="high">
+<link rel="preload" as="image" type="image/webp"
+      href="/assets/images/hero/01-640w.webp"
+      imagesrcset="/assets/images/hero/01-320w.webp 320w, /assets/images/hero/01-640w.webp 640w, /assets/images/hero/01-960w.webp 960w"
+      imagesizes="(max-width: 640px) 50vw, 280px"
+      fetchpriority="high">
 {%- endif %}
 
 <!-- CSS (render-blocking, with build-version cache-bust) -->
@@ -169,7 +172,7 @@
   "downloadUrl": "https://github.com/OpenHub-Store/GitHub-Store/releases",
   "license": "https://www.apache.org/licenses/LICENSE-2.0",
   "url": "{{ site.url }}",
-  "logo": "{{ site.url }}/android-chrome-512x512.png",
+  "image": "{{ site.url }}/android-chrome-512x512.png",
   "screenshot": [
     "https://raw.githubusercontent.com/OpenHub-Store/Github-Store/main/media-resources/screenshots/mobile/01.jpg",
     "https://raw.githubusercontent.com/OpenHub-Store/Github-Store/main/media-resources/screenshots/mobile/02.jpg",

_includes/nav.html

@@ -1,7 +1,7 @@
 <header class="top-bar" id="topBar">
     <div class="top-bar__inner">
         <a href="/" class="top-bar__brand">
-            <img src="https://raw.githubusercontent.com/OpenHub-Store/GitHub-Store/refs/heads/main/media-resources/app_icon.png" alt="GitHub Store logo" width="36" height="36" decoding="async">
+            <img src="/favicon-32x32.png" srcset="/favicon-32x32.png 1x, /apple-touch-icon.png 2x" alt="GitHub Store logo" width="36" height="36" decoding="async">
             <span>GitHub Store</span>
         </a>
         <div class="top-bar__actions">

assets/images/hero/01-320w.jpg

@@ -69,7 +69,17 @@ <h1 class="hero__title">The app store for<br><em>GitHub releases</em></h1>
                 </div>
                 <div class="hero__phone">
                     <div class="hero__phone-frame">
-                        <img src="https://raw.githubusercontent.com/OpenHub-Store/Github-Store/main/media-resources/screenshots/mobile/01.jpg" alt="GitHub Store mobile app discover screen with trending GitHub release apps" width="320" height="640" loading="eager" fetchpriority="high" decoding="async">
+                        <picture>
+                            <source type="image/webp"
+                                    srcset="/assets/images/hero/01-320w.webp 320w, /assets/images/hero/01-640w.webp 640w, /assets/images/hero/01-960w.webp 960w"
+                                    sizes="(max-width: 640px) 50vw, 280px">
+                            <img src="/assets/images/hero/01-640w.jpg"
+                                 srcset="/assets/images/hero/01-320w.jpg 320w, /assets/images/hero/01-640w.jpg 640w, /assets/images/hero/01-960w.jpg 960w"
+                                 sizes="(max-width: 640px) 50vw, 280px"
+                                 alt="GitHub Store mobile app discover screen with trending GitHub release apps"
+                                 width="320" height="694"
+                                 loading="eager" fetchpriority="high" decoding="async">
+                        </picture>
                     </div>
                 </div>
             </div>