Closed Jean-Baptiste-Lasselle closed 6 months ago
J'ai abandonné cette approche, après avoir fait une migration à astro v4: désormais, nous utilisons les options du composant Image
de astro:assets
, pour générer différentes images optimisées, et avoir un srcset.
Typiquement :
<!-- CRT DISPLAY -->
<!-- Tailwind css config:
'xxs-noyoutube': '135px',
// => @media (min-width: 135px) { ... }
'xxs': '240px',
// => @media (min-width: 240px) { ... }
'xs-noyoutube': '335px', // at this exact screen size, the youtube video gallery will disappear
// => @media (min-width: 335px) { ... }
'xs': '360px',
// => @media (min-width: 360px) { ... }
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'lgxl': '1220px',
// => @media (min-width: 1220px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
'xxl': '1480px',
// => @media (min-width: 1480px) { ... }
[size of {arcTriomphe} image is 1197x666]
-->
<Image
src={arcTriomphe}
widths={[240, 335, 360, 640, 768, 1024, 2000]}
sizes={`(max-width: 240px) 200px, (max-width: 335px) 300px, (max-width: 360px) 320px, (max-width: 640px) 600px, (max-width: 768px) 720px, (max-width: 1024px) 800px, (max-width: 2000px) 900px`}
class="rounded-[50px] filter grayscale blur-[2px] z-1 xl:max-w-[80%]"
alt="L'Arc de Triomphe."
/>
Je suis en train d'ajouter le servie de resizing des images sur la branche
boris/dropup/refined