diff --git a/generateSite.js b/generateSite.js
index 04fb430..e9d3fcc 100644
--- a/generateSite.js
+++ b/generateSite.js
@@ -56,52 +56,45 @@ async function generateSite() {
             position: relative;
             width: 100%;
             height: 100%;
-            background: #000; /* Dark background while loading */
             aspect-ratio: 1;
         }
         .progressive-image {
             position: absolute;
             top: 0;
             left: 0;
-            right: 0;
-            bottom: 0;
-            max-width: 100%;
-            max-height: 100%;
-            margin: auto;
+            width: 100%;
+            height: 100%;
             object-fit: contain;
+            transition: opacity 0.5s ease-in-out;
         }
         .thumbnail {
             filter: blur(10px);
-            transform: scale(1.02); /* Reduced scale to prevent edges showing */
+            transform: scale(1.1);
             opacity: 1;
-            z-index: 1; /* Place thumbnail above full image while loading */
         }
         .full-image {
             opacity: 0;
-            z-index: 2; /* Place full image on top when loaded */
         }
         .full-image.loaded {
             opacity: 1;
         }
-        .full-image.loaded + .thumbnail {
-            opacity: 0; /* Hide thumbnail when full image is loaded */
-        }
     </style>
 </head>
 <body>
     <div class="image-container">
         ${image?.localPath ? `
             <div class="progressive-image-container">
+                <img 
+                    class="progressive-image thumbnail" 
+                    src="${image.localPath}?quality=10&width=100" 
+                    alt="${image.metadata.description || ''}"
+                    onload="this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
+                >
                 <img 
                     class="progressive-image full-image" 
                     src="${image.localPath}" 
                     alt="${image.metadata.description || ''}"
-                    onload="this.classList.add('loaded'); this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
-                >
-                <img 
-                    class="progressive-image thumbnail" 
-                    src="${image.localPath}?quality=10&width=50" 
-                    alt="${image.metadata.description || ''}"
+                    onload="this.classList.add('loaded')"
                 >
             </div>
         ` : '<p>Image not available</p>'}
@@ -161,11 +154,21 @@ async function serveStaticSite(port = 3000) {
                     try {
                         const Sharp = (await import('sharp')).default;
                         const image = await Sharp(filePath)
-                            .resize(parseInt(width))
-                            .jpeg({ quality: parseInt(quality) })
+                            .resize({
+                                width: parseInt(width),
+                                height: parseInt(width),
+                                fit: 'inside'
+                            })
+                            .jpeg({
+                                quality: parseInt(quality),
+                                progressive: true
+                            })
                             .toBuffer();
                         
-                        res.writeHead(200, { 'Content-Type': 'image/jpeg' });
+                        res.writeHead(200, {
+                            'Content-Type': 'image/jpeg',
+                            'Cache-Control': 'public, max-age=31536000'
+                        });
                         res.end(image);
                         return;
                     } catch (error) {
