itube-specs 0.0.974 → 0.0.975

package/components/ui/img.vue

@@ -3,11 +3,12 @@
   `card/playlist.vue` и `playlist-mini.vue` целятся в свои UiImg через `:first-child`/`:nth-child(2)`
   — внутри `<picture>` каждая из них стала бы первым ребёнком, и раскладка поехала бы. -->
   <picture
-    v-if="avifSrc"
+    v-if="avifSrcset"
     class="ui-img"
   >
     <source
-      :srcset="avifSrc"
+      :srcset="avifSrcset"
+      :sizes="computedSizes"
       type="image/avif"
     >
     <img
@@ -73,6 +74,9 @@ const imgSrc = computed(() => {
 
 const computedSrcset = computed(() => buildSrcset(props.imageUrls?.webp) || buildSrcset(props.urls?.webp));
 
+/** Ладдер старше одиночного `avifSrc`: нужен, когда ступени есть и в avif-ветке. */
+const avifSrcset = computed(() => buildSrcset(props.imageUrls?.avif) || props.avifSrc);
+
 const imgAttrs = computed(() => ({
   ...attrs,
   src: imgSrc.value,

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

@@ -1,5 +1,8 @@
+import type { IModelImageUrls } from '../types';
+
 export interface ITestModelPortrait {
   primaryImageUrl: string;
+  primaryImageUrls?: IModelImageUrls;
   thumbUrl: string;
   primaryImageAvifUrl?: string;
   primaryImageSmallUrl?: string;
@@ -21,8 +24,12 @@ const PORTRAIT_GUIDS = [
 ];
 
 /**
- * Тестовые портреты моделей. `?img=png` отдаёт исходники 1024×1536 для сравнения, без
- * параметра — нарезку по `DOCS/MODEL-IMAGES.md`: avif через `<picture>`, фолбэк webp.
+ * Тестовые портреты моделей:
+ *
+ * - `?img=png` — исходники 1024×1536;
+ * - `?img=ladder` — карточка через srcset со ступенями 300/600/800, как учит учебник:
+ *   на DPR1 браузер возьмёт 300, на DPR2 — 600, на DPR3 — 800;
+ * - без параметра — нарезка по `DOCS/MODEL-IMAGES.md`: один 800w, avif через `<picture>`.
  *
  * Две ширины, выбирает их КОМПОНЕНТ, а не браузер: srcset мы не ставим. 800w — портрет в
  * карточку сетки, 300w — квадратный кроп по лицу в круглые аватары, мини-карточки и подсказки
@@ -41,12 +48,12 @@ const PORTRAIT_GUIDS = [
  * по query. Для замера сети это и нужно: он честен только с чистого захода.
  */
 export function useTestModelImages() {
-  const isSource = useRoute().query['img'] === 'png';
+  const format = String(useRoute().query['img'] || '');
 
   const portraits: ITestModelPortrait[] = PORTRAIT_GUIDS.map((guid) => {
     const base = `/img/models/${guid}`;
 
-    if (isSource) {
+    if (format === 'png') {
       return { primaryImageUrl: `${base}.png`, thumbUrl: `${base}.png` };
     }
 
@@ -56,6 +63,10 @@ export function useTestModelImages() {
       primaryImageSmallUrl: `${base}-300.webp`,
       primaryImageAvifUrl: `${base}-800.avif`,
       primaryImageSmallAvifUrl: `${base}-300.avif`,
+      primaryImageUrls: format === 'ladder' ? {
+        avif: { 300: `${base}-p300.avif`, 600: `${base}-p600.avif`, 800: `${base}-800.avif` },
+        webp: { 300: `${base}-p300.webp`, 600: `${base}-p600.webp`, 800: `${base}-800.webp` },
+      } : undefined,
     };
   });
 

package/package.json

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

package/types/model-image-urls.d.ts

@@ -9,5 +9,6 @@
  * держать ради него `<picture>` в `UiImg` не окупалось.
  */
 export interface IModelImageUrls {
+  avif?: Record<string, string>;
   webp: Record<string, string>;
 }