studio-variable/world-game
3
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Opti: images galerie portfolio en srcset webp

Browse source 
Kirby: preset 'gallery' + 'gallery-webp' (200→800px, qualité 80)
API: images_gallery retourne {src, srcset, webp} au lieu d'une simple URL
GalleryAnimation: <picture> + srcset, sizes 15vw desktop / 33vw mobile
decoding="async" ajouté

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-06 16:41:50 +01:00
parent 88379fe073
commit 88a5c78d7a
3 changed files with 44 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/ui/GalleryAnimation.svelte
View file

@ -1,8 +1,8 @@
<script>
/**
* GalleryAnimation — animation CSS de galerie en 3 colonnes défilantes.
* @prop {string[]} images — URLs des images
* @prop {number} secondsPerImage — durée par image (défaut: 8s)
* @prop {Array<{src: string, srcset: string, webp: string}>} images
* @prop {number} secondsPerImage — durée par image (défaut: 8s)
*/
let { images = [], secondsPerImage = 8 } = $props()
@ -38,11 +38,22 @@
style="animation-delay: -{col.delay}s"
>
<!-- Images × 2 pour le défilement infini -->
{#each col.images as src}
<img class="gallery-animation__image" {src} alt="" aria-hidden="true" loading="lazy" />
{/each}
{#each col.images as src}
<img class="gallery-animation__image" {src} alt="" aria-hidden="true" loading="lazy" />
{#each [col.images, col.images] as set}
{#each set as img}
<picture>
<source type="image/webp" srcset={img.webp} sizes="(max-width: 700px) 33vw, 15vw" />
<img
class="gallery-animation__image"
src={img.src}
srcset={img.srcset}
sizes="(max-width: 700px) 33vw, 15vw"
alt=""
aria-hidden="true"
loading="lazy"
decoding="async"
/>
</picture>
{/each}
{/each}
</div>
</div>