diff --git a/src/components/library/SeriesGrid.tsx b/src/components/library/SeriesGrid.tsx
index 1452965..ab69c6c 100644
--- a/src/components/library/SeriesGrid.tsx
+++ b/src/components/library/SeriesGrid.tsx
@@ -94,6 +94,8 @@ function SeriesCard({ series, onClick }: SeriesCardProps) {
             sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
             onError={() => setImageError(true)}
             onLoad={() => setIsLoading(false)}
+            loading="lazy"
+            quality={50}
           />
         </>
       ) : (
diff --git a/src/components/series/BookGrid.tsx b/src/components/series/BookGrid.tsx
index cfddd5e..ed572f5 100644
--- a/src/components/series/BookGrid.tsx
+++ b/src/components/series/BookGrid.tsx
@@ -117,6 +117,8 @@ function BookImage({ book, getBookThumbnailUrl, isCompleted }: BookImageProps) {
         sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw"
         onError={() => setImageError(true)}
         onLoad={() => setIsLoading(false)}
+        loading="lazy"
+        quality={50}
       />
     </div>
   );
@@ -177,6 +179,8 @@ function BookCard({ book, onClick, getBookThumbnailUrl }: BookCardProps) {
             className="object-cover"
             sizes="(max-width: 640px) 33vw, (max-width: 1024px) 16.666vw, 16.666vw"
             onError={() => setImageError(true)}
+            loading="lazy"
+            quality={50}
           />
         ) : (
           <div className="w-full h-full flex items-center justify-center">
diff --git a/src/components/series/SeriesHeader.tsx b/src/components/series/SeriesHeader.tsx
index 226b5de..3ab5c56 100644
--- a/src/components/series/SeriesHeader.tsx
+++ b/src/components/series/SeriesHeader.tsx
@@ -149,8 +149,8 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
                 "object-cover blur-2xl scale-110 transition-opacity duration-300",
                 imageLoading ? "opacity-0" : "opacity-10"
               )}
-              priority
-              unoptimized
+              loading="lazy"
+              quality={25}
               onLoad={() => setImageLoading(false)}
             />
           </div>
@@ -176,8 +176,8 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
                   )}
                   onError={() => setImageError(true)}
                   onLoad={() => setImageLoading(false)}
-                  priority
-                  unoptimized
+                  loading="lazy"
+                  quality={75}
                 />
               </div>
             ) : (