fix: describe optimized images explicitly

Nuxt Image renders native img attributes and documents that alt should always be provided. Deployment logos carry information, so the logo image gets an explicit label.

Nuxt Image also generates responsive candidates from the sizes option. The video-course logos are fixed-size images, so the sizes value now matches the actual sponsor/non-sponsor rendered width instead of forcing a wider candidate for every course.

Docs: https://image.nuxt.com/usage/nuxt-img#alt

Docs: https://image.nuxt.com/usage/nuxt-img#sizes

Author: onmax

app/pages/deploy/index.vue

@@ -62,7 +62,14 @@ await fetchList()
             }"
           >
             <template #leading>
-              <NuxtImg v-if="deployment.logoSrc" :src="deployment.logoSrc" width="40" height="40" class="w-10 h-10" />
+              <NuxtImg
+                v-if="deployment.logoSrc"
+                :src="deployment.logoSrc"
+                :alt="`${deployment.title} logo`"
+                width="40"
+                height="40"
+                class="w-10 h-10"
+              />
               <UIcon v-else :name="deployment.logoIcon" class="size-10 text-black dark:text-white" />
             </template>
             <UBadge

app/pages/video-courses.vue

@@ -45,6 +45,7 @@ defineOgImage('Docs.takumi', {
               :alt="course.name"
               :width="'sponsor' in course && course.sponsor ? 94 : 56"
               :height="'sponsor' in course && course.sponsor ? 47 : 28"
+              :sizes="'sponsor' in course && course.sponsor ? '94px' : '56px'"
               format="webp"
               :modifiers="{ position: 'top' }"
               :loading="index > 3 ? 'lazy' : undefined"