itube-specs 0.0.970 → 0.0.972

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,27 +2,32 @@ export interface ITestModelPortrait {
   primaryImageUrl: string;
   thumbUrl: string;
   primaryImageAvifUrl?: string;
+  primaryImageSmallUrl?: string;
+  primaryImageSmallAvifUrl?: string;
 }
 
 const PORTRAIT_COUNT = 16;
 
 /**
- * Тестовые портреты моделей из `public/img/models/`. Везде один файл 640w:
+ * Тестовые портреты моделей из `public/img/models/`. `?img=png` отдаёт исходники для
+ * сравнения, без параметра — нарезку: avif через `<picture>`, фолбэк webp.
  *
- * - `?img=png` — исходники;
- * - `?img=webp` — только webp, без avif-ветки;
- * - без параметра — avif q63 4:4:4 через `<picture>`, фолбэк webp `-q 85 -m 6 -pass 10 -sharp_yuv`.
+ * Две ширины, выбирает их КОМПОНЕНТ, а не браузер: srcset мы не ставим. 640w идёт в карточку
+ * сетки, 300w во всё мелкое — круглые аватары, мини-карточки, подсказки поиска. Качество
+ * везде одно: webp q85 / avif q63.
  *
- * Качество ступеней подобрано по равной ошибке в высоких частотах: webp q85 даёт 0.00405,
- * avif q63 — 0.00399. Вес при этом 645 против 434 KB на 16 картинок, то есть avif легче на
- * треть при том же качестве. Разрыв держится на всём диапазоне, от точки не зависит.
- *
- * Один файл, а НЕ ступени через srcset. Исходники 640, слот карточки максимум 297 CSS, так
- * что 640w закрывает любое устройство вплоть до DPR3. Ступень мельче слота при этом заведомо
- * хуже полного файла: её портит двойной пересчёт (наш ресайз плюс браузерный), а её артефакты
+ * Ступеней через srcset НЕ делаем. Исходники 640, слот карточки максимум 297 CSS, так что
+ * 640w закрывает любое устройство вплоть до DPR3. Ступень мельче слота при этом заведомо хуже
+ * полного файла: её портит двойной пересчёт (наш ресайз плюс браузерный), а её артефакты
  * показываются почти 1:1, тогда как 640w в том же слоте ужимается в 2.6 раза и они
- * размазываются. Проверено на DPR1-мониторе: ладдер мылит, один файл нет. Ступени станут
- * осмысленны, только если исходники вырастут заметно выше 640.
+ * размазываются. Проверено на DPR1-мониторе: ладдер мылит, один файл нет.
+ *
+ * На мелкой ступени при разглядывании видна лёгкая разница с исходником, и это не брак
+ * генерации. Кажется, что при слоте 96px и файле 300w запас трёхкратный, но браузер уменьшает
+ * через мип-уровни делением пополам: реально показывается уровень 150, то есть уменьшение
+ * всего в 1.5 раза, и артефакты сжатия почти не размываются. Полностью лечится только отдачей
+ * туда полного 640w — на глаз идеально, но 27 KB на аватар 48–96px перебор, плюс Lighthouse
+ * справедливо ругается на такой перерасход. Осознанный размен.
  *
  * Кроп под 3:4 не делаем — обрезает `object-fit`. Почему именно так, см. `IModelImageUrls`.
  *
@@ -30,19 +35,21 @@ const PORTRAIT_COUNT = 16;
  * по query. Для замера сети это и нужно: он честен только с чистого захода.
  */
 export function useTestModelImages() {
-  const format = useRoute().query['img'];
+  const isSource = useRoute().query['img'] === 'png';
 
   const portraits: ITestModelPortrait[] = Array.from({ length: PORTRAIT_COUNT }, (_, index) => {
     const base = `/img/models/portrait-${index + 1}`;
 
-    if (format === 'png') {
+    if (isSource) {
       return { primaryImageUrl: `${base}.png`, thumbUrl: `${base}.png` };
     }
 
     return {
-      primaryImageUrl: `${base}-q85.webp`,
-      thumbUrl: `${base}-q85.webp`,
-      primaryImageAvifUrl: format === 'webp' ? undefined : `${base}-q63.avif`,
+      primaryImageUrl: `${base}-640.webp`,
+      thumbUrl: `${base}-300.webp`,
+      primaryImageSmallUrl: `${base}-300.webp`,
+      primaryImageAvifUrl: `${base}-640.avif`,
+      primaryImageSmallAvifUrl: `${base}-300.avif`,
     };
   });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.970",
+  "version": "0.0.972",
   "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
 }