Improve images

laravel · Jul 10, 2024 · f82cd44 · f82cd44
1 parent 830500f
commit f82cd44
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 31 deletions.
diff --git a/resources/js/docs.js b/resources/js/docs.js
@@ -57,38 +57,38 @@ function replaceBlockquotesWithCalloutsInDocs() {
         replaceBlockquote(el, /\{(.*?)\}/, (type) => {
             switch (type) {
                 case "note":
-                    return ['/img/callouts/exclamation.min.svg', 'bg-red-600'];
+                    return ['/img/callouts/exclamation.min.svg', 'bg-red-600', 6, 35];
                 case "tip":
-                    return ['/img/callouts/lightbulb.min.svg', 'bg-purple-600'];
+                    return ['/img/callouts/lightbulb.min.svg', 'bg-purple-600', 28, 40];
                 case "laracasts":
                 case "video":
-                    return ['/img/callouts/laracast.min.svg', 'bg-blue-600'];
+                    return ['/img/callouts/laracast.min.svg', 'bg-blue-600', 49, 40];
                 default:
-                    return [null, null];
+                    return [null, null, 0, 0];
             }
         });
 
         // GitHub styled notes...
         replaceBlockquote(el, /^\[\!(.*?)\](?:<br>\n?)?/, (type) => {
             switch (type) {
                 case "WARNING":
-                    return ['/img/callouts/exclamation.min.svg', 'bg-red-600'];
+                    return ['/img/callouts/exclamation.min.svg', 'bg-red-600', 6, 35];
                 case "NOTE":
-                    return ['/img/callouts/lightbulb.min.svg', 'bg-purple-600'];
+                    return ['/img/callouts/lightbulb.min.svg', 'bg-purple-600', 28, 40];
                 default:
-                    return [null, null];
+                    return [null, null, 0, 0];
             }
         });
 
         // Legagcy GitHub styled notes...
         replaceBlockquote(el, /^<strong>(.*?)<\/strong>(?:<br>\n?)?/, (type) => {
             switch (type) {
                 case "Warning":
-                    return ['/img/callouts/exclamation.min.svg', 'bg-red-600'];
+                    return ['/img/callouts/exclamation.min.svg', 'bg-red-600', 6, 35];
                 case "Note":
-                    return ['/img/callouts/lightbulb.min.svg', 'bg-purple-600'];
+                    return ['/img/callouts/lightbulb.min.svg', 'bg-purple-600', 28, 40];
                 default:
-                    return [null, null];
+                    return [null, null, 0, 0];
             }
         });
     });
@@ -97,14 +97,14 @@ function replaceBlockquotesWithCalloutsInDocs() {
 function replaceBlockquote(el, regex, getImageAndColorByType) {
     var str = el.innerHTML;
     var match = str.match(regex);
-    var img, color;
+    var img, color, width, height;
 
     if (match) {
         var type = match[1] || false;
     }
 
     if (type) {
-        [img, color] = getImageAndColorByType(type);
+        [img, color, width, height] = getImageAndColorByType(type);
 
         if (img === null && color === null) {
             return;
@@ -117,6 +117,9 @@ function replaceBlockquote(el, regex, getImageAndColorByType) {
         imageWrapper.classList = `w-20 h-20 mb-6 flex items-center justify-center shrink-0 ${color} lg:mb-0`;
         const image = document.createElement('img');
         image.src = img;
+        image.height = height
+        image.width = width
+        image.loading = 'lazy'
         image.classList = `opacity-75`;
         imageWrapper.appendChild(image);
         wrapper.appendChild(imageWrapper);

diff --git a/resources/views/careers.blade.php b/resources/views/careers.blade.php
@@ -59,7 +59,7 @@ class="mt-6 max-w-sm mx-auto flex flex-col justify-center items-center gap-4 sm:
                 ],
             ] as $benefit)
                 <div class="space-y-4">
-                    <img src="{{ Vite::asset($benefit['image']) }}" class="h-8 w-6 pb-2" loading="lazy">
+                    <img src="{{ Vite::asset($benefit['image']) }}" class="h-8 w-6 pb-2" height="32" width="24" loading="lazy">
                     <h3 class="text-xl font-bold leading-tight">{{ $benefit['title'] }}</h3>
                     <p>{{ $benefit['description'] }}</p>
                 </div>

diff --git a/resources/views/components/testimonial.blade.php b/resources/views/components/testimonial.blade.php
@@ -1,7 +1,7 @@
 <blockquote class="relative w-full bg-white p-5 border border-gray-200 break-inside-avoid-column">
     <h2 class="text-sm">“{{ $content }}“</h2>
     <div class="mt-5 flex items-start gap-4">
-        <img src="/images/testimonials/{{ Str::slug($name) }}.jpg" class="w-10 h-10 object-cover object-center" alt="{{ $name }}">
+        <img src="/images/testimonials/{{ Str::slug($name) }}.jpg" class="w-10 h-10 object-cover object-center" alt="{{ $name }}" width="40" height="40" loading="lazy">
         <div class="text-xs">
             <cite class="not-italic">{{ $name }}</cite>
             <p class="text-gray-700">{{ $title }}</p>

diff --git a/resources/views/docs.blade.php b/resources/views/docs.blade.php
@@ -99,8 +99,8 @@ class="lg:hidden"
                 <div class="relative mx-auto w-full py-10 bg-white transition duration-200 dark:bg-dark-700">
                     <div class="mx-auto px-8 sm:px-16 flex items-center justify-between">
                         <a href="/" class="flex items-center">
-                            <img class="" src="/img/logomark.min.svg" alt="Laravel">
-                            <img class="hidden ml-5 sm:block" src="/img/logotype.min.svg" alt="Laravel">
+                            <img class="" src="/img/logomark.min.svg" alt="Laravel" width="50" height="52">
+                            <img class="hidden ml-5 sm:block" src="/img/logotype.min.svg" alt="Laravel" width="114" height="29">
                         </a>
                         <div class="flex-1 flex items-center justify-end">
                             <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500">
@@ -188,8 +188,8 @@ class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wid
                                             <option {{ $currentVersion == $key ? 'selected' : '' }} value="{{ url('docs/'.$key.$currentSection) }}">{{ $display }}</option>
                                         @endforeach
                                     </select>
-                                    <img class="absolute inset-y-0 right-0 mt-2.5 w-2.5 h-2.5 text-gray-900 pointer-events-none dark:hidden" src="/img/icons/drop_arrow.min.svg" alt="">
-                                    <img class="absolute inset-y-0 right-0 mt-2.5 w-2.5 h-2.5 text-gray-900 pointer-events-none hidden dark:block" src="/img/icons/drop_arrow.dark.min.svg" alt="">
+                                    <img class="absolute inset-y-0 right-0 mt-2.5 w-2.5 h-2.5 text-gray-900 pointer-events-none dark:hidden" src="/img/icons/drop_arrow.min.svg" alt="" width="10" height="10">
+                                    <img class="absolute inset-y-0 right-0 mt-2.5 w-2.5 h-2.5 text-gray-900 pointer-events-none hidden dark:block" src="/img/icons/drop_arrow.dark.min.svg" alt="" width="10" height="10">
                                 </div>
                             </div>
                         </div>
@@ -207,7 +207,7 @@ class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wid
                                     <div class="callout">
                                         <div class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg dark:bg-dark-600 lg:flex lg:items-center">
                                             <div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 bg-orange-600 lg:mb-0">
-                                                <img src="{{ asset('/img/callouts/exclamation.min.svg') }}" alt="Icon" class="opacity-75" />
+                                                <img src="{{ asset('/img/callouts/exclamation.min.svg') }}" alt="Icon" class="opacity-75" width="6" height="35"/>
                                             </div>
 
                                             <p class="mb-0 lg:ml-4">
@@ -224,7 +224,7 @@ class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wid
                                     <div class="callout">
                                         <div class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg lg:flex lg:items-center">
                                             <div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 bg-orange-600 lg:mb-0">
-                                                <img src="{{ asset('/img/callouts/exclamation.min.svg') }}" alt="Icon" class="opacity-75" />
+                                                <img src="{{ asset('/img/callouts/exclamation.min.svg') }}" alt="Icon" class="opacity-75" width="6" height="35"/>
                                             </div>
 
                                             <p class="mb-0 lg:ml-4">

diff --git a/resources/views/frontend.blade.php b/resources/views/frontend.blade.php
@@ -615,7 +615,7 @@ public function index()
                     <p class="mt-6"><a href="/docs/starter-kits#laravel-breeze" class="font-semibold text-[#d97707] underline hover:no-underline">Learn more</a></p>
                 </div>
                 <div class="hidden md:block relative overflow-hidden mt-10">
-                    <img width="1372" height="907" class="absolute max-w-none border shadow-xl rounded-lg" src="img/frontend/breeze-profile.png" />
+                    <img width="1372" height="907" class="absolute max-w-none border shadow-xl rounded-lg" src="img/frontend/breeze-profile.png" loading="lazy" />
                 </div>
             </div>
 
@@ -694,10 +694,10 @@ public function index()
         </div>
 
         <div class="mt-12 max-w-screen-2xl w-full mx-auto grid grid-cols-2 md:grid-cols-4 px-4">
-            <img src="/img/frontend/community-2.jpg" class="md:-mx-2 scale-105 md:scale-100 border-[10px] lg:border-[16px] w-full border-white shadow-xl -rotate-2 lg:-rotate-2" />
-            <img src="/img/frontend/community-1.jpg" class="md:-mx-3 scale-105 md:scale-100 border-[10px] lg:border-[16px] w-full border-white shadow-xl rotate-2 lg:rotate-1" />
-            <img src="/img/frontend/community-3.jpg" class="md:-mx-2 scale-105 md:scale-100 border-[10px] lg:border-[16px] w-full border-white shadow-xl -rotate-2 lg:-rotate-3" />
-            <img src="/img/frontend/community-4.jpg" class="md:-mx-3 scale-105 md:scale-100 border-[10px] lg:border-[16px] w-full border-white shadow-xl rotate-2 lg:rotate-2" />
+            <img src="/img/frontend/community-2.jpg" class="md:-mx-2 scale-105 md:scale-100 border-[10px] lg:border-[16px] w-full border-white shadow-xl -rotate-2 lg:-rotate-2" width="388" height="388" loading="lazy" />
+            <img src="/img/frontend/community-1.jpg" class="md:-mx-3 scale-105 md:scale-100 border-[10px] lg:border-[16px] w-full border-white shadow-xl rotate-2 lg:rotate-1" width="388" height="388" loading="lazy" />
+            <img src="/img/frontend/community-3.jpg" class="md:-mx-2 scale-105 md:scale-100 border-[10px] lg:border-[16px] w-full border-white shadow-xl -rotate-2 lg:-rotate-3" width="388" height="388" loading="lazy" />
+            <img src="/img/frontend/community-4.jpg" class="md:-mx-3 scale-105 md:scale-100 border-[10px] lg:border-[16px] w-full border-white shadow-xl rotate-2 lg:rotate-2" width="388" height="388" loading="lazy" />
         </div>
 
         <div class="mt-24 max-w-screen-xl px-5 mx-auto flex flex-wrap justify-center items-center gap-12">

diff --git a/resources/views/marketing.blade.php b/resources/views/marketing.blade.php
@@ -319,7 +319,7 @@ class="flex items-start pt-4 pb-6 px-4 border border-gray-200 border-opacity-60"
                             class="relative shrink-0 bg-{{ $ecosystemItemId }} flex items-center justify-center w-12 h-12 rounded-lg overflow-hidden">
                             <span
                                 class="absolute w-full h-full inset-0 bg-gradient-to-b from-[rgba(255,255,255,.2)] to-[rgba(255,255,255,0)]"></span>
-                            <img src="/img/ecosystem/{{ $ecosystemItemId }}.min.svg" alt="{{ $ecosystemItem['image-alt'] }}" class="relative w-7 h-7">
+                            <img src="/img/ecosystem/{{ $ecosystemItemId }}.min.svg" alt="{{ $ecosystemItem['image-alt'] }}" class="relative w-7 h-7" width="28" height="28" loading="lazy">
                         </div>
                         <div class="ml-4 leading-5">
                             <div>{{ $ecosystemItem['name'] }}</div>
@@ -360,7 +360,7 @@ class="absolute w-full h-full inset-0 bg-gradient-to-b from-[rgba(255,255,255,.2
                     <a href="{{ $ecosystemItem['href'] }}" class="flex p-4 border border-gray-200 border-opacity-60">
                         <div class="relative shrink-0 bg-{{ $ecosystemItemId }} flex items-center justify-center w-12 h-12 rounded-lg overflow-hidden">
                             <span class="absolute w-full h-full inset-0 bg-gradient-to-b from-[rgba(255,255,255,.2)] to-[rgba(255,255,255,0)]"></span>
-                            <img src="/img/ecosystem/{{ $ecosystemItemId }}.min.svg" alt="{{ $ecosystemItem['image-alt'] }}" class="relative @if ($ecosystemItemId === 'pennant') w-9 h-9 @else w-7 h-7 @endif">
+                            <img src="/img/ecosystem/{{ $ecosystemItemId }}.min.svg" alt="{{ $ecosystemItem['image-alt'] }}" class="relative @if ($ecosystemItemId === 'pennant') w-9 h-9 @else w-7 h-7 @endif" @if ($ecosystemItemId === 'pennant') width="36" height="36" @else width="28" height="28" @endif loading="lazy">
                         </div>
                         <div class="ml-4 leading-5">
                             <div>{{ $ecosystemItem['name'] }}</div>
@@ -563,7 +563,7 @@ class="text-red-500">Laravel Transporter</a>
             </div>
             <div class="flex justify-center lg:justify-end">
                 <div class="max-w-sm w-full pt-8 pb-12 px-6 border border-gray-200 -rotate-1 lg:px-12 lg:border-red-600">
-                    <img src="/images/laracon.png" class="max-w-[218px] w-full mx-auto" alt="laracon" />
+                    <img src="/images/laracon.png" class="max-w-[218px] w-full mx-auto" alt="laracon" width="222" height="241" loading="lazy"/>
                     <h3 class="mt-8 font-bold text-red-700 uppercase text-xs">Watch us on Laracasts</h3>
                     <h2 class="mt-3 font-bold text-4xl">Tune In</h2>
                     <p class="mt-4 text-gray-700 text-sm leading-relaxed">Laracasts includes free videos and tutorials
@@ -583,7 +583,7 @@ class="text-red-500">Laravel Transporter</a>
                 <div class="absolute right-8 top-0 -translate-y-12 pointer-events-none">
                     <x-cube />
                 </div>
-                <img class="relative max-w-[480px] w-full lg:rotate-1" src="/images/partners.png" alt="partners" />
+                <img class="relative max-w-[480px] w-full lg:rotate-1" src="/images/partners.png" alt="partners" width="484" height="298" loading="lazy" />
             </div>
             <div class="relative flex justify-center lg:justify-end">
                 <div class="sm:max-w-md">

diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php
@@ -71,7 +71,7 @@
     <div class="max-w-screen-2xl mx-auto w-full {{ $is_docs_page ? 'px-8' : 'px-5' }}">
         <div>
             <a href="/" class="inline-flex">
-                <img class="w-16 h-16" src="/img/logomark.min.svg" alt="Laravel" loading="lazy">
+                <img class="w-16 h-16" src="/img/logomark.min.svg" alt="Laravel" width="64" height="64" loading="lazy">
             </a>
         </div>
 

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
@@ -46,7 +46,7 @@ class="mt-4 w-224 p-8 bg-white shadow-lg transform transition-transform origin-t
                                         <a href="{{ $ecosystemItem['href'] }}" class="flex">
                                             <div class="relative shrink-0 w-12 h-12 bg-{{ $ecosystemItemId }} flex items-center justify-center rounded-lg overflow-hidden">
                                                 <span class="absolute inset-0 w-full h-full bg-gradient-to-b from-[rgba(255,255,255,.2)] to-[rgba(255,255,255,0)]"></span>
-                                                <img src="/img/ecosystem/{{ $ecosystemItemId }}.min.svg" alt="{{ $ecosystemItem['image-alt'] }}" class="@if ($ecosystemItemId === 'pennant') w-9 h-9 @else w-7 h-7 @endif" width="47" height="32">
+                                                <img src="/img/ecosystem/{{ $ecosystemItemId }}.min.svg" alt="{{ $ecosystemItem['image-alt'] }}" class="@if ($ecosystemItemId === 'pennant') w-9 h-9 @else w-7 h-7 @endif" @if ($ecosystemItemId === 'pennant') width="36" height="36" @else width="28" height="28" @endif loading="lazy">
                                             </div>
                                             <div class="ml-4 leading-5">
                                                 <div class="text-gray-900">{{ $ecosystemItem['name'] }}</div>