fix: compress images to webp and pre-define width and height

WhyAsh5114 · Oct 12, 2024 · 12d1bc4 · 12d1bc4
1 parent df32473
commit 12d1bc4
Show file tree

Hide file tree

Showing 13 changed files with 13 additions and 3 deletions.
diff --git a/src/routes/(components)/page/CarouselComponent.svelte b/src/routes/(components)/page/CarouselComponent.svelte
@@ -6,20 +6,30 @@
 <Carousel.Root class="mx-auto my-4 w-3/4">
 	<Carousel.Content class="items-center">
 		<Carousel.Item>
-			<img class="border" src="/screenshots/{$mode}/SplitDayChart.png" alt="SplitDayChart" />
+			<img
+				class="border"
+				src="/screenshots/{$mode}/SplitDayChart.webp"
+				alt="SplitDayChart"
+				width={240}
+				height={236.5}
+			/>
 		</Carousel.Item>
 		<Carousel.Item>
 			<img
 				class="border"
-				src="/screenshots/{$mode}/MicrocycleVolumeDistributionChart.png"
+				src="/screenshots/{$mode}/MicrocycleVolumeDistributionChart.webp"
 				alt="MicrocycleVolumeDistributionChart"
+				width={240}
+				height={185.5}
 			/>
 		</Carousel.Item>
 		<Carousel.Item>
 			<img
 				class="border"
-				src="/screenshots/{$mode}/MuscleGroupVolumeDistributionChart.png"
+				src="/screenshots/{$mode}/MuscleGroupVolumeDistributionChart.webp"
 				alt="MuscleGroupVolumeDistributionChart"
+				width={240}
+				height={234}
 			/>
 		</Carousel.Item>
 	</Carousel.Content>

diff --git a/static/screenshots/dark/MicrocycleVolumeDistributionChart.png b/static/screenshots/dark/MicrocycleVolumeDistributionChart.png
diff --git a/static/screenshots/dark/MicrocycleVolumeDistributionChart.webp b/static/screenshots/dark/MicrocycleVolumeDistributionChart.webp
diff --git a/static/screenshots/dark/MuscleGroupVolumeDistributionChart.png b/static/screenshots/dark/MuscleGroupVolumeDistributionChart.png
diff --git a/static/screenshots/dark/MuscleGroupVolumeDistributionChart.webp b/static/screenshots/dark/MuscleGroupVolumeDistributionChart.webp
diff --git a/static/screenshots/dark/SplitDayChart.png b/static/screenshots/dark/SplitDayChart.png
diff --git a/static/screenshots/dark/SplitDayChart.webp b/static/screenshots/dark/SplitDayChart.webp
diff --git a/static/screenshots/light/MicrocycleVolumeDistributionChart.png b/static/screenshots/light/MicrocycleVolumeDistributionChart.png
diff --git a/static/screenshots/light/MicrocycleVolumeDistributionChart.webp b/static/screenshots/light/MicrocycleVolumeDistributionChart.webp
diff --git a/static/screenshots/light/MuscleGroupVolumeDistributionChart.png b/static/screenshots/light/MuscleGroupVolumeDistributionChart.png
diff --git a/static/screenshots/light/MuscleGroupVolumeDistributionChart.webp b/static/screenshots/light/MuscleGroupVolumeDistributionChart.webp
diff --git a/static/screenshots/light/SplitDayChart.png b/static/screenshots/light/SplitDayChart.png
diff --git a/static/screenshots/light/SplitDayChart.webp b/static/screenshots/light/SplitDayChart.webp