itube-specs 0.0.970 → 0.0.971

package/components/card/model-mini.vue

@@ -56,13 +56,17 @@ const props = defineProps<{
 const fallbackImage = '/img/model-placeholder.webp';
 const imageError = ref(false);
 
+/** Аватар 48px, крупнее мелкой ступени сюда не надо: при DPR3 нужно всего 144. */
 const currentImage = computed(() => {
   if (imageError.value) return fallbackImage;
-  return props.card.primaryImageUrl || props.card.thumbUrl || fallbackImage;
+  return props.card.primaryImageSmallUrl || props.card.primaryImageUrl || props.card.thumbUrl || fallbackImage;
 });
 
 const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.primaryImageUrls));
-const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.primaryImageAvifUrl));
+const currentAvifSrc = computed(() => {
+  if (imageError.value) return undefined;
+  return props.card.primaryImageSmallAvifUrl || props.card.primaryImageAvifUrl;
+});
 </script>
 
 <style lang="scss">

package/components/info/main.vue

@@ -15,6 +15,7 @@
       <UiImg
         v-if="card.img"
         :src="currentImage"
+        :avif-src="currentAvifSrc"
         :image-urls="currentImageUrls"
         :alt="title"
         :sizes="IMG_SIZES"
@@ -217,6 +218,8 @@ const IMG_SIZES = `auto, (max-width: ${CSS_BREAKPOINTS.sm - 1}px) 80px, 96px`;
 
 const currentImageUrls = computed(() => (imageError.value ? undefined : props.card.imgUrls));
 
+const currentAvifSrc = computed(() => (imageError.value ? undefined : props.card.imgAvifUrl));
+
 function getParameter(name: string) {
   return props.card.parameters?.find(p => p.name === name)?.values?.[ 0 ]?.name;
 }

package/components/search/item.vue

@@ -11,6 +11,7 @@
     <UiImg
       v-if="isModel"
       :src="item?.primaryImageUrl || `/img/model-placeholder.webp`"
+      :avif-src="item?.primaryImageAvifUrl"
       :image-urls="item?.primaryImageUrls"
       :alt="title"
       class="search-item__icon"

package/composables/use-test-model-images.ts

@@ -2,6 +2,8 @@ export interface ITestModelPortrait {
   primaryImageUrl: string;
   thumbUrl: string;
   primaryImageAvifUrl?: string;
+  primaryImageSmallUrl?: string;
+  primaryImageSmallAvifUrl?: string;
 }
 
 const PORTRAIT_COUNT = 16;
@@ -13,6 +15,10 @@ const PORTRAIT_COUNT = 16;
  * - `?img=webp` — только webp, без avif-ветки;
  * - без параметра — avif q63 4:4:4 через `<picture>`, фолбэк webp `-q 85 -m 6 -pass 10 -sharp_yuv`.
  *
+ * Две ширины: 640w в карточку сетки и 300w во всё мелкое — круглые аватары, мини-карточки,
+ * подсказки поиска. 300w закрывает их с запасом даже при DPR3 (круглому нужно 288) и весит
+ * 8.5 KB против 40.6 у полного файла. Выбирает не браузер, а компонент: srcset мы не ставим.
+ *
  * Качество ступеней подобрано по равной ошибке в высоких частотах: webp q85 даёт 0.00405,
  * avif q63 — 0.00399. Вес при этом 645 против 434 KB на 16 картинок, то есть avif легче на
  * треть при том же качестве. Разрыв держится на всём диапазоне, от точки не зависит.
@@ -41,8 +47,10 @@ export function useTestModelImages() {
 
     return {
       primaryImageUrl: `${base}-q85.webp`,
-      thumbUrl: `${base}-q85.webp`,
+      thumbUrl: `${base}-300-q85.webp`,
+      primaryImageSmallUrl: `${base}-300-q85.webp`,
       primaryImageAvifUrl: format === 'webp' ? undefined : `${base}-q63.avif`,
+      primaryImageSmallAvifUrl: format === 'webp' ? undefined : `${base}-300-q63.avif`,
     };
   });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.970",
+  "version": "0.0.971",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/runtime/utils/converters/convert-model-to-round-card.ts

@@ -5,9 +5,10 @@ import { convertString } from './convert-string';
 export function convertModelToRoundCard(model: IModelCard): IRoundCard {
   return {
     title: model.title,
-    primaryImageUrl: model.primaryImageUrl || model.thumbUrl || '',
+    // Круглому аватару крупнее мелкой ступени не нужно: 96px при DPR3 просит 288.
+    primaryImageUrl: model.primaryImageSmallUrl || model.primaryImageUrl || model.thumbUrl || '',
     primaryImageUrls: model.primaryImageUrls,
-    primaryImageAvifUrl: model.primaryImageAvifUrl,
+    primaryImageAvifUrl: model.primaryImageSmallAvifUrl || model.primaryImageAvifUrl,
     videosCount: model.videosCount,
     link: `/models/${convertString().toSlug(model.title)}`,
   };

package/types/card-info.d.ts

@@ -8,6 +8,8 @@ export interface ICardInfo {
   description: string;
   videosCount: number;
   img?: string;
+  /** Тот же кадр в avif. Есть — рендерится через `<picture>`, `img` фолбэком. */
+  imgAvifUrl?: string;
   /** Ладдер портрета под srcset. Нет — рендерится один `img`. */
   imgUrls?: IModelImageUrls;
   guid?: string;

package/types/model-card.d.ts

@@ -7,6 +7,9 @@ export interface IModelCard {
   primaryImageUrl?: string;
   /** Тот же портрет в avif. Есть — карточка отдаёт его через `<picture>`, webp фолбэком. */
   primaryImageAvifUrl?: string;
+  /** Мелкая ступень 300w: круглые аватары, мини-карточки, подсказки поиска. */
+  primaryImageSmallUrl?: string;
+  primaryImageSmallAvifUrl?: string;
   /** Ладдер портрета под srcset. Нет — карточка рендерит один `primaryImageUrl`. */
   primaryImageUrls?: IModelImageUrls;
   guid: string;

package/types/search-top-models.d.ts

@@ -5,6 +5,7 @@ export interface ISearchTopModelsType {
   name: string
   title: string
   primaryImageUrl?: string
+  primaryImageAvifUrl?: string
   /** Ладдер портрета под srcset. Нет — рендерится один `primaryImageUrl`. */
   primaryImageUrls?: IModelImageUrls
 }