optimize images

hellocoop · Nov 22, 2023 · 342dad4 · 342dad4
1 parent 1885553
commit 342dad4
Show file tree

Hide file tree

Showing 11 changed files with 10 additions and 10 deletions.
diff --git a/src/assets/corporate-member.png b/src/assets/corporate-member.png
diff --git a/src/assets/corporate-member.webp b/src/assets/corporate-member.webp
diff --git a/src/assets/dev.png b/src/assets/dev.png
diff --git a/src/assets/dev.webp b/src/assets/dev.webp
diff --git a/src/assets/dick.png b/src/assets/dick.png
diff --git a/src/assets/dick.webp b/src/assets/dick.webp
diff --git a/src/assets/news.png b/src/assets/news.png
diff --git a/src/assets/news.webp b/src/assets/news.webp
diff --git a/src/assets/user.png b/src/assets/user.png
diff --git a/src/assets/user.webp b/src/assets/user.webp
diff --git a/src/index.html b/src/index.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
 
 <head>
     <title>Hell&#333;</title>
@@ -409,7 +409,7 @@
             <div
                 class="container max-w-5xl mx-auto px-4 py-8 flex flex-col md:flex-row space-x-0 space-y-10 md:space-y-0 md:space-x-10">
                 <div class="w-full md:w-1/3">
-                    <img src="./assets/user.png" alt="User" style="filter: invert(1);" class="h-10 opacity-90">
+                    <img src="./assets/user.webp" alt="User" width="40" height="40" style="filter: invert(1);" class="h-10 opacity-90">
                     <h3 class="font-semibold text-xl mt-4">Hellō for Users</h3>
                     <p class="mt-2 opacity-75 md:h-28">Login how you want without being tracked. Verify your identity
                         once and conveniently prove who you are when and where you want.</p>
@@ -483,7 +483,7 @@ <h3 class="font-semibold text-xl mt-4">Hellō for Users</h3>
                     </div>
                 </div>
                 <div class="w-full md:w-1/3">
-                    <img src="./assets/dev.png" alt="Developer" style="filter: invert(1);" class="h-10 opacity-90">
+                    <img src="./assets/dev.webp" width="40" height="40" alt="Developer" style="filter: invert(1);" class="h-10 opacity-90">
                     <h3 class="font-semibold text-lg mt-4">Hellō for Developers</h3>
                     <p class="mt-2 opacity-75 md:h-28">A single OpenID Connect integration provides login with all
                         social providers and user registration with verified email and phone.</p>
@@ -553,7 +553,7 @@ <h3 class="font-semibold text-lg mt-4">Hellō for Developers</h3>
                     </div>
                 </div>
                 <div class="w-full md:w-1/3">
-                    <img src="./assets/corporate-member.png" alt="Developer" style="filter: invert(1);"
+                    <img src="./assets/corporate-member.webp" width="40" height="40" alt="Developer" style="filter: invert(1);"
                         class="h-10 opacity-90">
                     <h3 class="font-semibold text-lg mt-4">Hellō for Corporate Members</h3>
                     <p class="mt-2 opacity-75 md:h-28">Join other industry leaders in guiding the transformation of
@@ -610,7 +610,7 @@ <h3 class="font-semibold text-lg mt-4">Hellō for Corporate Members</h3>
         <div class="container max-w-5xl mx-auto relative">
             <picture class="phone-img absolute right-0 -mt-16 md:-mt-16">
                 <source srcset="https://cdn.hello.coop/images/mockup-light.png" media="(prefers-color-scheme: dark)">
-                <img src="https://cdn.hello.coop/images/mockup.png" alt="Hellō mockup">
+                <img src="https://cdn.hello.coop/images/mockup.png" alt="Hellō mockup" width="480" height="546">
             </picture>
         </div>
         </div>
@@ -631,7 +631,7 @@ <h1 class="text-xl md:text-4xl w-full font-bold">
                 <figure id="founder-message">
                     <blockquote>
                         <div class="flex flex-col md:flex-row items-start">
-                            <img src="./assets/dick.png" alt="dick hardt" class="w-32 md:w-44 object-contain">
+                            <img src="./assets/dick.webp" alt="dick hardt" width="176" height="176" class="w-32 md:w-44 object-contain">
                             <div>
                                 <p class="text-xl mt-6 md:mt-0 md:ml-10">"My <a
                                         href="https://youtu.be/JzuCE7lDYrM" target="_blank"
@@ -675,7 +675,7 @@ <h1 class="text-xl md:text-4xl w-full font-bold">
 
         <section id="user-faqs" class="container max-w-5xl mx-auto pt-20 md:pt-24 px-4">
             <div class="flex items-start xl:items-center flex-col xl:flex-row" data-aos="fade-up">
-                <img src="./assets/user.png" alt="User" class="h-16 invert opacity-90 xl:-ml-20">
+                <img src="./assets/user.webp" alt="User" width="64" height="64" class="h-16 invert opacity-90 xl:-ml-20">
                 <h1 class="text-2xl md:text-4xl font-bold mt-4 xl:mt-0 xl:ml-4">User FAQs</h1>
             </div>
             <ol class="mt-2 text-xl font-bold space-y-4 list-inside">
@@ -761,7 +761,7 @@ <h3 class="italic inline font-semibold">What if I don't want Hellō to have my d
 
         <section id="corporate-faqs" class="container max-w-5xl mx-auto pt-20 md:pt-24 px-4">
             <div class="flex items-start xl:items-center flex-col xl:flex-row" data-aos="fade-up">
-                <img src="./assets/corporate-member.png" alt="User" class="h-16 invert opacity-90 xl:-ml-20">
+                <img src="./assets/corporate-member.webp" alt="User" width="64" height="64" class="h-16 invert opacity-90 xl:-ml-20">
                 <h1 class="text-2xl md:text-4xl font-bold mt-4 xl:mt-0 xl:ml-4">Corporate Member FAQs</h1>
             </div>
             <ol class="mt-6 text-xl font-bold space-y-4 list-inside">
@@ -827,7 +827,7 @@ <h3 class="italic inline font-semibold">What types of organizations do you expec
 
         <section id="news" class="container max-w-5xl mx-auto px-4 pt-20 pb-28">
             <div class="flex items-start xl:items-center flex-col xl:flex-row" data-aos="fade-up">
-                <img src="./assets/news.png" alt="User" class="h-16 invert opacity-90 xl:-ml-20">
+                <img src="./assets/news.webp" width="64" height="64" alt="User" class="h-16 invert opacity-90 xl:-ml-20">
                 <h1 class="text-2xl md:text-4xl font-bold mt-4 xl:mt-0 xl:ml-4">News</h1>
             </div>
             <ul id="posts" class="mt-6 text-xl font-bold space-y-10 list-inside">
@@ -879,7 +879,7 @@ <h3 class="text-xl font-semibold text-center mb-6">Interested in talking to othe
                 const li = `
                     <li data-aos="fade-up">
                         <a href="${url}" target="_blank" class="post group">
-                            <img src="${image}"/>
+                            <img src="${image}" width="290" height="164" />
                             <div class="py-2">
                                 <span class="text-sm font-normal opacity-70">${date}</span>
                                 <h3 class="group-hover:underline my-1">