From 9bc14f21e5caefe92e58b0d27fd202eb4364db8a Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Tue, 27 Feb 2024 11:43:45 +0100
Subject: [PATCH] style(components): update image loading attributes

- Update image loading attributes for recent and upcoming skins components to improve performance and consistency.
---
 resources/views/components/home/recent_skins.blade.php   | 4 ++--
 resources/views/components/home/upcoming_skins.blade.php | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/home/recent_skins.blade.php b/resources/views/components/home/recent_skins.blade.php
index 03f33d4..2356fe2 100644
--- a/resources/views/components/home/recent_skins.blade.php
+++ b/resources/views/components/home/recent_skins.blade.php
@@ -23,8 +23,8 @@
                         <div class="flex flex-col">
                             <div class="flex flex-col items-center justify-center">
                                 <a href="{{ route('skins.show', $skin->slug) }}">
-                                    <img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
-                                        src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
+                                    <img loading="lazy" class="border-2 w-80 min-h-44 aspect-video border-orange-400/40 rounded-xl"
+                                        src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=640&output=webp&q=95"
                                         alt="{{ $skin->skin_name }} Splash Art">
                                 </a>
                                 <div class="flex flex-col items-center justify-center">
diff --git a/resources/views/components/home/upcoming_skins.blade.php b/resources/views/components/home/upcoming_skins.blade.php
index a39f0ab..2cf4bfb 100644
--- a/resources/views/components/home/upcoming_skins.blade.php
+++ b/resources/views/components/home/upcoming_skins.blade.php
@@ -26,8 +26,8 @@
                     <div class="flex flex-col">
                         <div class="flex flex-col items-center justify-center">
                             <a href="{{ route('skins.show', $skin->slug) }}">
-                                <img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
-                                    src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
+                                <img loading="lazy" class="border-2 w-80 min-h-44 aspect-video border-orange-400/40 rounded-xl"
+                                    src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=640&output=webp&q=95"
                                     alt="{{ $skin->skin_name }} Splash Art">
                             </a>
                             <div class="flex flex-col items-center justify-center">