diff --git a/components/Picture.tsx b/components/Picture.tsx
new file mode 100644
index 0000000..e4e888b
--- /dev/null
+++ b/components/Picture.tsx
@@ -0,0 +1,28 @@
+import { unwrapSignalOrValue } from ':src/utils.ts'
+import { Ensure } from ':types'
+import { JSX } from 'preact'
+
+export type PictureProps =
+    & { formats: string[] }
+    & Ensure<JSX.HTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'loading'>
+
+export function Picture(
+    { formats, src, ...props }: PictureProps,
+) {
+    const groups = unwrapSignalOrValue(src)?.match(/(?<path>.*)(?<ext>\.\w+)/)
+        ?.groups
+    if (groups === undefined) {
+        throw new SyntaxError(`unable to parse path of "${src.valueOf()}"`)
+    }
+
+    const { path } = groups
+
+    return (
+        <picture>
+            {formats.map((format) => (
+                <source type={`image/${format}`} srcset={`${path}.${format}`} />
+            ))}
+            <img src={src} {...props} />
+        </picture>
+    )
+}
diff --git a/components/SponsorCards.tsx b/components/SponsorCards.tsx
index b5c5246..7ffb3ff 100644
--- a/components/SponsorCards.tsx
+++ b/components/SponsorCards.tsx
@@ -1,4 +1,5 @@
 import { asset } from '$fresh/runtime.ts'
+import { Picture } from ':components/Picture.tsx'
 
 export function SponsorCards() {
 	return (
@@ -13,7 +14,12 @@ function SponsorCard(
 ) {
 	return (
 		<a class='components__sponsor_card' href={href} target='_blank'>
-			<img src={asset(src)} alt={alt} />
+			<Picture
+				src={asset(src)}
+				alt={alt}
+				loading={'lazy'}
+				formats={['avif']}
+			/>
 		</a>
 	)
 }
diff --git a/deno.json b/deno.json
index 1d4427a..ac7ae58 100644
--- a/deno.json
+++ b/deno.json
@@ -34,6 +34,7 @@
 		":components/": "./components/",
 		":islands/": "./islands/",
 		":src/": "./src/",
+		":types": "./types.ts",
 		"@cohabit/cohamail/": "./packages/@cohabit__cohamail@0.2.1/",
 		"@cohabit/ressources_manager/": "./packages/@cohabit__ressources_manager@0.1.3/",
 		"@deno/gfm": "jsr:@deno/gfm@^0.8.2",
diff --git a/src/utils.ts b/src/utils.ts
index 540a723..62dd926 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,4 @@
+import { SignalLike } from '$fresh/src/types.ts'
 import { JsonValue } from '$std/json/common.ts'
 import { decodeBase64 } from '@std/encoding/base64'
 import { JsonStringifyStream } from '@std/json'
@@ -171,3 +172,22 @@ export function base64ToString(base64: string): string {
 	const bytes = decodeBase64(base64)
 	return new TextDecoder().decode(bytes)
 }
+
+export function unwrapSignalOrValue<T>(valueOrSignal: T | SignalLike<T>): T {
+	if (typeof valueOrSignal !== 'object') {
+		return valueOrSignal
+	}
+
+	if (valueOrSignal === null) {
+		return valueOrSignal
+	}
+
+	if (
+		'value' in valueOrSignal && 'peek' in valueOrSignal &&
+		'subscribe' in valueOrSignal
+	) {
+		return valueOrSignal.value
+	}
+
+	return valueOrSignal
+}
diff --git a/types.ts b/types.ts
index 5c2e2ac..31b349f 100644
--- a/types.ts
+++ b/types.ts
@@ -4,3 +4,5 @@ export interface User {
 	mail: string
 	groupes: string[]
 }
+
+export type Ensure<T, K extends keyof T> = T & Required<Pick<T, K>>