diff --git a/src/client/components/GearImage.tsx b/src/client/components/GearImage.tsx
index d417c04..a539f6b 100644
--- a/src/client/components/GearImage.tsx
+++ b/src/client/components/GearImage.tsx
@@ -7,6 +7,7 @@ interface GearImageProps {
 	cropY?: number | null;
 	className?: string;
 	cover?: boolean;
+	onLoad?: () => void;
 }
 
 export function GearImage({
@@ -18,6 +19,7 @@ export function GearImage({
 	cropY,
 	className = "",
 	cover = false,
+	onLoad,
 }: GearImageProps) {
 	const hasCrop = cropZoom != null && cropZoom > 1;
 	const bgStyle = dominantColor
@@ -29,6 +31,8 @@ export function GearImage({
 			<img
 				src={src}
 				alt={alt}
+				loading="lazy"
+				onLoad={onLoad}
 				className={`w-full h-full object-cover ${className}`}
 			/>
 		);
@@ -40,6 +44,8 @@ export function GearImage({
 				<img
 					src={src}
 					alt={alt}
+					loading="lazy"
+					onLoad={onLoad}
 					className={`w-full h-full object-cover ${className}`}
 					style={{
 						transform: `scale(${cropZoom}) translate(${cropX ?? 0}%, ${cropY ?? 0}%)`,
@@ -58,6 +64,8 @@ export function GearImage({
 			<img
 				src={src}
 				alt={alt}
+				loading="lazy"
+				onLoad={onLoad}
 				className={`w-full h-full object-contain ${className}`}
 			/>
 		</div>