ajout de l attribut sizes

index.html

@@ -83,23 +83,23 @@ <h3 class="title">Portfolio</h3>
 	<div class="container py-3">
 		<div class="gallery" style="display: none">
 			<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/aaron-paul-concert-1920.webp" alt="lumières de concert et mains levées"
-			srcset="./assets/images/slider/aaron-paul-concert-480.webp 480w, ./assets/images/slider/aaron-paul-concert-1920.webp 1920w"/>
+			srcset="./assets/images/slider/aaron-paul-concert-480.webp 480w, ./assets/images/slider/aaron-paul-concert-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/ali-morshedlou-business-1920.webp" alt="portrait d'homme d'affaires avec montre"
-			srcset="./assets/images/slider/ali-morshedlou-business-480.webp 480w, ./assets/images/slider/ali-morshedlou-business-1920.webp 1920w"/>
+			srcset="./assets/images/slider/ali-morshedlou-business-480.webp 480w, ./assets/images/slider/ali-morshedlou-business-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/jason-goodman-business-1920.webp" alt="femme souriante en arrière plan entreprise"
-			srcset="./assets/images/slider/jason-goodman-business-480.webp 480w, ./assets/images/slider/jason-goodman-business-1920.webp 1920w"/>
+			srcset="./assets/images/slider/jason-goodman-business-480.webp 480w, ./assets/images/slider/jason-goodman-business-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 			<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/hannah-busing-wedding-1920.webp" alt="mains d'un couple tendues avec bague"
-			srcset="./assets/images/slider/hannah-busing-wedding-480.webp 480w, ./assets/images/slider/hannah-busing-wedding-1920.webp 1920w"/>
+			srcset="./assets/images/slider/hannah-busing-wedding-480.webp 480w, ./assets/images/slider/hannah-busing-wedding-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 			<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/ade-tunji-portrait-1920.webp" alt="portrait d'un homme avec les yeux fermés"
-			srcset="./assets/images/slider/ade-tunji-portrait-480.webp 480w, ./assets/images/slider/ade-tunji-portrait-1920.webp 1920w"/>
+			srcset="./assets/images/slider/ade-tunji-portrait-480.webp 480w, ./assets/images/slider/ade-tunji-portrait-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 			<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/jakob-owens-wedding-1920.webp" alt="jeunes mariés souriants se tenant la main"
-			srcset="./assets/images/slider/jakob-owens-wedding-480.webp 480w, ./assets/images/slider/jakob-owens-wedding-1920.webp 1920w"/>
+			srcset="./assets/images/slider/jakob-owens-wedding-480.webp 480w, ./assets/images/slider/jakob-owens-wedding-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 			<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/nino-van-portrait-1920.webp" alt="portrait d'une jeune femme avec lunettes"
-			srcset="./assets/images/slider/nino-van-portrait-480.webp 480w, ./assets/images/slider/nino-van-portrait-1920.webp 1920w"/>
+			srcset="./assets/images/slider/nino-van-portrait-480.webp 480w, ./assets/images/slider/nino-van-portrait-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 			<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/austin-neill-concert-1920.webp" alt="chanteur avec micro sur scène enfumée"
-			srcset="./assets/images/slider/austin-neill-concert-480.webp 480w, ./assets/images/slider/austin-neill-concert-1920.webp 1920w"/>
+			srcset="./assets/images/slider/austin-neill-concert-480.webp 480w, ./assets/images/slider/austin-neill-concert-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 			<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/mateus-campos-business-1920.webp" alt="femme qui rit devant un ordinateur"
-			srcset="./assets/images/slider/mateus-campos-business-480.webp 480w, ./assets/images/slider/mateus-campos-business-1920.webp 1920w"/>
+			srcset="./assets/images/slider/mateus-campos-business-480.webp 480w, ./assets/images/slider/mateus-campos-business-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 		</div>
 	</div>
 	<div class="quote">
@@ -172,7 +172,7 @@ <h3>Une question ? Une demande de devis ?</h3>
 		</div>
 		<div class="picture right">
 			<img src="./assets/images/camera-lens-1920.webp" alt="objectif d'un appareil photo minolta"
-			srcset="./assets/images/slider/camera-lens-480.webp 480w, ./assets/images/slider/camera-lens-1920.webp 1920w">
+			srcset="./assets/images/slider/camera-lens-480.webp 480w, ./assets/images/slider/camera-lens-1920.webp 1920w" sizes="(max-width: 480px) 100vw, 1920px"/>
 		</div>
 	</div>
 </div>