Responsive images

src/lib/images.svelte

@@ -2,9 +2,9 @@
 	import type IImage from '$lib/interfaces/IImage';
 
 	let images: IImage[] = [
-		{ url: 'IMG_5613.jpeg', alt: 'Kevin at beach' },
-		{ url: 'IMG_4551.jpeg', alt: 'Kevin fishing' },
-		{ url: 'IMG_1925.jpeg', alt: 'Kevin in a boat with dog' }
+		{ name: 'fish', alt: 'Kevin fishing' },
+		{ name: 'boat', alt: 'Kevin in a boat with dog' },
+		{ name: 'sand', alt: 'Kevin at beach' }
 	];
 
 	function cycle() {
@@ -20,8 +20,13 @@
 	role="button"
 	tabindex="0"
 >
-	{#each images as image (image.url)}
-		<img src="/images/{image.url}" alt={image.alt} />
+	{#each images as image (image.name)}
+		<picture>
+			<source media="(max-width: 420px)" srcset="/images/{image.name}-300w.jpeg" />
+			<source media="(max-width: 1800px)" srcset="/images/{image.name}-620w.jpeg" />
+			<source media="(min-width: 1801px)" srcset="/images/{image.name}-900w.jpeg" />
+			<img src="/images/{image.name}-300w.jpeg" alt={image.alt} />
+		</picture>
 	{/each}
 </div>
 
@@ -33,18 +38,28 @@
 		-webkit-user-select: none;
 		margin-left: 40px;
 
-		img {
+		picture {
 			position: absolute;
 			margin-top: 10vh;
-			max-height: 80vh;
 			transition: all 0.51s ease;
 		}
 
+		img {
+			max-width: 42vw;
+		}
+
 		@for $i from 0 through 4 {
-			img:nth-of-type(#{$i}) {
+			picture:nth-of-type(#{$i}) {
 				left: calc(-10px * $i);
 				top: calc(-10px * $i);
 			}
 		}
 	}
+
+	@media (max-width: 500px) {
+		div.images img {
+			margin-bottom: 3rem;
+			max-width: 80vw;
+		}
+	}
 </style>

src/lib/interfaces/IImage.ts

@@ -1,6 +1,6 @@
 interface IImage {
-	url: string;
+	name: string;
 	alt: string;
 }
 
-export type { IImage };
+export default IImage;