⚡ Optimize images and icons

components/AuthDialog.vue

@@ -145,41 +145,38 @@ defineProps({
           href="https://accounts.google.com/"
           target="_blank"
         >
-          <NuxtImg
+          <img
             class="rounded-full"
-            src="/assets/icons/google.png"
+            src="/assets/icons/google.webp"
             alt="เข้าสู่ระบบด้วย Google"
             width="40px"
-            format="svg"
-            preload
+            height="40px"
           />
         </NuxtLink>
         <NuxtLink
           class="btn btn-circle btn-link"
           href="https://www.facebook.com/login.php/"
           target="_blank"
         >
-          <NuxtImg
+          <img
             class="rounded-full"
-            src="/assets/icons/facebook.png"
+            src="/assets/icons/facebook.webp"
             alt="เข้าสู่ระบบด้วย Facebook"
             width="40px"
-            format="svg"
-            preload
+            height="40px"
           />
         </NuxtLink>
         <NuxtLink
           class="btn btn-circle btn-link"
           href="https://access.line.me/oauth2/v2.1/login?returnUri=%2Foauth2%2Fv2.1%2Fauthorize%2Fconsent&   loginChannelId=1521958360&loginState=CLn4LYQoulJIgLFHIw15nw#/"
           target="_blank"
         >
-          <NuxtImg
+          <img
             class="rounded-full"
-            src="/assets/icons/line.png"
+            src="/assets/icons/line.webp"
             alt="เข้าสู่ระบบด้วย Line"
             width="40px"
-            format="svg"
-            preload
+            height="40px"
           />
         </NuxtLink>
       </div>

components/Card/Result.vue

@@ -29,7 +29,7 @@ defineProps({
 
 <template>
   <div
-    class="card mb-8 overflow-hidden rounded-badge bg-blackcurrant shadow-xl before:absolute before:left-0 before:top-0 before:block before:size-full before:bg-[url('/favicon.svg')] before:bg-[length:100px_100px] before:bg-[50px_50px] before:bg-repeat before:opacity-5 before:content-['']"
+    class="card mb-8 overflow-hidden rounded-badge bg-blackcurrant shadow-xl before:absolute before:left-0 before:top-0 before:block before:size-full before:bg-[url('/favicon.ico')] before:bg-[length:100px_100px] before:bg-[50px_50px] before:bg-repeat before:opacity-5 before:content-['']"
   >
     <div class="card-body relative">
       <CardTarot

components/Card/Tarot.vue

@@ -14,7 +14,7 @@ defineProps({
   },
   icon: {
     type: String,
-    default: "/favicon.svg",
+    default: "/favicon.ico",
   },
   alt: {
     type: String,
@@ -45,8 +45,6 @@ defineProps({
     default: null,
   },
 });
-
-const img = useImage();
 </script>
 
 <template>
@@ -63,9 +61,7 @@ const img = useImage();
             : null
       "
       :style="
-        flip && image
-          ? 'background-image: url(\'' + img(image, { format: 'webp' }) + '\');'
-          : null
+        flip && image ? 'background-image: url(\'' + image + '\');' : null
       "
     >
       <div
@@ -78,15 +74,13 @@ const img = useImage();
         v-if="!flip"
         class="m-auto flex items-center justify-center rounded-full border-8 border-blue-chalk bg-blue-chalk"
       >
-        <NuxtImg
+        <img
           v-if="!iAssets"
           :class="assetsClass"
           :src="icon"
           :alt="alt"
           :width="width"
           :height="height"
-          :placeholder="[width, height]"
-          format="webp"
         />
         <i v-else :class="[assetsClass, icon]"></i>
       </div>

components/NavBar.vue

@@ -19,12 +19,11 @@ const goBack = (params) => {
         <i class="fi fi-sr-angle-small-left text-2xl leading-[0]"></i>
       </button>
       <NuxtLink v-else class="btn btn-circle btn-ghost" to="/">
-        <NuxtImg
-          src="/favicon.svg"
+        <img
+          src="/favicon.ico"
           alt="Hamtarot Favicon"
           width="100px"
-          format="webp"
-          preload
+          height="100px"
         />
       </NuxtLink>
     </div>

components/RatingDialog.vue

@@ -1,13 +1,12 @@
 <template>
   <dialog id="ratingModal" class="modal">
     <div class="modal-box space-y-4 text-center">
-      <NuxtImg
+      <img
         class="mx-auto"
-        src="/assets/icons/rating.png"
+        src="/assets/icons/rating.webp"
         alt="Star Icon"
         width="100px"
-        format="svg"
-        placeholder
+        height="100px"
       />
       <h1 class="text-lg">
         <b>คุณพึงพอใจกับเว็บไซต์เรามากแค่ไหน?</b>

pages/account/index.vue

@@ -15,13 +15,7 @@
           <div class="flex-none">
             <div class="avatar">
               <div class="w-24 rounded-full bg-blue-chalk p-2">
-                <NuxtImg
-                  src="/assets/icons/person.png"
-                  alt=""
-                  format="webp"
-                  loading="lazy"
-                  placeholder
-                />
+                <img src="/assets/icons/person.webp" alt="" loading="lazy" />
               </div>
             </div>
           </div>

pages/dashboard/notification.vue

@@ -45,7 +45,7 @@ const sendNotification = (event) => {
             <InputText
               v-model="filename"
               class="w-full"
-              placeholder="https://hamtarot.com/favicon.svg"
+              placeholder="https://hamtarot.com/favicon.ico"
               hint-top-left="ลิงค์รูปภาพ (ไม่จำเป็น)"
             >
               <i class="fi fi-rr-add-image leading-[0]"></i>

pages/dashboard/users.vue

@@ -66,12 +66,10 @@ const users = [
                 <div class="flex items-center gap-3">
                   <div class="avatar">
                     <div class="mask mask-squircle h-12 w-12">
-                      <NuxtImg
+                      <img
                         :src="user.image"
                         :alt="user.username"
-                        format="webp"
                         loading="lazy"
-                        placeholder
                       />
                     </div>
                   </div>

pages/predict/[category]/[id]/index.vue

@@ -103,7 +103,7 @@ const saveAsImage = async (extensions = "png", quality = 1, share = false) => {
       parseInt($route.params.id) > 0 &&
       parseInt($route.params.id) <= Object.keys(data.tarot).length
     "
-    class="container mx-auto px-4"
+    class="container mx-auto p-4"
   >
     <RatingDialog />
     <div class="mb-8 text-center">

pages/predict/[category]/index.vue

@@ -70,7 +70,7 @@ if (
       ทำนาย
     </NuxtLink>
   </section>
-  <section v-else class="container mx-auto px-4 text-center">
+  <section v-else class="container mx-auto p-4 text-center">
     <i class="fi fi-rr-loading text-6xl text-portica"></i>
     <h2 class="text-portica">ไม่พบหมวดหมู่ '{{ $route.params.category }}'</h2>
     <p class="mb-8">ดูเหมือนว่าคุณจะดวงไม่ดีมาเจอหน้าว่างเปล่านี้นะ</p>