feat: variantes responsives 320/800/1600 via sharp + srcset partout (Reels, cards, galerie, favoris)

src/components/ResponsiveImage.tsx

@@ -0,0 +1,56 @@
+/**
+ * <img> avec srcset/sizes pré-rempli sur les variantes Karbé.
+ * Drop-in remplacement pour les balises `<img src=… />` côté front.
+ */
+
+import { buildSrcSet } from "@/lib/image-variants";
+
+type Props = {
+  src: string;
+  alt: string;
+  /** Indication CSS pour le browser. Ex: "(min-width: 768px) 800px, 100vw" */
+  sizes?: string;
+  className?: string;
+  loading?: "lazy" | "eager";
+  fetchPriority?: "high" | "low" | "auto";
+  width?: number;
+  height?: number;
+  decoding?: "async" | "sync" | "auto";
+  draggable?: boolean;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+};
+
+export function ResponsiveImage({
+  src,
+  alt,
+  sizes = "(min-width: 768px) 800px, 100vw",
+  className,
+  loading = "lazy",
+  fetchPriority = "auto",
+  width,
+  height,
+  decoding = "async",
+  draggable,
+  style,
+  onClick,
+}: Props) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      srcSet={buildSrcSet(src)}
+      sizes={sizes}
+      alt={alt}
+      loading={loading}
+      fetchPriority={fetchPriority}
+      decoding={decoding}
+      width={width}
+      height={height}
+      draggable={draggable}
+      style={style}
+      className={className}
+      onClick={onClick}
+    />
+  );
+}