perf: use webp instead of jpg for images

Improves the loading times and the payload transmitted, also solves one of Lighthouse's concerns

Signed-off-by: Fernando Fernández <[email protected]>

Author: ferferga

frontend/src/components/Layout/Images/UserImage.vue

@@ -2,7 +2,7 @@
   <VAvatar
     :size="size">
     <JImg
-      :src="url"
+      :src="getUserImageUrl(remote.auth.currentUser.value)"
       :alt="$t('userImage')">
       <template #placeholder>
         <VAvatar
@@ -18,8 +18,8 @@
 
 <script setup lang="ts">
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client';
-import { computed } from 'vue';
 import { remote } from '#/plugins/remote';
+import { getUserImageUrl } from '#/utils/images';
 
 /**
  * TODO: In reality, rounded is unnecessary since it can be passed as fallthrough,
@@ -32,13 +32,4 @@ const { user, size = 64, rounded } = defineProps<{
   size?: number;
   rounded?: boolean;
 }>();
-
-const url = computed(() => {
-  return user.Id && user.PrimaryImageTag && remote.sdk.api?.basePath
-    ? `${remote.sdk.api.basePath}/Users/${user.Id}/Images/Primary/?tag=${user.PrimaryImageTag}`
-    : undefined;
-});
-const iconSize = computed(() => {
-  return size * 0.75;
-});
 </script>

frontend/src/utils/images.ts

@@ -6,10 +6,13 @@ import {
   type BaseItemDto,
   BaseItemKind,
   type BaseItemPerson,
-  ImageType
+  ImageType,
+  type UserDto
 } from '@jellyfin/sdk/lib/generated-client';
 import { getImageApi } from '@jellyfin/sdk/lib/utils/api/image-api';
 import type { ImageUrlsApi } from '@jellyfin/sdk/lib/utils/api/image-urls-api';
+import type { ImageRequestParameters } from '@jellyfin/sdk/lib/models/api/image-request-parameters';
+import { isNil } from '@jellyfin-vue/shared/validation';
 import { remote } from '#/plugins/remote';
 import { CardShapes, getShapeFromItemType, isPerson } from '#/utils/items';
 
@@ -22,13 +25,63 @@ const excludedBlurhashTypes = Object.freeze(
   new Set<ImageType>([ImageType.Logo])
 );
 
+const imageDefaultOptions = (): ImageRequestParameters => ({ format: 'Webp' });
+
 /**
  * Gets the image URL given an item id and the image type requested
  */
 export function getItemImageUrl(...args: Parameters<ImageUrlsApi['getItemImageUrlById']>) {
+  const argsLen = args.length;
+
+  switch (argsLen) {
+    case 1: {
+      args.push(undefined, imageDefaultOptions());
+      break;
+    }
+    case 2: {
+      args.push(imageDefaultOptions());
+      break;
+    }
+    case 3: {
+      args[2] = { ...args[2], ...imageDefaultOptions() };
+      break;
+    }
+  }
+
   return remote.sdk.newUserApi(getImageApi).getItemImageUrlById(...args);
 }
 
+/**
+ * Gets the logged's user image URL
+ */
+export function getUserImageUrl(user?: UserDto) {
+  return remote.sdk.newUserApi(getImageApi).getUserImageUrl(user, imageDefaultOptions());
+}
+
+/**
+ * Gets the image url with the desired size and quality.
+ */
+function getImageUrlWithSize(
+  itemId: string,
+  { width,
+    height,
+    quality,
+    ratio = 1
+  }: {
+    width?: number;
+    height?: number;
+    quality?: number;
+    ratio?: number;
+  } = {},
+  imgType?: ImageType
+) {
+  return getItemImageUrl(itemId, imgType, {
+    quality,
+    maxWidth: isNil(width) ? undefined : Math.round(width * ratio),
+    maxHeight: isNil(height) ? undefined : Math.round(height * ratio)
+  });
+};
+
 /**
  * Gets the tag of the image of an specific item and type.
  *
@@ -214,7 +267,6 @@ export function getImageInfo(
   } = {}
 ): ImageUrlInfo {
   // TODO: Refactor to have separate getPosterImageInfo, getThumbImageInfo and getBackdropImageInfo.
-  let url;
   let imgType;
   let imgTag;
   let itemId: string | null | undefined = item.Id;
@@ -356,31 +408,13 @@ export function getImageInfo(
     };
   }
 
-  const url_string = getItemImageUrl(itemId, imgType);
-
-  if (imgTag && imgType && url_string) {
-    url = new URL(url_string);
-
-    const parameters: Record<string, string> = {
-      imgTag,
-      quality: quality.toString()
-    };
-
-    if (width) {
-      width = Math.round(width * ratio);
-      parameters.maxWidth = width.toString();
-    }
-
-    if (height) {
-      height = Math.round(height * ratio);
-      parameters.maxHeight = height.toString();
-    }
-
-    url.search = new URLSearchParams(parameters).toString();
-  }
-
   return {
-    url: url?.href,
+    url: getImageUrlWithSize(itemId, {
+      width,
+      height,
+      quality,
+      ratio
+    }, imgType),
     blurhash:
       imgType && imgTag ? item.ImageBlurHashes?.[imgType]?.[imgTag] : undefined
   };
@@ -411,7 +445,6 @@ export function getLogo(
     tag?: string;
   } = {}
 ): ImageUrlInfo {
-  let url;
   let imgType;
   let imgTag;
   let itemId: string | null | undefined = item.Id;
@@ -428,24 +461,12 @@ export function getLogo(
     itemId = item.ParentLogoItemId;
   }
 
-  if (imgTag && imgType && itemId) {
-    url = new URL(getItemImageUrl(itemId, imgType));
-
-    const parameters: Record<string, string> = {
-      imgTag,
-      quality: quality.toString()
-    };
-
-    if (width) {
-      width = Math.round(width * ratio);
-      parameters.maxWidth = width.toString();
-    }
-
-    url.search = new URLSearchParams(parameters).toString();
-  }
-
   return {
-    url: url?.href,
+    url: getImageUrlWithSize(itemId ?? '', {
+      width,
+      quality,
+      ratio
+    }, imgType),
     blurhash:
       imgType && imgTag ? item.ImageBlurHashes?.[imgType]?.[imgTag] : undefined
   };