gallery-apps: shrink grid thumbnails to 200x300

completed📦 gallery-apps👤 YCEJ9999🗓 2026-07-02 16:10:03

galleryPicsumthumbnail resolutionbandwidthlightbox

Request

Use a smaller thumbnail resolution for the gallery grid (like https://picsum.photos/200/300).

Summary

gallery-apps — smaller grid thumbnails (200×300)

What changed

The gallery grid was requesting 400×300 renders per photo. Dropped the default to 200×300 so the infinite-scroll grid downloads much lighter images (a 200×300 Picsum render is ~10 KB). The full-size image in the lightbox is unaffected — it uses largeUrl (1200×800).

Files

src/datas/tables/gallery.ts — thumbUrl default dimensions changed 400×300 → 200×300. largeUrl(p, w, h) still passes explicit dimensions, so it's unaffected.
src/pages/gallery/index.vue — grid <img> intrinsic size updated width="400" height="300" → width="200" height="300" to match the served image (avoids layout-shift / wrong aspect hint).

Notes for future sessions

The grid uses object-cover h-40, so the CSS box is fixed regardless of the served resolution — shrinking thumbUrl only reduces bytes, it doesn't change the visible layout.
Thumbnail vs. lightbox resolution are cleanly separated: thumbUrl (200×300, grid) and largeUrl (1200×800, lightbox) both wrap Picsum's /id/{id}/{w}/{h} form in src/datas/tables/gallery.ts.

Outcome

shippedChanged thumbUrl default from 400x300 to 200x300 in src/datas/tables/gallery.ts. Updated the grid <img> intrinsic size to width=200 height=300 in src/pages/gallery/index.vue. Verified the 200x300 Picsum URL returns 200 (~9.8KB); largeUrl (lightbox) unaffected since it passes explicit dimensions.

Decisions

Keep the per-id Picsum URL, shrink only the dimensions

Kept the id-based Picsum form (/id/{id}/200/300) instead of the random-image form the user cited (https://picsum.photos/200/300).

Why: The random form returns a different photo each request; the grid must keep showing each photo's own image (and match the lightbox), so we only shrank the dimensions on the existing per-id URL.

Match the <img> intrinsic size to 200x300

Updated the <img> width/height attributes to 200x300 alongside the URL change.

Why: The intrinsic-size attributes are an aspect-ratio/layout hint for the browser; leaving them at 400x300 while serving 200x300 would give a mismatched aspect hint.

Files changed

File	Operation	Note
`src/datas/tables/gallery.ts`	modified
`src/pages/gallery/index.vue`	modified

Commands

mono skills check
mono skills read --app gallery-apps --type knowledge
curl https://picsum.photos/id/10/200/300

← All Skills Knowledge History