From a15aab395ab54b7c28eb1c0397317883b456c1f0 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 22:26:41 +0300
Subject: [PATCH] feat(website): add alt + lazy loading

---
 apps/website/src/components/Card.tsx   | 2 +-
 apps/website/src/components/Header.tsx | 2 +-
 apps/website/src/pages/Home/index.tsx  | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/components/Card.tsx b/apps/website/src/components/Card.tsx
index 60a39e92e..e684d18f5 100644
--- a/apps/website/src/components/Card.tsx
+++ b/apps/website/src/components/Card.tsx
@@ -14,7 +14,7 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 export default function Card({ title, children, imageUrl, iconSvg, className, moreInfoUrl, ...restProps }: CardProps) {
     return (
         <div className={`card ${className}`} {...restProps}>
-            {imageUrl && <img class="image" src={imageUrl} />}
+            {imageUrl && <img class="image" src={imageUrl} loading="lazy" />}
 
             <div className="card-content">
                 <h3>
diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx
index da609e186..7c6bd37dd 100644
--- a/apps/website/src/components/Header.tsx
+++ b/apps/website/src/components/Header.tsx
@@ -29,7 +29,7 @@ export function Header() {
             <div class="content-wrapper">
                 <div class="first-row">
                     <a class="banner" href="/">
-                        <img src={logoPath} width="300" height="300" />&nbsp;<span>Trilium Notes</span>
+                        <img src={logoPath} width="300" height="300" alt="Trilium Notes logo" />&nbsp;<span>Trilium Notes</span>
                     </a>
 
                     <Link
diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx
index f19e779d5..4bfb19df1 100644
--- a/apps/website/src/pages/Home/index.tsx
+++ b/apps/website/src/pages/Home/index.tsx
@@ -84,7 +84,7 @@ function HeroSection() {
 
             </div>
 
-            {screenshotUrl && <img class="screenshot" src={screenshotUrl} />}
+            {screenshotUrl && <img class="screenshot" src={screenshotUrl} alt="Screenshot of the Trilium Notes desktop application" />}
         </Section>
     )
 }
@@ -258,7 +258,7 @@ function ListWithScreenshot({ items, horizontal, cardExtra }: {
             <div className="details">
                 {selectedItem && (
                     <>
-                        <img src={selectedItem.imageUrl} />
+                        <img src={selectedItem.imageUrl} alt="Screenshot of the feature being selected" loading="lazy" />
                     </>
                 )}
             </div>