mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
fix(website): switch from x-descriptors to w-descriptors + sizes for responsive images to satisfy PageSpeed Insights
This commit is contained in:
Koala
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 30 KiB |
+18
-18
@@ -139,8 +139,8 @@
|
||||
<span lang="de">Dein Kino-Abend auf Distanz. Keine Lags, keine Anmeldung. Einfach Link teilen und zusammen schauen.</span>
|
||||
</h2>
|
||||
<div class="hero-mascot-container" data-reveal>
|
||||
<img src="assets/LookDownKoala-1x.webp" srcset="assets/LookDownKoala-1x.webp 1x, assets/LookDownKoala.webp 2x" alt="A cute koala standing and looking down at the download buttons" class="hero-lookdown-mascot" lang="en" width="90" height="132" loading="lazy">
|
||||
<img src="assets/LookDownKoala-1x.webp" srcset="assets/LookDownKoala-1x.webp 1x, assets/LookDownKoala.webp 2x" alt="Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons" class="hero-lookdown-mascot" lang="de" width="90" height="132" loading="lazy">
|
||||
<img src="assets/LookDownKoala-1x.webp" srcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" sizes="90px" alt="A cute koala standing and looking down at the download buttons" class="hero-lookdown-mascot" lang="en" width="90" height="132" loading="lazy">
|
||||
<img src="assets/LookDownKoala-1x.webp" srcset="assets/LookDownKoala-1x.webp 90w, assets/LookDownKoala.webp 205w" sizes="90px" alt="Ein niedlicher Koala steht da und schaut nach unten auf die Download-Buttons" class="hero-lookdown-mascot" lang="de" width="90" height="132" loading="lazy">
|
||||
</div>
|
||||
<div class="cta-group" data-reveal>
|
||||
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
|
||||
@@ -440,8 +440,8 @@
|
||||
|
||||
<section class="compat-section">
|
||||
<div class="container">
|
||||
<img src="assets/PlatformJuggler_New-1x.webp" srcset="assets/PlatformJuggler_New-1x.webp 1x, assets/PlatformJuggler_New.webp 2x" alt="A cute koala juggling multiple browser tabs showing streaming platforms" class="compat-mascot" lang="en" width="300" height="233" loading="lazy" data-reveal>
|
||||
<img src="assets/PlatformJuggler_New-1x.webp" srcset="assets/PlatformJuggler_New-1x.webp 1x, assets/PlatformJuggler_New.webp 2x" alt="Ein niedlicher Koala jongliert mit mehreren Browser-Tabs, auf denen verschiedene Streamingdienste laufen" class="compat-mascot" lang="de" width="300" height="233" loading="lazy" data-reveal>
|
||||
<img src="assets/PlatformJuggler_New-1x.webp" srcset="assets/PlatformJuggler_New-1x.webp 368w, assets/PlatformJuggler_New.webp 643w" sizes="(max-width: 768px) calc(100vw - 2rem), 368px" alt="A cute koala juggling multiple browser tabs showing streaming platforms" class="compat-mascot" lang="en" width="300" height="233" loading="lazy" data-reveal>
|
||||
<img src="assets/PlatformJuggler_New-1x.webp" srcset="assets/PlatformJuggler_New-1x.webp 368w, assets/PlatformJuggler_New.webp 643w" sizes="(max-width: 768px) calc(100vw - 2rem), 368px" alt="Ein niedlicher Koala jongliert mit mehreren Browser-Tabs, auf denen verschiedene Streamingdienste laufen" class="compat-mascot" lang="de" width="300" height="233" loading="lazy" data-reveal>
|
||||
<p class="compat-heading" data-reveal>
|
||||
<span lang="en">Works on your favorite platforms</span>
|
||||
<span lang="de">Funktioniert auf deinen Lieblingsplattformen</span>
|
||||
@@ -495,8 +495,8 @@
|
||||
</p>
|
||||
<div class="use-cases-grid">
|
||||
<div class="use-case-card" data-reveal>
|
||||
<img src="assets/PopcornFriends-1x.webp" srcset="assets/PopcornFriends-1x.webp 1x, assets/PopcornFriends.webp 2x" alt="Two cute koalas sitting together and sharing a bucket of popcorn" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
|
||||
<img src="assets/PopcornFriends-1x.webp" srcset="assets/PopcornFriends-1x.webp 1x, assets/PopcornFriends.webp 2x" alt="Zwei niedliche Koalas sitzen zusammen und teilen sich einen Eimer Popcorn" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
|
||||
<img src="assets/PopcornFriends-1x.webp" srcset="assets/PopcornFriends-1x.webp 272w, assets/PopcornFriends.webp 543w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Two cute koalas sitting together and sharing a bucket of popcorn" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
|
||||
<img src="assets/PopcornFriends-1x.webp" srcset="assets/PopcornFriends-1x.webp 272w, assets/PopcornFriends.webp 543w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Zwei niedliche Koalas sitzen zusammen und teilen sich einen Eimer Popcorn" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
|
||||
<h3>
|
||||
<span lang="en">Movie Night with Friends</span>
|
||||
<span lang="de">Filmabend mit Freunden</span>
|
||||
@@ -505,8 +505,8 @@
|
||||
<p lang="de">Synchronisiere eure Filme in Echtzeit und quatscht nebenbei auf Discord, Zoom oder im Tool eurer Wahl. Es fühlt sich an, als säßet ihr im selben Raum.</p>
|
||||
</div>
|
||||
<div class="use-case-card" data-reveal>
|
||||
<img src="assets/RemoteProf-1x.webp" srcset="assets/RemoteProf-1x.webp 1x, assets/RemoteProf.webp 2x" alt="A koala professor presenting on a screen to two remote student koalas" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
|
||||
<img src="assets/RemoteProf-1x.webp" srcset="assets/RemoteProf-1x.webp 1x, assets/RemoteProf.webp 2x" alt="Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
|
||||
<img src="assets/RemoteProf-1x.webp" srcset="assets/RemoteProf-1x.webp 272w, assets/RemoteProf.webp 507w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="A koala professor presenting on a screen to two remote student koalas" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
|
||||
<img src="assets/RemoteProf-1x.webp" srcset="assets/RemoteProf-1x.webp 272w, assets/RemoteProf.webp 507w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
|
||||
<h3>
|
||||
<span lang="en">Remote Learning</span>
|
||||
<span lang="de">Gemeinsam Lernen</span>
|
||||
@@ -515,8 +515,8 @@
|
||||
<p lang="de">Analysiert Online-Tutorials, Vorlesungen oder Streams gemeinsam mit Mitschülern oder Kollegen. Pausiert und besprecht komplizierte Schritte in perfektem Sync.</p>
|
||||
</div>
|
||||
<div class="use-case-card" data-reveal>
|
||||
<img src="assets/KoalaCupple_New-1x.webp" srcset="assets/KoalaCupple_New-1x.webp 1x, assets/KoalaCupple_New.webp 2x" alt="A cute koala couple watching together remotely; one is sitting at a PC and the other is in bed with a laptop, with flying hearts between them" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
|
||||
<img src="assets/KoalaCupple_New-1x.webp" srcset="assets/KoalaCupple_New-1x.webp 1x, assets/KoalaCupple_New.webp 2x" alt="Ein niedliches Koala-Pärchen schaut remote zusammen; einer sitzt am PC und sie liegt mit dem Laptop im Bett, während Herzen zwischen ihnen fliegen" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
|
||||
<img src="assets/KoalaCupple_New-1x.webp" srcset="assets/KoalaCupple_New-1x.webp 272w, assets/KoalaCupple_New.webp 579w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="A cute koala couple watching together remotely; one is sitting at a PC and the other is in bed with a laptop, with flying hearts between them" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
|
||||
<img src="assets/KoalaCupple_New-1x.webp" srcset="assets/KoalaCupple_New-1x.webp 272w, assets/KoalaCupple_New.webp 579w" sizes="(max-width: 768px) calc(100vw - 2rem), 272px" alt="Ein niedliches Koala-Pärchen schaut remote zusammen; einer sitzt am PC und sie liegt mit dem Laptop im Bett, während Herzen zwischen ihnen fliegen" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
|
||||
<h3>
|
||||
<span lang="en">Long-Distance Relationships</span>
|
||||
<span lang="de">Fernbeziehungen</span>
|
||||
@@ -530,8 +530,8 @@
|
||||
|
||||
<section id="features">
|
||||
<div class="container">
|
||||
<img src="assets/KoalaQuestions-1x.webp" srcset="assets/KoalaQuestions-1x.webp 1x, assets/KoalaQuestions.webp 2x" alt="A cute koala with a question mark above its head wondering why to choose KoalaSync" class="features-questions-mascot" lang="en" width="250" height="211" loading="lazy" data-reveal>
|
||||
<img src="assets/KoalaQuestions-1x.webp" srcset="assets/KoalaQuestions-1x.webp 1x, assets/KoalaQuestions.webp 2x" alt="Ein niedlicher Koala mit einem Fragezeichen über dem Kopf, der sich fragt, warum er KoalaSync wählen soll" class="features-questions-mascot" lang="de" width="250" height="211" loading="lazy" data-reveal>
|
||||
<img src="assets/KoalaQuestions-1x.webp" srcset="assets/KoalaQuestions-1x.webp 250w, assets/KoalaQuestions.webp 355w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="A cute koala with a question mark above its head wondering why to choose KoalaSync" class="features-questions-mascot" lang="en" width="250" height="211" loading="lazy" data-reveal>
|
||||
<img src="assets/KoalaQuestions-1x.webp" srcset="assets/KoalaQuestions-1x.webp 250w, assets/KoalaQuestions.webp 355w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="Ein niedlicher Koala mit einem Fragezeichen über dem Kopf, der sich fragt, warum er KoalaSync wählen soll" class="features-questions-mascot" lang="de" width="250" height="211" loading="lazy" data-reveal>
|
||||
<h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
|
||||
<span lang="en">Why KoalaSync?</span><span lang="de">Warum KoalaSync?</span>
|
||||
</h2>
|
||||
@@ -602,8 +602,8 @@
|
||||
|
||||
<section id="comparison" class="comparison-section">
|
||||
<div class="container">
|
||||
<img src="assets/ProContraKoala-1x.webp" srcset="assets/ProContraKoala-1x.webp 1x, assets/ProContraKoala.webp 2x" alt="A cute koala weighing options in both hands to compare KoalaSync vs Teleparty" class="comparison-mascot" lang="en" width="260" height="184" loading="lazy" data-reveal>
|
||||
<img src="assets/ProContraKoala-1x.webp" srcset="assets/ProContraKoala-1x.webp 1x, assets/ProContraKoala.webp 2x" alt="Ein niedlicher Koala, der Optionen in beiden Händen abwägt, um KoalaSync mit Teleparty zu vergleichen" class="comparison-mascot" lang="de" width="260" height="184" loading="lazy" data-reveal>
|
||||
<img src="assets/ProContraKoala-1x.webp" srcset="assets/ProContraKoala-1x.webp 260w, assets/ProContraKoala.webp 423w" sizes="(max-width: 768px) calc(100vw - 2rem), 260px" alt="A cute koala weighing options in both hands to compare KoalaSync vs Teleparty" class="comparison-mascot" lang="en" width="260" height="184" loading="lazy" data-reveal>
|
||||
<img src="assets/ProContraKoala-1x.webp" srcset="assets/ProContraKoala-1x.webp 260w, assets/ProContraKoala.webp 423w" sizes="(max-width: 768px) calc(100vw - 2rem), 260px" alt="Ein niedlicher Koala, der Optionen in beiden Händen abwägt, um KoalaSync mit Teleparty zu vergleichen" class="comparison-mascot" lang="de" width="260" height="184" loading="lazy" data-reveal>
|
||||
<h2 class="section-title" data-reveal style="text-align: center; font-size: 2.2rem; margin-bottom: 1rem;">
|
||||
<span lang="en">KoalaSync vs. Teleparty</span>
|
||||
<span lang="de">KoalaSync vs. Teleparty</span>
|
||||
@@ -920,8 +920,8 @@
|
||||
|
||||
<!-- Mascot Self-Hosting / Deploy Illustration -->
|
||||
<div style="display: flex; justify-content: center; margin-bottom: 2.5rem;" data-reveal>
|
||||
<img src="assets/KoalaDeploy-1x.webp" srcset="assets/KoalaDeploy-1x.webp 1x, assets/KoalaDeploy.webp 2x" alt="A cute koala sitting at a laptop deploying a Docker container for self-hosting" class="selfhost-mascot" lang="en" width="300" height="201" loading="lazy">
|
||||
<img src="assets/KoalaDeploy-1x.webp" srcset="assets/KoalaDeploy-1x.webp 1x, assets/KoalaDeploy.webp 2x" alt="Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting" class="selfhost-mascot" lang="de" width="300" height="201" loading="lazy">
|
||||
<img src="assets/KoalaDeploy-1x.webp" srcset="assets/KoalaDeploy-1x.webp 300w, assets/KoalaDeploy.webp 600w" sizes="(max-width: 768px) calc(100vw - 2rem), 300px" alt="A cute koala sitting at a laptop deploying a Docker container for self-hosting" class="selfhost-mascot" lang="en" width="300" height="201" loading="lazy">
|
||||
<img src="assets/KoalaDeploy-1x.webp" srcset="assets/KoalaDeploy-1x.webp 300w, assets/KoalaDeploy.webp 600w" sizes="(max-width: 768px) calc(100vw - 2rem), 300px" alt="Ein niedlicher Koala sitzt am Laptop und deployt einen Docker-Container für das Self-Hosting" class="selfhost-mascot" lang="de" width="300" height="201" loading="lazy">
|
||||
</div>
|
||||
|
||||
<div class="terminal-container" data-reveal>
|
||||
@@ -1002,8 +1002,8 @@
|
||||
</div>
|
||||
|
||||
<a href="https://github.com/Shik3i/KoalaSync" target="_blank" data-reveal style="display: inline-block; text-decoration: none;">
|
||||
<img src="assets/KoalaGithub-1x.webp" srcset="assets/KoalaGithub-1x.webp 1x, assets/KoalaGithub.webp 2x" alt="A cute koala holding a GitHub repository page next to the GitHub mascot Octocat" class="cta-github-mascot" lang="en" width="250" height="165" loading="lazy">
|
||||
<img src="assets/KoalaGithub-1x.webp" srcset="assets/KoalaGithub-1x.webp 1x, assets/KoalaGithub.webp 2x" alt="Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat" class="cta-github-mascot" lang="de" width="250" height="165" loading="lazy">
|
||||
<img src="assets/KoalaGithub-1x.webp" srcset="assets/KoalaGithub-1x.webp 250w, assets/KoalaGithub.webp 454w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="A cute koala holding a GitHub repository page next to the GitHub mascot Octocat" class="cta-github-mascot" lang="en" width="250" height="165" loading="lazy">
|
||||
<img src="assets/KoalaGithub-1x.webp" srcset="assets/KoalaGithub-1x.webp 250w, assets/KoalaGithub.webp 454w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="Ein niedlicher Koala hält eine GitHub-Projektseite zusammen mit dem GitHub Maskottchen Octocat" class="cta-github-mascot" lang="de" width="250" height="165" loading="lazy">
|
||||
</a>
|
||||
|
||||
<div class="cta-group" data-reveal style="justify-content: center; margin-top: 1rem;">
|
||||
|
||||
Reference in New Issue
Block a user