diff --git a/apps/backoffice/app/authors/[name]/page.tsx b/apps/backoffice/app/authors/[name]/page.tsx
index b04e7d6..3885f5b 100644
--- a/apps/backoffice/app/authors/[name]/page.tsx
+++ b/apps/backoffice/app/authors/[name]/page.tsx
@@ -95,7 +95,7 @@ export default async function AuthorDetailPage({
                       alt={s.name}
                       fill
                       className="object-cover"
-                      unoptimized
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
                     />
                   </div>
                   <div className="p-3">
diff --git a/apps/backoffice/app/books/[id]/page.tsx b/apps/backoffice/app/books/[id]/page.tsx
index 65b0822..01a8d26 100644
--- a/apps/backoffice/app/books/[id]/page.tsx
+++ b/apps/backoffice/app/books/[id]/page.tsx
@@ -95,7 +95,7 @@ export default async function BookDetailPage({
               alt={t("bookDetail.coverOf", { title: book.title })}
               fill
               className="object-cover"
-              unoptimized
+              sizes="192px"
               loading="lazy"
             />
           </div>
diff --git a/apps/backoffice/app/books/page.tsx b/apps/backoffice/app/books/page.tsx
index c882f79..4848fda 100644
--- a/apps/backoffice/app/books/page.tsx
+++ b/apps/backoffice/app/books/page.tsx
@@ -170,7 +170,7 @@ export default async function BooksPage({
                       alt={t("books.coverOf", { name: s.name })}
                       fill
                       className="object-cover"
-                      unoptimized
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
                     />
                   </div>
                   <div className="p-2">
diff --git a/apps/backoffice/app/components/BookCard.tsx b/apps/backoffice/app/components/BookCard.tsx
index d6b5fbb..5e1e330 100644
--- a/apps/backoffice/app/components/BookCard.tsx
+++ b/apps/backoffice/app/components/BookCard.tsx
@@ -51,7 +51,6 @@ function BookImage({ src, alt }: { src: string; alt: string }) {
         sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
         onLoad={() => setIsLoaded(true)}
         onError={() => setHasError(true)}
-        unoptimized
       />
     </div>
   );
diff --git a/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx b/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
index 5a37ce5..dfc5f8d 100644
--- a/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/series/[name]/page.tsx
@@ -94,7 +94,7 @@ export default async function SeriesDetailPage({
                 alt={t("books.coverOf", { name: displayName })}
                 fill
                 className="object-cover"
-                unoptimized
+                sizes="160px"
               />
             </div>
           </div>
diff --git a/apps/backoffice/app/libraries/[id]/series/page.tsx b/apps/backoffice/app/libraries/[id]/series/page.tsx
index 45b0c44..ea811b1 100644
--- a/apps/backoffice/app/libraries/[id]/series/page.tsx
+++ b/apps/backoffice/app/libraries/[id]/series/page.tsx
@@ -86,7 +86,7 @@ export default async function LibrarySeriesPage({
                       alt={t("books.coverOf", { name: s.name })}
                       fill
                       className="object-cover"
-                      unoptimized
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
                     />
                   </div>
                   <div className="p-3">
diff --git a/apps/backoffice/app/libraries/page.tsx b/apps/backoffice/app/libraries/page.tsx
index 948b055..772c247 100644
--- a/apps/backoffice/app/libraries/page.tsx
+++ b/apps/backoffice/app/libraries/page.tsx
@@ -1,4 +1,5 @@
 import { revalidatePath } from "next/cache";
+import Image from "next/image";
 import Link from "next/link";
 import { listFolders, createLibrary, deleteLibrary, fetchLibraries, getBookCoverUrl, LibraryDto, FolderItem } from "../../lib/api";
 import type { TranslationKey } from "../../lib/i18n/fr";
@@ -88,10 +89,12 @@ export default async function LibrariesPage() {
               {/* Thumbnail fan */}
               {thumbnails.length > 0 ? (
                 <Link href={`/libraries/${lib.id}/series`} className="block relative h-48 overflow-hidden bg-muted/10">
-                  <img
+                  <Image
                     src={thumbnails[0]}
                     alt=""
-                    className="absolute inset-0 w-full h-full object-cover blur-xl scale-110 opacity-40"
+                    fill
+                    className="object-cover blur-xl scale-110 opacity-40"
+                    sizes="(max-width: 768px) 100vw, 33vw"
                     loading="lazy"
                   />
                   <div className="absolute inset-0 flex items-end justify-center">
@@ -104,17 +107,20 @@ export default async function LibrariesPage() {
                       const cx = Math.cos(rad) * radius;
                       const cy = Math.sin(rad) * radius;
                       return (
-                        <img
+                        <Image
                           key={i}
                           src={url}
                           alt=""
-                          className="absolute w-24 h-36 object-cover shadow-lg"
+                          width={96}
+                          height={144}
+                          className="absolute object-cover shadow-lg"
                           style={{
                             transform: `translate(${cx}px, ${cy}px) rotate(${angle}deg)`,
                             transformOrigin: 'bottom center',
                             zIndex: count - Math.abs(Math.round(i - mid)),
                             bottom: '-185px',
                           }}
+                          sizes="96px"
                           loading="lazy"
                         />
                       );
diff --git a/apps/backoffice/app/series/page.tsx b/apps/backoffice/app/series/page.tsx
index 509bd7a..98751e0 100644
--- a/apps/backoffice/app/series/page.tsx
+++ b/apps/backoffice/app/series/page.tsx
@@ -138,7 +138,7 @@ export default async function SeriesPage({
                       alt={t("books.coverOf", { name: s.name })}
                       fill
                       className="object-cover"
-                      unoptimized
+                      sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 16vw"
                     />
                   </div>
                   <div className="p-3">
diff --git a/apps/backoffice/next.config.mjs b/apps/backoffice/next.config.mjs
index ed75d0a..d366921 100644
--- a/apps/backoffice/next.config.mjs
+++ b/apps/backoffice/next.config.mjs
@@ -1,7 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
-  typedRoutes: true
+  typedRoutes: true,
+  images: {
+    minimumCacheTTL: 86400,
+  },
 };
 
 export default nextConfig;