diff --git a/playground/app.vue b/playground/app.vue
index 8d2a6f5..71ce5ac 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -57,6 +57,11 @@
             <figcaption>No process image:</figcaption>
             <NuxtPicture :modifiers="{ noProcess: true }" src="opera.webp" />
         </figure>
+
+        <figure>
+            <figcaption>Avif format:</figcaption>
+            <NuxtPicture format="avif" src="rhino.jpg" />
+        </figure>
     </div>
 </template>
 
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
index fe5c832..79e3a1e 100644
--- a/src/runtime/index.ts
+++ b/src/runtime/index.ts
@@ -79,8 +79,8 @@ export function getImage(
     // process modifiers
     const operationsString = operations.join('-')
 
-    if (format === 'webp' && !src.endsWith('.webp')) {
-        src += '.webp'
+    if (format && !src.endsWith('.' + format)) {
+        src += '.' + format
     }
 
     const getUrl = function (): string {