From e4d3a32558224110308472f1ade85b56cb308aeb Mon Sep 17 00:00:00 2001
From: Rico <rvzelst7@gmail.com>
Date: Wed, 7 Jan 2026 20:06:17 +0100
Subject: [PATCH] perf(seo): add image dimensions and aspect-ratio handling

---
 resources/css/app.css                               | 13 +++++++++++++
 resources/views/components/icons/list_all.blade.php |  2 +-
 .../views/components/posts/listposts.blade.php      |  2 ++
 resources/views/posts/show.blade.php                |  6 ++++--
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 53a3c2e..1819820 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -129,3 +129,16 @@ ins.adsbygoogle[data-ad-status="unfilled"] {
     overflow-y: auto;
     overflow-x: auto;
 }
+
+.prose img {
+    height: auto;
+    max-width: 100%;
+}
+
+.prose img:not([width]):not([height]) {
+    aspect-ratio: attr(width) / attr(height);
+}
+
+.prose img[width][height] {
+    aspect-ratio: attr(width) / attr(height);
+}
diff --git a/resources/views/components/icons/list_all.blade.php b/resources/views/components/icons/list_all.blade.php
index 8e0dc86..df40a0f 100644
--- a/resources/views/components/icons/list_all.blade.php
+++ b/resources/views/components/icons/list_all.blade.php
@@ -20,7 +20,7 @@
                         <a href="/icon/{{ $icon->slug }}">
                             <img @if ($key < 8) loading="eager" @else loading="lazy" @endif
                                 src="//wsrv.nl/?url={{ $icon->image }}&w=200&output=webp&q=50&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
-                                class="object-cover w-full h-full" alt="{{ $icon->title }} Icon" /></a>
+                                class="object-cover w-full h-full" alt="{{ $icon->title }} Icon" width="96" height="96" /></a>
                     </div>
 
                     <div class="px-4 py-2">
diff --git a/resources/views/components/posts/listposts.blade.php b/resources/views/components/posts/listposts.blade.php
index 889bc6e..f8a68f3 100644
--- a/resources/views/components/posts/listposts.blade.php
+++ b/resources/views/components/posts/listposts.blade.php
@@ -12,6 +12,8 @@
                         src="{{ $post->thumbnail }}"
                         alt="{{ $post->title }} Thumbnail"
                         class="object-cover w-full h-full"
+                        width="1200"
+                        height="630"
                     >
                 </a>
 
diff --git a/resources/views/posts/show.blade.php b/resources/views/posts/show.blade.php
index de3cb9e..a121f6f 100644
--- a/resources/views/posts/show.blade.php
+++ b/resources/views/posts/show.blade.php
@@ -97,7 +97,9 @@
                     <img src="{{ $post->thumbnail }}"
                          alt="{{ $post->title }}"
                          class="object-cover w-full h-full transition duration-700 transform hover:scale-105"
-                         loading="eager">
+                         loading="eager"
+                         width="1920"
+                         height="1080">
                 </div>
                 @endif
             </header>
@@ -160,7 +162,7 @@
                     <a href="{{ route('posts.show', $relatedPost->slug) }}" class="flex flex-col h-full group">
                         <div class="overflow-hidden relative mb-4 w-full rounded-xl border transition-all aspect-video bg-stone-800 border-stone-700 group-hover:border-orange-500/50">
                             @if($relatedPost->thumbnail)
-                            <img src="{{ $relatedPost->thumbnail }}" alt="{{ $relatedPost->title }}" class="object-cover w-full h-full transition duration-500 group-hover:scale-105">
+                            <img src="{{ $relatedPost->thumbnail }}" alt="{{ $relatedPost->title }}" class="object-cover w-full h-full transition duration-500 group-hover:scale-105" width="1920" height="1080">
                             @else
                             <div class="flex justify-center items-center w-full h-full bg-gradient-to-br from-stone-800 to-stone-900 text-stone-700">
                                 <span class="text-4xl opacity-20">LoL</span>