Add compressed pngs

artworks.ts

@@ -37,37 +37,26 @@ function displayInitialArtwork(index: number): void {
 
   loadImageWithProgress(artwork.imagePath,
     (progressText) => {
-      if (loadingIndicator) {
-        loadingIndicator.innerHTML = `fetching...<br><br>${progressText}`;
+      const progressElement = document.getElementById('progressText');
+      if (progressElement) {
+          progressElement.innerHTML = `<br>${progressText}`;
       }
     },
     (imgURL) => {
       initialArtworkElement.src = imgURL;
       initialArtworkElement.style.display = "block";
 
+      const loadingIndicator = document.getElementById('loadingIndicator');
       if (loadingIndicator) {
-        loadingIndicator.innerHTML = `fetching...<br><br>`;
-        loadingIndicator.style.display = 'none';
+          loadingIndicator.style.display = 'none';
+      }
+      // Reset progress text for next load
+      const progressElement = document.getElementById('progressText');
+      if (progressElement) {
+          progressElement.innerHTML = '';
       }
     }
   );
-
-
-  // Create a new Image object for loading
-  // const newImage = new Image();
-  // newImage.onload = () => {
-  //   initialArtworkElement.src = newImage.src;
-
-  //   initialArtworkElement.style.display = "block";
-
-  //   // Hide the loading indicator
-  //   if (loadingIndicator) {
-  //     loadingIndicator.style.display = 'none';
-  //   }
-  // };
-
-  // // Start loading the new image
-  // newImage.src = artwork.imagePath;
 }
 
 function preloadImage(src, callback) {

artworks/index.html

@@ -14,7 +14,10 @@
     <div class="header">
         <a href="/" id="homeLink">●</a>
     </div>
-    <p id="loadingIndicator">fetching...</p>
+    <div id="loadingIndicator">
+        <div>fetching...</div>
+        <div id="progressText"></div>
+    </div>
     <img id="initialArtwork">
     <div id="artworkContainer" class="artwork-container" style="display: none;">
         <button id="closeViewer" >x</button>

constants.ts

@@ -11,7 +11,7 @@ export interface Artwork {
 export const artworks: Artwork[] = [
   {
     title: "#8",
-    imagePath: "../png/8.png",
+    imagePath: "../png/8-fs8.png",
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/8.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/8.dzi",
     description: `190cm x 190cm\naluminium dibond, direct print`,
@@ -21,7 +21,7 @@ export const artworks: Artwork[] = [
   },
   {
       title: "#5",
-      imagePath: "../png/5.png",
+      imagePath: "../png/5-fs8.png",
       // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/5.png",
       dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/5.dzi",
       description: `95.3cm x 190cm aluminium dibond, direct print`,
@@ -31,7 +31,7 @@ export const artworks: Artwork[] = [
   },
   {
     title: "#4",
-    imagePath: "../png/4.png",
+    imagePath: "../png/4-fs8.png",
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/4.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/4.dzi",
     description: `300cm x 90cm aluminium dibond, direct print`,
@@ -41,7 +41,7 @@ export const artworks: Artwork[] = [
   },
   {
     title: "#2",
-    imagePath: "../png/2.png",
+    imagePath: "../png/2-fs8.png",
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/2.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/2.dzi",
     description: `160cm x 90cm aluminium dibond, direct print`,
@@ -51,7 +51,7 @@ export const artworks: Artwork[] = [
   },
   {
     title: "#3",
-    imagePath: "../png/3.png",
+    imagePath: "../png/3-fs8.png",
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/3.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/3.dzi",
     description: `135cm x 90cm aluminium dibond, direct print`,
@@ -61,7 +61,7 @@ export const artworks: Artwork[] = [
   },
   {
     title: "#6",
-    imagePath: "../png/6.png",
+    imagePath: "../png/6-fs8.png",
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/6.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/6.dzi",
     description: `126.7cm x 190cm aluminium dibond, direct print`,
@@ -71,7 +71,7 @@ export const artworks: Artwork[] = [
   },
   {
     title: "#1",
-    imagePath: "../png/1.png",
+    imagePath: "../png/1-fs8.png",
     // imagePath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/png/1.png",
     dziPath: "https://adndkr-art.s3.eu-north-1.amazonaws.com/1.dzi",
     description: `150cm x 100cm aluminium dibond, direct print`,